Merge pull request #2278 from alphagov/348_Migrate-to-DartSass

348 migrate to dart sass

.gitignore

@@ -12,12 +12,15 @@ coverage
 test/reports
 .generators
 .rakeTasks
+/app/assets/builds/*
+!/app/assets/builds/.keep
 
 *.daemonette-dump
 data/local_interactions.csv
 config/initializers/dev_*.rb
 reports/*
 .byebug_history
+
 # Local transactions import reports
 removed_ghosts*.csv
 ghosts*.csv

Gemfile

@@ -5,6 +5,7 @@ gem "rails", "7.0.8.3"
 gem "aws-sdk-s3", "~> 1"
 gem "bootsnap", require: false
 gem "bootstrap-kaminari-views"
+gem "dartsass-rails"
 gem "diffy"
 gem "erb_lint"
 gem "erubis"
@@ -34,7 +35,6 @@ gem "null_logger"
 gem "plek"
 gem "rails_autolink"
 gem "rest-client", require: false
-gem "sassc-rails"
 gem "select2-rails", "~> 3.5.9" # Updating this will mean updating the styling as 4 & > have a new approach to class names.
 gem "sentry-sidekiq"
 gem "sprockets-rails"

Gemfile.lock

@@ -142,6 +142,9 @@ GEM
       bigdecimal
       rexml
     crass (1.0.6)
+    dartsass-rails (0.5.1)
+      railties (>= 6.0.0)
+      sass-embedded (~> 1.63)
     database_cleaner-core (2.0.1)
     database_cleaner-mongoid (2.0.1)
       database_cleaner-core (~> 2.0.0)
@@ -723,14 +726,17 @@ GEM
     sanitize (6.1.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
+    sass-embedded (1.77.8)
+      google-protobuf (~> 4.26)
+      rake (>= 13)
+    sass-embedded (1.77.8-aarch64-linux-gnu)
+      google-protobuf (~> 4.26)
+    sass-embedded (1.77.8-arm64-darwin)
+      google-protobuf (~> 4.26)
+    sass-embedded (1.77.8-x86_64-linux-gnu)
+      google-protobuf (~> 4.26)
     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
     select2-rails (3.5.11)
     selenium-webdriver (4.21.1)
       base64 (~> 0.2)
@@ -792,7 +798,6 @@ GEM
     terser (1.2.3)
       execjs (>= 0.3.0, < 3)
     thor (1.3.1)
-    tilt (2.0.10)
     timecop (0.9.10)
     timeout (0.4.1)
     tzinfo (2.0.6)
@@ -832,6 +837,7 @@ DEPENDENCIES
   capybara-select-2
   ci_reporter_minitest
   climate_control
+  dartsass-rails
   database_cleaner-mongoid
   diffy
   erb_lint
@@ -873,7 +879,6 @@ DEPENDENCIES
   rails_autolink
   rest-client
   rubocop-govuk
-  sassc-rails
   select2-rails (~> 3.5.9)
   sentry-sidekiq
   shoulda

Procfile.dev

@@ -0,0 +1,3 @@
+web: bin/rails server -p 3000
+css: bin/rails dartsass:watch
+worker: bundle exec sidekiq -C ./config/sidekiq.yml

app/assets/config/manifest.js

@@ -1,7 +1,5 @@
 //= link_tree ../images
 //= link application.js
-//= link application.css
-
 //= link legacy-application.js
-//= link legacy-application.css
 //= link es6-components.js
+//= link_tree ../builds

app/assets/stylesheets/legacy-application.scss

@@ -22,3 +22,10 @@
 
 // GOVUK Design System
 @import "govuk_publishing_components/all_components";
+
+// Include glyphicons - still required in legacy styles but cannot be loaded from Bootstrap via Dart Sass
+@font-face {
+  font-family: "Glyphicons Halflings";
+  src: url("bootstrap/glyphicons-halflings-regular.eot");
+  src: url("bootstrap/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"),url("bootstrap/glyphicons-halflings-regular.woff2") format("woff2"),url("bootstrap/glyphicons-halflings-regular.woff") format("woff"),url("bootstrap/glyphicons-halflings-regular.ttf") format("truetype"),url("bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg")
+}

app/assets/stylesheets/sortable_table.scss

@@ -21,20 +21,20 @@
 }
 
 th .sortable {
-  background-image: image-url("bg.gif");
+  background-image: url("bg.gif");
   cursor: pointer;
   background-repeat: no-repeat;
   background-position: center right;
   padding-right: 20px;
 }
 
 th .asc {
-  background-image: image-url("asc.gif");
+  background-image: url("asc.gif");
   background-color: #dddddd;
 }
 
 th .desc {
-  background-image: image-url("desc.gif");
+  background-image: url("desc.gif");
   background-color: #dddddd;
 }
 

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

@@ -69,7 +69,8 @@
 
   # Asset digests allow you to set far-future HTTP expiration dates on all assets,
   # yet still be able to expire them through the digest params.
-  config.assets.digest = true
+  # Set to false to see the latest stylesheet changes if running Sass in watch mode
+  config.assets.digest = false
 
   # Suppress logger output for asset requests.
   config.assets.quiet = true

config/environments/production.rb

@@ -36,9 +36,6 @@
   # Generate digests for assets URLs.
   config.assets.digest = true
 
-  # Rather than use a CSS compressor, use the SASS style to perform compression.
-  config.sass.style = :compressed
-  config.sass.line_comments = false
   # Enable serving of images, stylesheets, and JavaScripts from an asset server.
   # config.asset_host = "http://assets.example.com"
 

config/initializers/dartsass.rb

@@ -0,0 +1,8 @@
+APP_STYLESHEETS = {
+  "application.scss" => "application.css",
+  "legacy-application.scss" => "legacy-application.css",
+}.freeze
+
+all_stylesheets = APP_STYLESHEETS.merge(GovukPublishingComponents::Config.all_stylesheets)
+Rails.application.config.dartsass.builds = all_stylesheets
+Rails.application.config.dartsass.build_options << " --quiet-deps"