search

alphagov / govuk-frontend

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
https://frontend.design-system.service.gov.uk/
MIT License
1.18k stars 325 forks source link

Sass deprecation warning for slash as division #2238

Open colinrotherham opened 3 years ago

colinrotherham commented 3 years ago

Hello 👋

It's been a while since I was on govuk-frontend issues 😆

Description of the issue

We've just noticed Sass deprecation warnings popping up for latest sass@1.34.0: https://sass-lang.com/d/slash-div

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($button-shadow-size, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
35 │     padding: (govuk-spacing(2) - $govuk-border-width-form-element) govuk-spacing(2) (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2)); // s1
   │                                                                                                                                             ^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/govuk-frontend/govuk/components/button/_index.scss 35:141  @content
    node_modules/govuk-frontend/govuk/tools/_exports.scss 29:5              govuk-exports()
    node_modules/govuk-frontend/govuk/components/button/_index.scss 1:1     @import
    node_modules/govuk-frontend/govuk/components/_all.scss 6:9              @import
    node_modules/govuk-frontend/govuk/all.scss 6:9                          @import

With the "fix" being a breaking change for older versions of Sass, we might need to look into running the Sass migrator before we import any *.scss files: https://github.com/sass/migrator#readme

Steps to reproduce the issue

Importing any GOV.UK Frontend *.scss files using / for division with sass@1.33.0 and up.

See release notes: https://github.com/sass/dart-sass/releases/tag/1.33.0

36degrees commented 3 years ago

Hey @colinrotherham, long time no see! Thanks for raising this.

This is a tricky one, as we currently support LibSass and Ruby Sass alongside Dart Sass, and math.div (as part of the wider module system) is not available in either. As such, I can't see any way to update the code to work with Dart Sass 2.0.0 (and to silence the deprecation warnings) without also removing support for compilers other than Dart Sass.

Ruby Sass has been deprecated for a while and I don't believe sees much use nowadays, but we wouldn't want to break support for LibSass without giving plenty of notice, and we'd need to treat it as a breaking change.

We've previously been aiming for the October 2022 date to move onto the module system (and drop support for LibSass and Ruby Sass in the process) but if this sort of thing keeps happening we may have to bring that forward… I don't suppose anyone's been able to find any sort of timeline for Dart Sass 2.0.0's release?

Related, we should probably migrate to using Dart Sass as our 'primary' compiler so that we spot these sorts of things a bit earlier. I'll create an issue for that.

There's also a relevant discussion over on Twitter Bootstrap that's worth a read: https://github.com/twbs/bootstrap/issues/34051

36degrees commented 3 years ago

@lfdebrux has pointed out that Dart Sass 1.34.0 makes it possible to silence warnings from dependent stylesheets with a new --quiet-deps flag, which may help in the short to medium term.

colinrotherham commented 3 years ago

Thanks @36degrees, yeah I couldn't think of a non-breaking fix either 😬

Cheers for spotting that flag though!

36degrees commented 3 years ago

Worth noting that Bootstrap have ended up introducing their own custom divide Sass function (and replacing e.g. / 2 with * 0.5 where appropriate) to avoid this issue – see https://github.com/twbs/bootstrap/pull/34245 and https://github.com/twbs/bootstrap/pull/34386

philsherry commented 1 month ago

Checking in from 2024, where deprecation warnings are still scrolling like US sitcom credits.

Did anything become of the “October 2022 date” that was mentioned above? @36degrees

romaricpascal commented 1 month ago

Hi Phil, we're unfortunately still supporting LibSass and Ruby Sass at the minute, so are stuck with those / for division and the best we can offer is to use the quiet-deps flag when compiling.

We discourage the use of these compilers, but before pulling the plug, we first need to review if there's not any major project stuck on those.

Thanks for your patience.