Migrate to Dart Sass from LibSass

.gitignore

@@ -17,6 +17,8 @@
 /yarn-error.log
 
 /public/assets
+/app/assets/builds/*
+!/app/assets/builds/.keep
 
 # pact reports
 /spec/reports

Gemfile

@@ -6,18 +6,18 @@ gem "rails", "7.1.1"
 
 gem "bootsnap", require: false
 gem "dalli"
+gem "dartsass-rails"
 gem "faraday"
 gem "gds-api-adapters"
 gem "govspeak"
 gem "govuk_ab_testing"
 gem "govuk_app_config"
 gem "govuk_document_types"
-gem "govuk_publishing_components"
+gem "govuk_publishing_components", git: "https://github.com/alphagov/govuk_publishing_components.git", branch: "dart-sass-test"
 gem "plek"
 gem "rails-i18n"
 gem "rails_translation_manager"
 gem "rinku", require: "rails_rinku"
-gem "sassc-rails"
 gem "slimmer"
 gem "sprockets-rails"
 gem "uglifier"

Gemfile.lock

@@ -1,3 +1,18 @@
+GIT
+  remote: https://github.com/alphagov/govuk_publishing_components.git
+  revision: 08b6658c340a24c7aff8ca97099b2f68b503c736
+  branch: dart-sass-test
+  specs:
+    govuk_publishing_components (35.21.2)
+      govuk_app_config
+      govuk_personalisation (>= 0.7.0)
+      kramdown
+      plek
+      rails (>= 6)
+      rouge
+      sprockets (>= 3)
+      sprockets-rails
+
 GEM
   remote: https://rubygems.org/
   specs:
@@ -107,6 +122,7 @@ GEM
       rack-test (>= 0.6.3)
       regexp_parser (>= 1.5, < 3.0)
       xpath (~> 3.2)
+    childprocess (4.1.0)
     climate_control (1.2.0)
     coderay (1.1.3)
     concurrent-ruby (1.2.2)
@@ -148,6 +164,9 @@ GEM
       webrick (~> 1.7)
     cucumber-tag-expressions (4.1.0)
     dalli (3.2.6)
+    dartsass-rails (0.5.0)
+      railties (>= 6.0.0)
+      sass-embedded (~> 1.63)
     date (3.3.3)
     debug_inspector (1.1.0)
     diff-lcs (1.5.0)
@@ -214,14 +233,6 @@ GEM
     govuk_personalisation (0.15.0)
       plek (>= 1.9.0)
       rails (>= 6, < 8)
-    govuk_publishing_components (35.19.0)
-      govuk_app_config
-      govuk_personalisation (>= 0.7.0)
-      kramdown
-      plek
-      rails (>= 6)
-      rouge
-      sprockets (>= 3)
     govuk_schemas (4.7.0)
       json-schema (>= 2.8, < 4.2)
     govuk_test (4.0.1)
@@ -676,15 +687,11 @@ GEM
     sanitize (6.1.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
-    sassc (2.4.0)
-      ffi (~> 1.9)
-    sassc-rails (2.1.2)
-      railties (>= 4.0.0)
-      sassc (>= 2.0)
-      sprockets (> 3.0)
-      sprockets-rails
-      tilt
-    selenium-webdriver (4.14.0)
+    sass-embedded (1.66.1)
+      google-protobuf (~> 3.23)
+      rake (>= 13.0.0)
+    selenium-webdriver (4.4.0)
+      childprocess (>= 0.5, < 5.0)
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 3.0)
       websocket (~> 1.0)
@@ -726,8 +733,7 @@ GEM
       tins (~> 1.0)
     terminal-table (3.0.2)
       unicode-display_width (>= 1.1.1, < 3)
-    thor (1.3.0)
-    tilt (2.0.11)
+    thor (1.2.2)
     timecop (0.9.8)
     timeout (0.4.0)
     tins (1.32.1)
@@ -766,14 +772,15 @@ DEPENDENCIES
   climate_control
   cucumber-rails
   dalli
+  dartsass-rails
   erb_lint
   faraday
   gds-api-adapters
   govspeak
   govuk_ab_testing
   govuk_app_config
   govuk_document_types
-  govuk_publishing_components
+  govuk_publishing_components!
   govuk_schemas
   govuk_test
   i18n-coverage
@@ -789,7 +796,6 @@ DEPENDENCIES
   rinku
   rspec-rails
   rubocop-govuk
-  sassc-rails
   simplecov
   simplecov-rcov
   slimmer

Procfile.dev

@@ -0,0 +1,2 @@
+web: bin/rails server -p 3070
+css: bin/rails dartsass:watch

app/assets/config/manifest.js

@@ -2,17 +2,4 @@
 //= link application.js
 //= link test-dependencies.js
 
-//= link components/_taxon-list.css
-//= link components/_topic-list.css
-
-//= link views/_browse.css
-//= link views/_bunting.css
-//= link views/_covid.css
-//= link views/_history_people.css
-//= link views/_ministers.css
-//= link views/_organisation.css
-//= link views/_organisations.css
-//= link views/_taxons.css
-//= link views/_topical_events.css
-//= link views/_topics.css
-//= link views/_world_index.css
+//= link_tree ../builds

app/assets/stylesheets/views/_bunting.scss

@@ -18,7 +18,7 @@
 }
 
 .app-bunting__triangles {
-  background-image: image-url("topical-events/bunting-grey-string.svg");
+  background-image: url("topical-events/bunting-grey-string.svg");
   background-color: transparent;
   background-repeat: repeat-x;
   background-position: center center;

app/assets/stylesheets/views/_organisation.scss

@@ -66,7 +66,7 @@
 .organisation__no10-banner {
   @include govuk-font(19);
   padding-top: 140px;
-  background-image: image-url("prime-ministers-office-header.jpg");
+  background-image: url("prime-ministers-office-header.jpg");
   background-repeat: no-repeat;
   background-position: 50% 0;
   text-align: center;

app/assets/stylesheets/views/_topical_events.scss

@@ -34,59 +34,59 @@
       }
 
       &.arts-council-england a {
-        background-image: image-url("topical-events/arts-council-england.png");
+        background-image: url("topical-events/arts-council-england.png");
         width: 217px;
       }
 
       &.bbc a {
-        background-image: image-url("topical-events/bbc.png");
+        background-image: url("topical-events/bbc.png");
         width: 143px;
       }
 
       &.british-library a {
-        background-image: image-url("topical-events/british-library.png");
+        background-image: url("topical-events/british-library.png");
         width: 30px;
       }
 
       &.commonwealth-war-graves-commission a {
-        background-image: image-url("topical-events/cwgc.png");
+        background-image: url("topical-events/cwgc.png");
         width: 209px;
       }
 
       &.heritage-lottery-fund a {
-        background-image: image-url("topical-events/hlf.png");
+        background-image: url("topical-events/hlf.png");
         width: 74px;
       }
 
       &.historic-england a {
-        background-image: image-url("topical-events/historic-england.png");
+        background-image: url("topical-events/historic-england.png");
         width: 242px;
       }
 
       &.imperial-war-museums a {
-        background-image: image-url("topical-events/iwm.png");
+        background-image: url("topical-events/iwm.png");
         width: 80px;
       }
 
       &.war-memorials-trust a {
-        background-image: image-url("topical-events/wmt.png");
+        background-image: url("topical-events/wmt.png");
         width: 103px;
       }
 
       &.birmingham_2022_commonwealth_games a {
-        background-image: image-url("topical-events/birmingham_2022.png");
+        background-image: url("topical-events/birmingham_2022.png");
         width: 120px;
         height: 120px;
       }
 
       &.queens_platinum_jubilee a {
-        background-image: image-url("topical-events/platinum_jubilee.png");
+        background-image: url("topical-events/platinum_jubilee.png");
         width: 120px;
         height: 120px;
       }
 
       &.unboxed a {
-        background-image: image-url("topical-events/unboxed.png");
+        background-image: url("topical-events/unboxed.png");
         width: 250px;
         height: 120px;
       }

bin/dev

@@ -0,0 +1,8 @@
+#!/usr/bin/env sh
+
+if ! gem list foreman -i --silent; then
+  echo "Installing foreman..."
+  gem install foreman
+fi
+
+exec foreman start -f Procfile.dev "$@"

config/application.rb

@@ -120,7 +120,5 @@ class Application < Rails::Application
     # to use CSS that has same function names as SCSS such as max.
     # https://github.com/alphagov/govuk-frontend/issues/1350
     config.assets.css_compressor = nil
-
-    config.assets.precompile << get_component_css_paths
   end
 end

config/environments/development.rb

@@ -50,6 +50,9 @@
   # Suppress logger output for asset requests.
   config.assets.quiet = true
 
+  # To see the latest stylesheet changes, if running Sass in watch mode.
+  config.assets.digest = false
+
   # Raises error for missing translations.
   config.i18n.raise_on_missing_translations = true
 

config/environments/production.rb

@@ -27,13 +27,6 @@
   # Compress JavaScript.
   config.assets.js_compressor = :uglifier
 
-  # Compress CSS using a preprocessor.
-  # config.assets.css_compressor = :sass
-
-  # Rather than use a CSS compressor, use the SASS style to perform compression.
-  config.sass.style = :compressed
-  config.sass.line_comments = false
-
   # Do not fallback to assets pipeline if a precompiled asset is missed.
   config.assets.compile = false
 

config/initializers/dartsass.rb

@@ -0,0 +1,19 @@
+# config/initializers/dartsass.rb
+app_stylesheets = {
+  "components/_taxon-list.scss" => "components/_taxon-list.css",
+  "components/_topic-list.scss" => "components/_topic-list.css",
+  "views/_browse.scss" => "views/_browse.css",
+  "views/_bunting.scss" => "views/_bunting.css",
+  "views/_covid.scss" => "views/_covid.css",
+  "views/_history_people.scss" => "views/_history_people.css",
+  "views/_ministers.scss" => "views/_ministers.css",
+  "views/_organisation.scss" => "views/_organisation.css",
+  "views/_organisations.scss" => "views/_organisations.css",
+  "views/_taxons.scss" => "views/_taxons.css",
+  "views/_topical_events.scss" => "views/_topical_events.css",
+  "views/_topics.scss" => "views/_topics.css",
+  "views/_world_index.scss" => "views/_world_index.css",
+}
+
+all_stylesheets = app_stylesheets.merge(GovukPublishingComponents::Config.all_assets)
+Rails.application.config.dartsass.builds = all_stylesheets

startup.sh

@@ -9,7 +9,7 @@ if [[ $1 == "--live" ]] ; then
   PLEK_SERVICE_CONTENT_STORE_URI=${PLEK_SERVICE_CONTENT_STORE_URI-https://www.gov.uk/api} \
   PLEK_SERVICE_STATIC_URI=${PLEK_SERVICE_STATIC_URI-https://assets.publishing.service.gov.uk} \
   PLEK_SERVICE_SEARCH_API_URI=${PLEK_SERVICE_SEARCH_API_URI-https://www.gov.uk/api} \
-  bundle exec rails s -p 3070
+  ./bin/dev
 else
   echo "ERROR: other startup modes are not supported"
   echo ""