Migrate from sassc to modern CSS compilation

.github/workflows/a11y.yml

@@ -34,8 +34,17 @@ jobs:
       with:
         ruby-version: .tool-versions
         bundler-cache: true
+    - name: Set up Node
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20'
+        cache: npm
+    - name: Install npm packages
+      run: npm ci --omit=dev
     - name: Set up Database
       run: bundle exec rails db:setup
+    - name: Build CSS
+      run: bundle exec rails dartsass:build
     - name: Create separate Chrome data directories
       run: |
         mkdir -p /tmp/chrome-data-rspec

.github/workflows/cucumber.yml

@@ -37,12 +37,21 @@ jobs:
       with:
         ruby-version: .tool-versions
         bundler-cache: true
+    - name: Set up Node
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20'
+        cache: npm
+    - name: Install npm packages
+      run: npm ci --omit=dev
     - name: Install Chrome and ChromeDriver
       uses: browser-actions/setup-chrome@v1
       with:
         chrome-version: stable
     - name: Setup Database
       run: bundle exec rails db:setup
+    - name: Build CSS
+      run: bundle exec rails dartsass:build
     - name: Create Chrome data directory
       run: mkdir -p /tmp/chrome-data-cucumber
     - name: Run non-JavaScript Cucumber tests

.github/workflows/rspec.yml

@@ -37,9 +37,18 @@ jobs:
       with:
         ruby-version: .tool-versions
         bundler-cache: true
+    - name: Set up Node
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20'
+        cache: npm
+    - name: Install npm packages
+      run: npm ci --omit=dev
     - name: Setup Database
       run: |
         bundle exec rails db:test:prepare
+    - name: Build CSS
+      run: bundle exec rails dartsass:build
     - name: Create Chrome data directory
       run: mkdir -p /tmp/chrome-data-rspec
     - name: Run RSpec Tests

.gitignore

@@ -66,6 +66,10 @@ node_modules/
 /public/packs-test
 /public/assets
 
+# Dart Sass build output (app/assets/builds/application.css)
+/app/assets/builds/*
+!/app/assets/builds/.keep
+
 # Ignore yarn files
 /yarn-error.log
 yarn-debug.log*

Dockerfile

@@ -17,9 +17,12 @@ ENV RAILS_ENV="production" \
 # Throw-away build stage to reduce size of final image
 FROM base as build
 
-# Install packages needed to build gems
+# Install packages needed to build gems. nodejs/npm are here for the DataTables
+# stylesheets only: application.scss @imports them out of node_modules, so they
+# have to be installed before assets:precompile. This is a build-stage-only
+# dependency -- the runtime image below carries no Node.
 RUN apt-get update -qq && \
-    apt-get install --no-install-recommends -y build-essential git libvips pkg-config
+    apt-get install --no-install-recommends -y build-essential git libvips pkg-config nodejs npm
 
 # Install application gems
 COPY Gemfile Gemfile.lock ./
@@ -30,6 +33,12 @@ RUN bundle install && \
 # Copy application code
 COPY . .
 
+# Install the npm packages that supply the DataTables stylesheets. --omit=dev
+# skips the documentation tooling the image does not need. This runs after
+# COPY so that npm ci (which wipes node_modules first) also clears out any
+# node_modules that came along in the build context.
+RUN npm ci --omit=dev
+
 # Precompile bootsnap code for faster boot times
 RUN bundle exec bootsnap precompile app/ lib/
 

Gemfile

@@ -81,8 +81,9 @@ gem 'hypershield'
 gem 'good_job', '~> 4.19'
 
 #### Frontend related tools
-# The original asset pipeline for Rails [https://github.com/rails/sprockets-rails]
-gem 'sprockets-rails'
+# Rails 8's default asset pipeline: digests and serves what's on disk, and does
+# no compiling of its own [https://github.com/rails/propshaft]
+gem 'propshaft'
 
 # Use JavaScript with ESM import maps [https://github.com/rails/importmap-rails]
 gem 'importmap-rails'
@@ -91,10 +92,15 @@ gem 'importmap-rails'
 gem 'turbo-rails'
 
 gem 'bootstrap', '~> 5.3.8'
-# dependency for bootstrap # 03-10-2025 this is deprecated but still works
-gem 'sassc-rails', '~> 2.1'
-# alternative to sassc-rails, this is recommended but bootstrap 5.3.3 is still using "deprecated" @import statements which this gem doesn't like
-# gem 'dartsass-sprockets'
+# Compiles app/assets/stylesheets/application.scss to app/assets/builds with
+# Dart Sass (the only Sass implementation still maintained), which Propshaft
+# then digests and serves. Replaces sassc-rails, deprecated along with its
+# LibSass backend.
+#
+# Bootstrap 5.3 still uses `@import`, which Dart Sass deprecated; those warnings
+# are silenced in config/initializers/dartsass.rb. Bootstrap 6 moves to `@use`,
+# at which point the silencing can go away.
+gem 'dartsass-rails', '~> 0.5'
 
 # Font Awesome for icons
 gem 'font-awesome-sass'