Switch to cssbundling_rails

Using esbuild to compile SCSS files works for the SCSS part, but not
for assets that are referenced inside the SCSS files. Images are
processed by the asset pipeline. The pipeline turns images like
`foo.png` into
`foo-138b348edbc780482d40f0abc5b57e487c0ecf24cfbde42d54007cfd8db0d7a4.pn
g`. SCSS files still refer to them as `url("foo.png")`, but the final
path to the image must include the hash in production. To make sure the
final CSS file can find these images, sprockets-rails [scans] all CSS
files using `AssetUrlProcessor`, which replaces `url("foo.png")` with
the hashed version.

Another complication was in a previous version of my asset pipeline
esbuild located assets relative to the CSS file the refernced them.
Sprockets doesn't look there. It [searches] any directory in
`app/assets`. All the asset urls in SCSS files needed to be changed to
be relative to those search paths instead, e.g. `../../images/foo.png`
to `foo.png`.

I have three base css files: application, blog, and admin. To support
them all I changed the `sass` command to look in
`./app/assets/stylesheets` and build to `./app/assets/builds` instead
of looking at each individual file ([sass reference]). It built the
`admin.css` file inside of an `admin/` directory, so the
`stylesheet_link_tag` had to change to reflect that.

Building asseets in development now either requires running the css,
js, _and_ rails server. You can use `bin/dev` to start all three, or
start them manually:

```
yarn build --watch
yarn build:css --watch
rails s
```

[scans]: rails/cssbundling-rails#22
[searches]: https://guides.rubyonrails.org/asset_pipeline.html#search-paths
[sass reference]: https://sass-lang.com/documentation/cli/dart-sass#many-to-many-mode

Gemfile

@@ -4,6 +4,7 @@ ruby "3.0.4"
 
 gem "autoprefixer-rails"
 gem "bullet"
+gem "cssbundling-rails"
 gem "dotenv-rails"
 gem "flutie"
 gem "high_voltage"

Gemfile.lock

@@ -107,6 +107,8 @@ GEM
     crack (0.4.5)
       rexml
     crass (1.0.6)
+    cssbundling-rails (1.1.1)
+      railties (>= 6.0.0)
     database_cleaner (2.0.1)
       database_cleaner-active_record (~> 2.0.0)
     database_cleaner-active_record (2.0.1)
@@ -315,7 +317,7 @@ GEM
     simplecov-html (0.12.3)
     simplecov_json_formatter (0.1.3)
     smart_properties (1.17.0)
-    sprockets (4.0.2)
+    sprockets (4.1.1)
       concurrent-ruby (~> 1.0)
       rack (> 1, < 3)
     sprockets-rails (3.4.2)
@@ -366,6 +368,7 @@ DEPENDENCIES
   bullet
   bundler-audit
   capybara-selenium
+  cssbundling-rails
   database_cleaner
   dotenv-rails
   factory_bot_rails

Procfile.dev

@@ -1,2 +1,3 @@
 web: bin/rails server -p 3000
 js: yarn build --watch
+css: yarn build:css --watch

app/assets/stylesheets/_hotline_webring.scss

@@ -27,12 +27,12 @@ section.hotline-webring {
   }
 
   a.previous {
-    background-image: url("../images/hlwr-prev.svg");
+    background-image: url("hlwr-prev.svg");
     background-position: center left;
   }
 
   a.next {
-    background-image: url("../images/hlwr-next.svg");
+    background-image: url("hlwr-next.svg");
     background-position: center right;
   }
 }

app/assets/stylesheets/_ie.scss

@@ -1,6 +1,6 @@
 body.ie {
   header {
-    background: url("../images/logo.gif") no-repeat center;
+    background: url("logo.gif") no-repeat center;
   }
 
   header h1 {

app/assets/stylesheets/_songs.scss

@@ -40,8 +40,7 @@ div.player {
   }
 
   a.button {
-    background: var(--button-color) url("../images/play.svg") no-repeat center
-      center;
+    background: var(--button-color) url("play.svg") no-repeat center center;
     border: 2px solid var(--song-progress-color);
     border-radius: 50%;
     box-sizing: border-box;
@@ -54,7 +53,7 @@ div.player {
   }
 
   a.button.playing {
-    background-image: url("../images/pause.svg");
+    background-image: url("pause.svg");
   }
 
   span.remaining {

app/assets/entry_points/admin.js → app/javascript/admin.js

@@ -3,6 +3,4 @@ import Rails from "@rails/ujs";
 Rails.start();
 require("@rails/activestorage").start();
 
-import "../javascripts/draggable";
-
-import "../stylesheets/admin/admin.scss";
+import "../assets/javascripts/draggable";

app/javascript/application.js

@@ -0,0 +1,3 @@
+import "../assets/javascripts/detector";
+import "../assets/javascripts/scrollDown";
+import "../assets/javascripts/song";

app/javascript/blog.js

@@ -0,0 +1 @@
+import "../assets/javascripts/detector";

app/views/layouts/admin.html.erb

@@ -9,7 +9,7 @@
   <script>try{Typekit.load({ async: true });}catch(e){}</script>
   <title><%= title %></title>
   <%= favicon_link_tag('favicon.png') %>
-  <%= stylesheet_link_tag :admin, "data-turbo-track": "reload", defer: true %>
+  <%= stylesheet_link_tag "admin/admin", "data-turbo-track": "reload", defer: true %>
   <%= javascript_include_tag :admin, "data-turbo-track": "reload", defer: true %>
   <%= csrf_meta_tags %>
 </head>

bin/dev

@@ -1,6 +1,6 @@
 #!/usr/bin/env bash
 
-if ! command -v foreman &> /dev/null
+if ! foreman version &> /dev/null
 then
   echo "Installing foreman..."
   gem install foreman

config/environments/production.rb

@@ -29,6 +29,7 @@
 
   # Do not fallback to assets pipeline if a precompiled asset is missed.
   config.assets.compile = false
+  config.assets.resolve_assets_in_css_urls = true
 
   # Enable serving of images, stylesheets, and JavaScripts from an asset server.
   # config.asset_host = "http://assets.example.com"

package.json

@@ -6,10 +6,12 @@
     "esbuild": "^0.14.28",
     "esbuild-sass-plugin": "^2.2.5",
     "normalize.css": "^8.0.1",
+    "sass": "^1.54.3",
     "webpack-jquery-ui": "^2.0.1"
   },
   "devDependencies": {},
   "scripts": {
-    "build": "bin/assets"
+    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets",
+    "build:css": "sass ./app/assets/stylesheets:./app/assets/builds --no-source-map --load-path=node_modules"
   }
 }