Moved CSS pipeline to postcss

dutow · dutow · commit 2f09b25fc80a · 2025-12-17T18:52:05.000+01:00
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.
diff --git a/.gitignore b/.gitignore
@@ -36,3 +36,8 @@
 
 .claude
 CLAUDE.md
+
+/app/assets/builds/*
+!/app/assets/builds/.keep
+
+/node_modules
diff --git a/Dockerfile b/Dockerfile
@@ -8,7 +8,7 @@ ENV BUNDLE_WITHOUT="development:test" \
     NODE_ENV=production
 
 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 +18,7 @@ RUN bundle install --jobs=4 --retry=3
 
 COPY . .
 
+RUN npm install && npm run build:css
 RUN SECRET_KEY_BASE=dummy bundle exec rails assets:precompile
 
 FROM ruby:${RUBY_VERSION}-slim AS final
diff --git a/Dockerfile.dev b/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"]
diff --git a/Gemfile b/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.)
diff --git a/Gemfile.lock b/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
diff --git a/Procfile.dev b/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
diff --git a/app/assets/builds/.keep b/app/assets/builds/.keep
diff --git a/app/assets/stylesheets/application.postcss.css b/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";
diff --git a/app/views/layouts/application.html.slim b/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
diff --git a/bin/dev b/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 "$@"
diff --git a/bin/docker-entrypoint b/bin/docker-entrypoint
@@ -9,6 +9,11 @@ fi
 # Ensure gems are installed when using a persistent bundle volume.
 bundle check || bundle install
 
+# Ensure JS dependencies are present when using a node_modules volume.
+if [ -f package.json ] && [ ! -d node_modules ]; then
+  npm install --no-progress
+fi
+
 # If running the rails server (directly or via bin/dev), create or migrate the database
 if { [ "$1" = "./bin/rails" ] && [ "$2" = "server" ]; } || [ "$1" = "./bin/dev" ]; then
   ./bin/rails db:prepare
diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
@@ -4,4 +4,4 @@
 Rails.application.config.assets.version = "1.0"
 
 # Add additional assets to the asset load path.
-# Rails.application.config.assets.paths << Emoji.images_path
+Rails.application.config.assets.paths << Rails.root.join("app/assets/builds")
diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
@@ -30,6 +30,8 @@ services:
     environment:
       RAILS_ENV: ${RAILS_ENV:-development}
       NODE_ENV: ${NODE_ENV:-development}
+      HOST: 0.0.0.0
+      PORT: 3000
       DATABASE_URL: ${DATABASE_URL:-postgresql://${POSTGRES_USER:-hackorum}:${POSTGRES_PASSWORD:-hackorum}@db:5432/${POSTGRES_DB:-hackorum_development}}
       PGHOST: db
       PGPORT: 5432
@@ -41,13 +43,14 @@ services:
     volumes:
       - .:/app
       - bundle:/usr/local/bundle
+      - node_modules:/app/node_modules
     ports:
       - "3000:3000"
     depends_on:
       db:
         condition: service_healthy
     entrypoint: ["./bin/docker-entrypoint"]
-    command: ["./bin/dev", "-b", "0.0.0.0", "-p", "3000"]
+    command: ["./bin/dev"]
 
   imap_worker:
     profiles: ["imap"]
@@ -85,3 +88,4 @@ services:
 volumes:
   db-data:
   bundle:
+  node_modules:
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
diff --git a/postcss.config.js b/postcss.config.js

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