Migrate to Dart Sass from LibSass

[jon-kirwan]

What

Migrate to Dart Sass from LibSass.

Why

• LibSass is now deprecated
• Making changes ahead of Design System team dropping support for LibSass Dropping support for Ruby Sass and LibSass govuk-frontend#2632.

Visual Changes

None.

How can I test these changes?

• run yarn jasmine:prepare (or run bundle exec rake app:assets:clobber app:assets:precompile)
• what should happen? The Sass files should be compiled. Keep an eye on the command line for warnings indicating the compilation process using Dart Sass

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div(300%, 4) or calc(300% / 4)
More info and automated migrator: https://sass-lang.com/d/slash-div
   │
26 │   three-quarters: (300% / 4),
   │                    ^^^^^^^^
   ...

• the /builds folder: app/assets/builds should now be populated with CSS files. Note, the
• subsequently, all assets ought to be generated successfully within the /public directory
• no test failures to indicate the correct number of stylesheets are generated
• deploy to Integration. You'll notice that in the 'build and publish image' task, the steps taken resemble those mentioned earlier, dartsass-rails is bundled and any Dart Sass warnings encountered during the compilation process are reported)
• inspect several pages, e.g. homepage, UK bank holidays, register to vote, contact DVLA to ensure the absence of errors.

Anything else

Once the PR gets the green light, any temporary commits and references to local gems e.g. gem "govuk_publishing_components", path: "../govuk_publishing_components" will be removed.

See:

• Migrate to Dart Sass from LibSass collections#3447
• Migrate to Dart Sass from LibSass govuk_publishing_components#3726
• Migrate to Dart Sass from LibSass static#3190
• Migrate to Dart Sass from LibSass govuk-developer-docs#4216.

[1pretz1]

Nice work @jon-kirwan. I've tested locally using live data and integration and everything builds correctly / app runs as normal. Looks like the linter has failed, however it is an easy fix.

Also noted the deprecation warnings (Using / for division outside of calc()), however I understand that we cant fix them without breaking the LibSass implementation in the components Gem. Hopefully we (GOV.UK) can migrate to Dart Sass fully before 2.0 is released and squash the warnings.

[jon-kirwan]

Nice work @jon-kirwan. I've tested locally using live data and integration and everything builds correctly / app runs as normal. Looks like the linter has failed, however it is an easy fix.

Also noted the deprecation warnings (Using / for division outside of calc()), however I understand that we cant fix them without breaking the LibSass implementation in the components Gem. Hopefully we (GOV.UK) can migrate to Dart Sass fully before 2.0 is released and squash the warnings.

Thanks @1pretz1. I've resolved the linter error, and all CI checks are now passing.

Currently, the linter warnings are from GOV.UK Publishing Components, and I've opened an issue to investigate. We also had warnings from the Design System, but have silenced those with this change:

frontend/config/initializers/dartsass.rb

Line 22 in d56a877

Rails.application.config.dartsass.build_options << " --quiet-deps"