Chore: Switch from Sprockets to Propshaft (#4730)

Because:
- It is set to become the default asset pipeline library in Rails 8
- Now that css-bundling and js-bundling are fully handling our css and
JS, we can switch to Propshaft.

This commit:
- Moves inline_svg down the Gemfile - there is an issue with load
dependency and propshaft. The issue is linked in the Gemfile, we should
be able to put it back to where it was once resolved.
- Prefix `/` to any URls in CSS files. This is a requirement for
Propshaft.
- Add The listener gem and use it to watch for file changes.
  - Local requests were very slow without it
- This is [documented in the Propshaft
Readme](https://github.com/rails/propshaft?tab=readme-ov-file#improving-performance-in-development)

Gemfile

@@ -21,7 +21,6 @@ gem 'flipper-active_record', '~> 1.2'
 gem 'flipper-ui', '~> 1.3'
 gem 'friendly_id', '~> 5.5'
 gem 'github_webhook', '~> 1.4'
-gem 'inline_svg', '~> 1.9'
 gem 'jsbundling-rails', '~> 1.3'
 gem 'kramdown', '~> 2.4'
 gem 'kramdown-parser-gfm'
@@ -33,6 +32,7 @@ gem 'omniauth-google-oauth2', '~> 1.1.1'
 gem 'omniauth-rails_csrf_protection', '~> 1.0'
 gem 'pagy', '~> 6.2'
 gem 'pg', '~> 1.5'
+gem 'propshaft', '~> 0.9'
 gem 'public_activity', '~> 3.0'
 gem 'puma', '~> 6.4'
 gem 'rack-attack', '~> 6.7'
@@ -46,13 +46,16 @@ gem 'sentry-ruby', '~> 5.17'
 gem 'sentry-sidekiq', '~> 5.18'
 gem 'sidekiq', '~> 7.2'
 gem 'sidekiq-cron', '~> 1.12'
-gem 'sprockets-rails', '~> 3.5'
 gem 'stimulus-rails', '~> 1.3'
 gem 'turbo-rails', '~> 2.0'
 gem 'view_component', '~> 3.12'
 
+# https://github.com/jamesmartin/inline_svg/issues/151
+gem 'inline_svg', '~> 1.9'
+
 group :development do
   gem 'letter_opener', '~> 1.8'
+  gem 'listen', '~> 3.9'
   gem 'lookbook', '~> 2.2.1'
   gem 'rack-mini-profiler'
   gem 'rubocop', '~> 1.61', require: false

Gemfile.lock

@@ -239,6 +239,9 @@ GEM
       addressable (~> 2.8)
     letter_opener (1.8.1)
       launchy (>= 2.2, < 3)
+    listen (3.9.0)
+      rb-fsevent (~> 0.10, >= 0.10.3)
+      rb-inotify (~> 0.9, >= 0.9.10)
     llhttp-ffi (0.4.0)
       ffi-compiler (~> 1.0)
       rake (~> 13.0)
@@ -331,6 +334,11 @@ GEM
       ast (~> 2.4.1)
       racc
     pg (1.5.4)
+    propshaft (0.9.0)
+      actionpack (>= 7.0.0)
+      activesupport (>= 7.0.0)
+      rack
+      railties (>= 7.0.0)
     psych (5.1.2)
       stringio
     public_activity (3.0.1)
@@ -385,6 +393,9 @@ GEM
       zeitwerk (~> 2.5)
     rainbow (3.1.1)
     rake (13.2.1)
+    rb-fsevent (0.11.2)
+    rb-inotify (0.11.1)
+      ffi (~> 1.0)
     rdoc (6.7.0)
       psych (>= 4.0.0)
     redcarpet (3.6.0)
@@ -511,13 +522,6 @@ GEM
     snaky_hash (2.0.1)
       hashie
       version_gem (~> 1.1, >= 1.1.1)
-    sprockets (4.2.1)
-      concurrent-ruby (~> 1.0)
-      rack (>= 2.2.4, < 4)
-    sprockets-rails (3.5.2)
-      actionpack (>= 6.1)
-      activesupport (>= 6.1)
-      sprockets (>= 3.0.0)
     statsd-ruby (1.5.0)
     stimulus-rails (1.3.3)
       railties (>= 6.0.0)
@@ -595,6 +599,7 @@ DEPENDENCIES
   kramdown (~> 2.4)
   kramdown-parser-gfm
   letter_opener (~> 1.8)
+  listen (~> 3.9)
   lookbook (~> 2.2.1)
   newrelic_rpm (~> 9.7)
   noticed (~> 1.6)
@@ -604,6 +609,7 @@ DEPENDENCIES
   omniauth-rails_csrf_protection (~> 1.0)
   pagy (~> 6.2)
   pg (~> 1.5)
+  propshaft (~> 0.9)
   public_activity (~> 3.0)
   puma (~> 6.4)
   rack-attack (~> 6.7)
@@ -629,7 +635,6 @@ DEPENDENCIES
   sidekiq (~> 7.2)
   sidekiq-cron (~> 1.12)
   simplecov (~> 0.22)
-  sprockets-rails (~> 3.5)
   stimulus-rails (~> 1.3)
   turbo-rails (~> 2.0)
   vcr (~> 6.2)

app/assets/stylesheets/stylesheets/lesson-notes.css

@@ -16,7 +16,7 @@
   }
 
   .lesson-note > *:first-child::before {
-    mask-image: url("icons/pencil-square-solid");
+    mask-image: url("/icons/pencil-square-solid.svg");
     content:'';
     @apply h-5 w-5 mr-2 inline-block align-text-bottom bg-gold dark:bg-gold-600;
   }
@@ -28,7 +28,7 @@
   }
 
   .lesson-note--tip > *:first-child::before {
-    mask-image: url("icons/light-bulb-solid");
+    mask-image: url("/icons/light-bulb-solid.svg");
     content:'';
     @apply h-5 w-5 inline-block align-text-bottom bg-blue-600 dark:bg-blue-500;
   }
@@ -41,7 +41,7 @@
   }
 
   .lesson-note--warning > *:first-child::before {
-    mask-image: url("icons/exclamation-triangle-solid");
+    mask-image: url("/icons/exclamation-triangle-solid.svg");
     content:'';
     @apply h-5 w-5 inline-block align-text-bottom bg-orange-500 dark:bg-orange-400;
   }
@@ -53,7 +53,7 @@
   }
 
   .lesson-note--critical > *:first-child::before {
-    mask-image: url("icons/exclamation-circle-solid");
+    mask-image: url('/icons/exclamation-circle-solid.svg');
     content:'';
     @apply h-5 w-5 inline-block align-text-bottom bg-red-600 dark:bg-red-500;
   }

app/assets/stylesheets/stylesheets/typography.css

@@ -18,7 +18,7 @@
   }
 
   .anchor-link:hover:before {
-    mask-image: url("icons/link");
+    mask-image: url("/icons/link.svg");
     content:' ';
     @apply h-4 w-4 bg-gray-500 dark:bg-gray-300 absolute -left-[22px] top-1/2 -translate-y-1/2 font-semibold sm:block;
   }

config/environments/development.rb

@@ -83,6 +83,9 @@
   # Uncomment if you wish to allow Action Cable access from any origin.
   # config.action_cable.disable_request_forgery_protection = true
 
+  # Watch files changes with listen gem to speed up propshaft compilation
+  config.file_watcher = ActiveSupport::EventedFileUpdateChecker
+
   # Settings for view component previews https://viewcomponent.org/guide/previews.html
   config.view_component.preview_paths << Rails.root.join('spec/components/previews')
   config.view_component.default_preview_layout = 'component_preview'