Migrate to Sass module system (@use)

[36degrees]

What

Update GOV.UK Frontend to use the new @use syntax internally to import dependencies, and to be consumed using @use.

Why

The Sass module system has been introduced, aiming to address some of the issues with the @import rule.

The @import rule, and most global functions will eventually be deprecated, and then removed from Sass.

Moving to @use will allow us to revisit and simplify the way that GOV.UK Frontend is implemented, without the limitations of @import – for example namespacing, and the govuk-exports mixin.

Depends on

Stable support for @uses in LibSass – which probably means a stable version with support having been out for 3-6 months.

(The 'future plans' section of the module system blog post sets a hard limit of October 2021 for deprecating @import, which we could also do, but we'd need to have a better understanding of the impact it'll have on our users.)

Further detail

We would only support compilation using Dart Sass.

We would drop support for the other compilers, which are deprecated and will not be updated to use the new module system:

• Ruby Sass, deprecated as of 26 March 2019
• LibSass, deprecated as of 5 Aug 2020

[36degrees]

It looks as though LibSass is now being deprecated:
sass/libsass#3123

[36degrees]

The beta of 2.10.0 of the US Web Design System migrates to the module system:

https://designsystem.digital.gov/about/releases/#version-2100-beta-0

[thisisdano]

From the USWDS side, we're finding that the modules support is very patchy — perhaps too patchy to support in the near term. When we can control the compile chain, we can feel confident using modules, but we have a lot of project users that compile using, say, the built-in compiler in Jekyll, and this cannot parse modules at all. What I believe we've found — though this is not yet final — is that while we intend to move to modules when we can, we may strip this functionality from the beta and go as far as we can using the old syntax, waiting to fully move to modules if and when we find better overall support.

[36degrees]

Ah that's really helpful to know @thisisdano – thanks so much for taking the time to pass on your findings 🙏🏻 I think we are still a fair way of actually being able to migrate for similar reasons.

[querkmachine]

I've been digging around the Sass repos for new information on when @import is going to be deprecated or removed, given there hasn't been any official update that the date was changed from October 2021.

The comment here (December 2021) seems to imply that the deprecation did not take place due to the ecosystem not migrating to Dart Sass as quickly as anticipated, with no new date being set for it to take place. sass/sass#3223 (comment)

This follow up I've asked indicates that they consider 70–80% adoption of Dart Sass to be the threshold for them to start the deprecation process. sass/sass#3276 (comment) — The current metrics don't appear to be publicly available at this time, however.

[querkmachine]

Apparently Dart Sass adoption is currently around 66%.

[36degrees]

Sass' 'The Module System is Launched' blog post was amended in July 2022 with this update:

In light of the fact that LibSass was deprecated before ever adding support for the new module system, the timeline for deprecating and removing @import has been pushed back. We now intend to wait until 80% of users are using Dart Sass (measured by npm downloads) before deprecating @import, and wait at least a year after that and likely more before removing it entirely.

Looking at download stats we're getting very close to that 80% mark (79.5% or 79.64% if you also include downloads of sass-embedded), so we could see @import deprecated soon. However, we'll still have at least a year before it's removed entirely.

[querkmachine]

Dart Sass adoption is, as of today, at around 83.96%.

It looks like the Sass team have started preparing to deprecate @import, but on a slower trajectory than was originally described on the original blog post. sass/sass#3513

[querkmachine]

It has now been specified that @import will be deprecated before the end of 2024 in conjunction with prior to the release of Dart Sass 2.0.0. You can see progress on that in the milestone. https://github.com/sass/dart-sass/milestone/3

Edit: It's now been stated that the official deprecation is likely to happen in the next few weeks.

[romaricpascal]

It's now been stated that the official deprecation is likely to happen in the next few weeks.

'Next few weeks' have turned into months, but the deprecation has finally happened in Sass 1.80.