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

[tblacker7]

When compiling the frontend library, @import is used extensively. We are trying to convert our own libraries to the @use method, but can't because of the dependancy on the frontend framework. This is not a massive issue, but I thought worth logging for next time anybody is playing with sass on your side.

The sass website says:

⚠️ Heads up!
The Sass team discourages the continued use of the @import rule. Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely. Prefer the @use rule instead. (Note that only Dart Sass currently supports @use. Users of other implementations must use the @import rule instead.)

What’s Wrong With @import?
The @import rule has a number of serious issues:

@import makes all variables, mixins, and functions globally accessible. This makes it very difficult for people (or tools) to tell where anything is defined.

Because everything’s global, libraries must prefix to all their members to avoid naming collisions.

@extend rules are also global, which makes it difficult to predict which style rules will be extended.

Each stylesheet is executed and its CSS emitted every time it’s @imported, which increases compilation time and produces bloated output.

There was no way to define private members or placeholder selectors that were inaccessible to downstream stylesheets.

The new module system and the @use rule address all these problems.

https://sass-lang.com/documentation/at-rules/import

[chrimesdev]

We (and anyone using the frontend library) would need to look at moving to dart-sass (currently we use node-sass and it is now recommended to switch to dart-sass) to support @use, moving to dart-sass needs to be done anyway so this will probably be done together.

https://sass-lang.com/dart-sass

[andymantell]

As mentioned in alphagov/govuk-frontend#1791, support is still quite patchy for @use and we would risk breaking many people's builds since we do not mandate a particular build chain. Once support is more widespread we could revisit.

Switching away from node-sass is worth doing though so I will open a separate ticket for this.