Downgrade Sass to 1.77.5 and fix as many deprecations as possible

[frankieroberto]

This downgrades Sass from 1.77.6 to 1.77.5.

Newer versions introduces a lot more deprecation warnings ahead of Sass 2.0.0 – so I’ve tried to fix as many as possible.

A lot of the warnings are from the vendored Sass-mq however. I've not touched that at all as it feels a bit icky to edit a vendor file (although it has had some code style tweaks over the years).

The GOV.UK Design System team are considering removing the sass-mq dependency altogether. However there was a 6.0.0 release of it last week which resolved the deprecations.

The other remaining deprecation warnings are about use of @import - however moving away from is bigger job (changing every instance of @import to @use and namespacing all the imported functions).

Checklist

• Tested against our testing policy (Resolution, Browser & Accessibility)
• Follows our coding standards and style guide
• CHANGELOG entry

[paulrobertlloyd]

The other remaining deprecation warnings are about use of @import - however moving away from is bigger job (changing every instance of @import to @use and namespacing all the imported functions).

From the Sass docs:

You can even load a module without a namespace by writing @use "<url>" as *.

In my limited experience trying to move over to using @use, this means you can do the following:

- @import 'core.scss'
+ @use 'core.scss' as *

This then means you don’t need to use namespaced variables. However, the Sass documentation goes on to say:

We recommend you only do this for stylesheets written by you, though; otherwise, they may introduce new members that cause name conflicts!

Which is to say this may be a short term fix, but longer term, a breaking change could introduce an nhsuk namespace for all mixins, functions and variables owned by nhsuk-frontend.

[frankieroberto]

@paulrobertlloyd ooh nice, I hadn’t spotted that. It certainly could be a short-term option, and then we could gradually switch to namespaces, starting with the most-reused functions and mixins and so on?

[paulrobertlloyd]

Trying to resolve these deprecation warnings in my prototype, one thing with the above approach (@use "<url>" as *) is that it seemingly causes conflicts if 2 SCSS files export a variable, mixin or function with the same name. As this project shares some names with GOV.UK Frontend, I suspect there’d be clashes if you were to import anything from GOV.UK Frontend.

This module system seems nice ’un all, but get the feeling it’s an all or nothing kinda of affair. 😕 Definitely warrants more investigation.

[colinrotherham]

@frankieroberto I've rebased this for you since I caused lots of conflicts due in #1118 and #1120

Noticed that sass-mq() was already updated to use sass:math so maybe other updates are alright?

f17ff6d Allow Sass mixed-decl until nesting supported by Stylelint
cffa9ac Allow Sass import until migration to Sass modules
581f6b4 Change to namespaced functions (vendor)

Also added silenceDeprecations: ['import', 'mixed-decls'] to get everything green

[frankieroberto]

@colinrotherham I think I only got about halfway through this before giving up (there were still a bunch of deprecations) but maybe fixing some of them is better than nothing?

I'm not sure about silencing the deprecations though - does that introduce the risk that we might continue putting it off? 😅

[colinrotherham]

I'm not sure about silencing the deprecations though - does that introduce the risk that we might continue putting it off? 😅

It's so noisy without though!

Shall we open a new GitHub issue for the migration from @import to @use?

Here's one I did recently:

DEFRA/forms-designer@36ef012
DEFRA/forms-designer@a997047

Loved how easy it was to forward a shared config around:

@forward "pkg:govuk-frontend" with (
  $govuk-assets-path: "/assets/",
  $govuk-breakpoints: (
    mobile: 320px,
    tablet: 641px,
    desktop: 769px,
    wide: 1360px
  ),
  $govuk-new-organisation-colours: true
);

[frankieroberto]

It's so noisy without though!

The noise is the point! (Sort-of). Our other option might be to downgrade or pin the sass version until we’re ready to upgrade having fixed deprecations?

Shall we open a new GitHub issue for the migration from @import to @use?

Yeah good idea.

I think nowadays I’d be half tempted to skip sass altogether and just use plain css with some of the new features like variables, and basic concatenation. But we are where we are.

[colinrotherham]

Ah this is excellent, we have one already:

• scss @import deprecation - migrate to sass module system / @use #701

Noticed we can also close #752 too 🙌

The noise is the point! (Sort-of). Our other option might be to downgrade or pin the sass version until we’re ready to upgrade having fixed deprecations?

@frankieroberto I'm leaning more towards updating anyway (with the silenced deprecations)

Means we can start picking up bug fixes and recent new features such as:

1. sass@1.71.0
   Added Node.js package import like pkg:sass-mq

2. sass@1.77.2
   Added deprecation warning suppression for functions and mixins using __ prefix

3. sass@1.74.0
   Added options to opt into fatalDeprecations and futureDeprecations

---

Shall we discuss with the team?

E.g. Using fatalDeprecations to ban already-fixed deprecations from accidentally coming back

[colinrotherham]

We've decided to stay on the highest version before the deprecations started

But looks like we should probably downgrade from Dart Sass 1.77.6 to 1.77.5 because there's a performance issue affecting @extend that isn't fixed until 1.85.0

I'll do that then we can get this PR merged with all the API changes

---

In a future PR we look at tackling these two:

• Dart Sass 1.77.7 deprecated mixed-decls
• Dart Sass 1.80.0 deprecated import

[colinrotherham]

@frankieroberto Some colours have changed, thankfully this is the only output:

 html {
   background-color: #d8dde0;
   overflow-y: scroll;
-  font-family: "Frutiger W01", arial, sans-serif;
 }
 @font-face {
   font-display: swap;
@@ -91,6 +90,9 @@
   font-weight: 600;
   src: url("https://assets.nhs.uk/fonts/FrutigerLTW01-65Bold.eot?#iefix");
   src: url("https://assets.nhs.uk/fonts/FrutigerLTW01-65Bold.eot?#iefix") format("eot"), url("https://assets.nhs.uk/fonts/FrutigerLTW01-65Bold.woff2") format("woff2"), url("https://assets.nhs.uk/fonts/FrutigerLTW01-65Bold.woff") format("woff"), url("https://assets.nhs.uk/fonts/FrutigerLTW01-65Bold.ttf") format("truetype"), url("https://assets.nhs.uk/fonts/FrutigerLTW01-65Bold.svg#eae74276-dd78-47e4-9b27-dac81c3411ca") format("svg");
+}
+html {
+  font-family: "Frutiger W01", arial, sans-serif;
 }
 
 body {
@@ -2894,7 +2896,7 @@
   box-shadow: 0 4px 0 #263139;
 }
 .nhsuk-button--secondary:hover {
+  background-color: #3d4e5b;
-  background-color: #384853;
 }
 .nhsuk-button--secondary:focus {
   background: #ffeb3b;
@@ -2915,7 +2917,7 @@
   color: #212b32;
 }
 .nhsuk-button--reverse:hover {
+  background-color: #cccccc;
-  background-color: #f2f2f2;
   color: #212b32;
 }
 .nhsuk-button--reverse:focus {
@@ -2942,7 +2944,7 @@
   box-shadow: 0 4px 0 #6b140e;
 }
 .nhsuk-button--warning:hover {
+  background-color: #aa2016;
-  background-color: #a82015;
 }
 .nhsuk-button--warning:focus {
   background: #ffeb3b;

[colinrotherham]

@frankieroberto Sorted the merge conflict

Updated diff (versus main) looks like this:

 html {
   background-color: #d8dde0;
   overflow-y: scroll;
-  font-family: "Frutiger W01", arial, sans-serif;
 }
 @font-face {
   font-display: swap;
@@ -87,6 +86,9 @@
   font-weight: 600;
   src: url("https://assets.nhs.uk/fonts/FrutigerLTW01-65Bold.eot?#iefix");
   src: url("https://assets.nhs.uk/fonts/FrutigerLTW01-65Bold.eot?#iefix") format("eot"), url("https://assets.nhs.uk/fonts/FrutigerLTW01-65Bold.woff2") format("woff2"), url("https://assets.nhs.uk/fonts/FrutigerLTW01-65Bold.woff") format("woff"), url("https://assets.nhs.uk/fonts/FrutigerLTW01-65Bold.ttf") format("truetype"), url("https://assets.nhs.uk/fonts/FrutigerLTW01-65Bold.svg#eae74276-dd78-47e4-9b27-dac81c3411ca") format("svg");
+}
+html {
+  font-family: "Frutiger W01", arial, sans-serif;
 }
 
 body {
@@ -2890,7 +2892,7 @@
   box-shadow: 0 4px 0 #263139;
 }
 .nhsuk-button--secondary:hover {
+  background-color: #445867;
-  background-color: #384853;
 }
 .nhsuk-button--secondary:focus {
   background: #ffeb3b;
@@ -2938,7 +2940,7 @@
   box-shadow: 0 4px 0 #6b140e;
 }
 .nhsuk-button--warning:hover {
+  background-color: #c02418;
-  background-color: #a82015;
 }
 .nhsuk-button--warning:focus {
   background: #ffeb3b;

[colinrotherham]

I've reverted the colour changes until darken() is supported by color.adjust() in Sass 1.79.0

That leaves this as the diff output:

 html {
   background-color: #d8dde0;
   overflow-y: scroll;
-  font-family: "Frutiger W01", arial, sans-serif;
 }
 @font-face {
   font-display: swap;
@@ -87,6 +86,9 @@
   font-weight: 600;
   src: url("https://assets.nhs.uk/fonts/FrutigerLTW01-65Bold.eot?#iefix");
   src: url("https://assets.nhs.uk/fonts/FrutigerLTW01-65Bold.eot?#iefix") format("eot"), url("https://assets.nhs.uk/fonts/FrutigerLTW01-65Bold.woff2") format("woff2"), url("https://assets.nhs.uk/fonts/FrutigerLTW01-65Bold.woff") format("woff"), url("https://assets.nhs.uk/fonts/FrutigerLTW01-65Bold.ttf") format("truetype"), url("https://assets.nhs.uk/fonts/FrutigerLTW01-65Bold.svg#eae74276-dd78-47e4-9b27-dac81c3411ca") format("svg");
+}
+html {
+  font-family: "Frutiger W01", arial, sans-serif;
 }
 
 body {

[colinrotherham]

🙌

[colinrotherham]

Fixed the conflicts and approved again 🙌

I've added a suite of Sass version tests

Just to make sure we get an early warning when the latest Sass version breaks our code, but also maintaining Sass 1.77.6 as our lowest “do not break this” version

Nicely it flagged a few more deprecated globals fixed in c67be7d

matrix:
  package-version:
    # Release without major deprecations
    - 1.77.6

    # Release with `mixed-decls` deprecated
    - 1.77.7

    # Release with `import` deprecated
    - 1.80.0

    # Dart Sass latest major version
    - latest