question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Migrate to Sass module system (@use)

See original GitHub issue

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:

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:1
  • Comments:6 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
querkmachinecommented, Apr 7, 2022

Apparently Dart Sass adoption is currently around 66%.

1reaction
querkmachinecommented, Mar 29, 2022

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. https://github.com/sass/sass/issues/3223#issuecomment-1002813284

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. https://github.com/sass/sass/issues/3276#issuecomment-1076789429 — The current metrics don’t appear to be publicly available at this time, however.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Migrator - Sass
This migration converts stylesheets that use the old @import rule to load dependencies so that they use the Sass module system via the...
Read more >
The New SASS Module System: Out with @import, In with @use
The new @use rule is the replacement for @import which allows other stylesheets to use its variables, functions, and mixins. What makes the...
Read more >
Migrate to use the Sass module system · Issue #5220 - GitHub
I'm working on preparing a script that uses the Sass migrator to handle most of this migration, but I have a question about...
Read more >
Introducing Sass Modules - CSS-Tricks
Sass just launched a major new feature you might recognize from other languages: a module system. This is a big step forward for...
Read more >
The Sass Module System - codeSTACKr
The heart of the Module System is the @use rule. This rule makes CSS, variables, mixins, and functions from another stylesheet accessible in...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found