Moved CSS pipeline to postcss

The production setup included all CSS files directly and this resulted
in broken links and lots of 404 requests to our server. This new
approach compacts everything into a single css file and everything
should work better.

Author: dutow

.github/workflows/test.yml

@@ -39,7 +39,9 @@ jobs:
       - name: Install dependencies
         run: |
           sudo apt-get update -qq
-          sudo apt-get install -y build-essential libpq-dev pkg-config
+          sudo apt-get install -y build-essential libpq-dev pkg-config nodejs npm
+          NPM_CONFIG_PRODUCTION=false npm ci --production=false
+          npm run build:css
 
       - name: Prepare database
         run: bin/rails db:prepare

.gitignore

@@ -36,3 +36,8 @@
 
 .claude
 CLAUDE.md
+
+/app/assets/builds/*
+!/app/assets/builds/.keep
+
+/node_modules

Dockerfile

@@ -5,10 +5,11 @@ FROM ruby:${RUBY_VERSION} AS base
 
 ENV BUNDLE_WITHOUT="development:test" \
     RAILS_ENV=production \
-    NODE_ENV=production
+    NODE_ENV=production \
+    NPM_CONFIG_PRODUCTION=false
 
 RUN apt-get update -qq && \
-    apt-get install -y --no-install-recommends build-essential libpq-dev git curl && \
+    apt-get install -y --no-install-recommends build-essential libpq-dev git curl nodejs npm && \
     rm -rf /var/lib/apt/lists/*
 
 WORKDIR /app
@@ -18,6 +19,9 @@ RUN bundle install --jobs=4 --retry=3
 
 COPY . .
 
+# Install JS deps including devDependencies for the PostCSS build, then build CSS.
+RUN npm ci --production=false && \
+    npm run build:css
 RUN SECRET_KEY_BASE=dummy bundle exec rails assets:precompile
 
 FROM ruby:${RUBY_VERSION}-slim AS final

Dockerfile.dev

@@ -6,7 +6,7 @@ ENV RAILS_ENV=development \
     BUNDLE_WITHOUT=""
 
 RUN apt-get update -qq && \
-    apt-get install -y --no-install-recommends build-essential libpq-dev git curl && \
+    apt-get install -y --no-install-recommends build-essential libpq-dev git curl nodejs npm && \
     rm -rf /var/lib/apt/lists/*
 
 WORKDIR /app
@@ -16,6 +16,9 @@ RUN bundle install --jobs=4 --retry=3
 
 COPY . .
 
+# Install JS dependencies so dev server can run the CSS watcher; actual CSS is rebuilt by bin/dev/foreman.
+RUN npm install
+
 EXPOSE 3000
 
 ENTRYPOINT ["./bin/docker-entrypoint"]

Gemfile

@@ -4,6 +4,7 @@ source "https://rubygems.org"
 gem "rails", "~> 8.0.2"
 # The modern asset pipeline for Rails [https://github.com/rails/propshaft]
 gem "propshaft"
+gem "cssbundling-rails"
 # Use postgresql as the database for Active Record
 gem "pg", "~> 1.1"
 # PostgreSQL-specific ActiveRecord extensions (UNION, CTE, etc.)

Gemfile.lock

@@ -106,6 +106,8 @@ GEM
     concurrent-ruby (1.3.5)
     connection_pool (3.0.2)
     crass (1.0.6)
+    cssbundling-rails (1.4.3)
+      railties (>= 6.0.0)
     date (3.5.0)
     debug (1.11.0)
       irb (~> 1.10)
@@ -481,6 +483,7 @@ DEPENDENCIES
   brakeman
   bullet
   capybara
+  cssbundling-rails
   debug
   factory_bot_rails
   faker

Procfile.dev

@@ -0,0 +1,2 @@
+web: env RUBY_DEBUG_OPEN=true bin/rails server -b ${HOST:-127.0.0.1} -p ${PORT:-3000}
+css: yarn build:css --watch

app/assets/stylesheets/application.css …sets/stylesheets/application.postcss.cssapp/assets/stylesheets/application.css renamed to app/assets/stylesheets/application.postcss.css app/assets/stylesheets/application.css renamed to app/assets/stylesheets/application.postcss.css

@@ -10,7 +10,6 @@
 @import "components/form.css";
 @import "components/navigation.css";
 @import "components/sidebar.css";
-@import "components/search.css";
 @import "components/topics.css";
 @import "components/avatars.css";
 @import "components/participants.css";

app/views/layouts/application.html.slim

@@ -21,7 +21,7 @@ html data-theme="light"
           var theme = stored || (prefersDark ? 'dark' : 'light');
           document.documentElement.dataset.theme = theme;
         })();
-    = stylesheet_link_tag :app, "data-turbo-track": "reload"
+    = stylesheet_link_tag "application", "data-turbo-track": "reload"
     = javascript_importmap_tags
     script[src="https://kit.fontawesome.com/92fb6aa8ba.js"]
   body

bin/dev

@@ -1,2 +1,11 @@
-#!/usr/bin/env ruby
-exec "./bin/rails", "server", *ARGV
+#!/usr/bin/env sh
+
+if gem list --no-installed --exact --silent foreman; then
+  echo "Installing foreman..."
+  gem install foreman
+fi
+
+# Default to port 3000 if not specified
+export PORT="${PORT:-3000}"
+
+exec foreman start -f Procfile.dev --env /dev/null "$@"