Merge pull request #1661 from alphagov/dart-sass

Dart sass
alphagov · Aug 12, 2024 · 4f1bd43 · 4f1bd43
2 parents c298769 + 9d6ab06
commit 4f1bd43
Show file tree

Hide file tree

Showing 12 changed files with 46 additions and 17 deletions.
diff --git a/.gitignore b/.gitignore
@@ -35,6 +35,8 @@
 
 # Ignore compiled assets
 /public/assets
+/app/assets/builds/*
+!/app/assets/builds/.keep
 
 # https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
 .yarn/*

diff --git a/Gemfile b/Gemfile
@@ -7,6 +7,7 @@ gem "activerecord-session_store"
 gem "acts-as-taggable-on"
 gem "aws-sdk-s3"
 gem "bootsnap", require: false
+gem "dartsass-rails"
 gem "gds-api-adapters"
 gem "gds-sso"
 gem "google-api-client"
@@ -28,7 +29,6 @@ gem "sentry-sidekiq"
 gem "whenever"
 
 gem "sass"
-gem "sass-rails"
 gem "sprockets"
 gem "terser"
 

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -165,6 +165,9 @@ GEM
       cucumber (>= 5, < 10)
       railties (>= 5.2, < 8)
     cucumber-tag-expressions (4.1.0)
+    dartsass-rails (0.5.1)
+      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)
@@ -747,19 +750,20 @@ GEM
     rubyzip (2.3.2)
     sass (3.7.4)
       sass-listen (~> 4.0.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)
     sass-listen (4.0.0)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
-    sass-rails (6.0.0)
-      sassc-rails (~> 2.1, >= 2.1.1)
     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)
@@ -810,7 +814,6 @@ GEM
     terser (1.2.3)
       execjs (>= 0.3.0, < 3)
     thor (1.3.1)
-    tilt (2.3.0)
     timecop (0.9.10)
     timeout (0.4.1)
     trailblazer-option (0.1.2)
@@ -858,6 +861,7 @@ DEPENDENCIES
   bootsnap
   capybara-select-2
   cucumber-rails
+  dartsass-rails
   database_cleaner
   factory_bot_rails
   gds-api-adapters
@@ -884,7 +888,6 @@ DEPENDENCIES
   rspec-rails
   rubocop-govuk
   sass
-  sass-rails
   select2-rails (~> 3.5.11)
   sentry-sidekiq
   shoulda-matchers

diff --git a/Procfile.dev b/Procfile.dev
@@ -0,0 +1,2 @@
+web: bin/rails server -p 3000
+css: bin/rails dartsass:watch
diff --git a/app/assets/builds/.keep b/app/assets/builds/.keep
diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js
@@ -1,7 +1,6 @@
 //= link_tree ../images
-//= link application.css
-//= link legacy_layout.css
 //= link application.js
 //= link es6-components.js
 //= link legacy_layout.js
 //= link html5.js
+//= link_tree ../builds
diff --git a/app/assets/stylesheets/legacy_layout.scss b/app/assets/stylesheets/legacy_layout.scss
@@ -23,3 +23,9 @@
 @import "legacy/style";
 @import "legacy/versions";
 @import "legacy/glossary";
+
+@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")
+}
diff --git a/bin/dev b/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 "$@"
diff --git a/config/application.rb b/config/application.rb
@@ -13,6 +13,7 @@
 require "action_view/railtie"
 # require "action_cable/engine"
 require "rails/test_unit/railtie"
+require "sprockets/railtie"
 
 # Require the gems listed in Gemfile, including any gems
 # you've limited to :test, :development, or :production.

diff --git a/config/environments/development.rb b/config/environments/development.rb
@@ -54,6 +54,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
 

diff --git a/config/environments/production.rb b/config/environments/production.rb
@@ -78,10 +78,6 @@
   # Do not dump schema after migrations.
   config.active_record.dump_schema_after_migration = false
 
-  # Rather than use a CSS compressor, use the SASS style to perform compression
-  config.sass.style = :compressed
-  config.sass.line_comments = false
-
   # Enable DNS rebinding protection and other `Host` header attacks.
   # config.hosts = [
   #   "example.com",     # Allow requests from example.com

diff --git a/config/initializers/dartsass.rb b/config/initializers/dartsass.rb
@@ -0,0 +1,9 @@
+APP_STYLESHEETS = {
+  "application.scss" => "application.css",
+  "legacy_layout.scss" => "legacy_layout.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"