Merge pull request #1414 from alphagov/migrate-to-dart-sass

Migrate from libsass to dart-sass

.gitignore

@@ -29,3 +29,7 @@
 /yarn-error.log
 
 /public/assets
+
+# dartsass-rails
+/app/assets/builds/*
+!/app/assets/builds/.keep

Gemfile

@@ -5,6 +5,7 @@ gem "rails", "7.1.3.2"
 gem "active_model_serializers"
 gem "bootsnap", require: false
 gem "chartkick"
+gem "dartsass-rails"
 gem "friendly_id"
 gem "gds-sso"
 gem "govuk_app_config"
@@ -15,9 +16,9 @@ gem "mysql2"
 gem "octicons_helper"
 gem "octokit"
 gem "plek"
-gem "sassc-rails"
 gem "sentry-sidekiq"
 gem "sprockets"
+gem "sprockets-rails"
 gem "uglifier"
 
 group :test, :development do

Gemfile.lock

@@ -117,6 +117,9 @@ GEM
       bigdecimal
       rexml
     crass (1.0.6)
+    dartsass-rails (0.5.0)
+      railties (>= 6.0.0)
+      sass-embedded (~> 1.63)
     database_cleaner (2.0.2)
       database_cleaner-active_record (>= 2, < 3)
     database_cleaner-active_record (2.1.0)
@@ -140,7 +143,6 @@ GEM
       faraday-net_http (>= 2.0, < 3.2)
     faraday-net_http (3.1.0)
       net-http
-    ffi (1.16.3)
     friendly_id (5.5.1)
       activerecord (>= 4.0.0)
     gds-api-adapters (93.0.0)
@@ -593,14 +595,9 @@ GEM
       rubocop-factory_bot (~> 2.22)
     ruby-progressbar (1.13.0)
     ruby2_keywords (0.0.5)
-    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
+    sass-embedded (1.71.1)
+      google-protobuf (~> 3.25)
+      rake (>= 13.0.0)
     sawyer (0.9.2)
       addressable (>= 2.3.5)
       faraday (>= 0.17.3, < 3)
@@ -636,7 +633,6 @@ GEM
     statsd-ruby (1.5.0)
     stringio (3.1.0)
     thor (1.3.1)
-    tilt (2.3.0)
     timecop (0.9.8)
     timeout (0.4.1)
     tzinfo (2.0.6)
@@ -674,6 +670,7 @@ DEPENDENCIES
   byebug
   capybara
   chartkick
+  dartsass-rails
   database_cleaner
   factory_bot_rails
   friendly_id
@@ -693,11 +690,11 @@ DEPENDENCIES
   rails (= 7.1.3.2)
   rails-controller-testing
   rubocop-govuk
-  sassc-rails
   sentry-sidekiq
   shoulda-context
   simplecov
   sprockets
+  sprockets-rails
   timecop
   uglifier
   webmock

Procfile.dev

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

app/assets/config/manifest.js

@@ -1,4 +1,4 @@
 //= link_tree ../images
 //= link application.js
 //= link admin.js
-//= link application.css
+//= link_tree ../builds

bin/dev

@@ -0,0 +1,6 @@
+#!/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/environments/development.rb

@@ -54,6 +54,10 @@
   # Suppress logger output for asset requests.
   config.assets.quiet = true
 
+  # Disable digest to see the latest stylesheet changes when running Sass in watch mode
+  # See https://guides.rubyonrails.org/v7.1.3/asset_pipeline.html#turning-digests-off
+  config.assets.digest = false
+
   # Raises error for missing translations.
   config.i18n.raise_on_missing_translations = true
 

config/environments/production.rb

@@ -28,10 +28,6 @@
 
   config.assets.js_compressor = :uglifier
 
-  # 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 @@
+Rails.application.config.dartsass.build_options << " --quiet-deps"