Support the 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.

We're planning to only support @use in the next major release of GOV.UK Frontend.

Resources

• Research on sass modules usage amongst our users (internal file)

[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.