refactor: build development Tailwind CSS in a separate Docker service

.dockerignore

@@ -8,5 +8,5 @@
 .dockerignore
 /docker-compose-dev.yml
 /docker-compose-prod.yml
-/docker/dev/app/Dockerfile
-/docker/prod/app/Dockerfile
+/docker/dev/*/Dockerfile
+/docker/prod/*/Dockerfile

docker-compose-dev.yaml

@@ -12,11 +12,22 @@ services:
       - ./Cargo.toml:/srv/app/Cargo.toml
       - ./diesel.toml:/srv/app/diesel.toml
       - ./Dioxus.toml:/srv/app/Dioxus.toml
-      - ./package.json:/srv/app/package.json
-      - ./package-lock.json:/srv/app/package-lock.json
     restart: always
     ports: ["8000:8000"]
-    depends_on: ["db"]
+    depends_on: ["db", "style-builder"]
+
+  style-builder:
+    build:
+      dockerfile: docker/dev/style-builder/Dockerfile
+    volumes:
+      - ./assets:/srv/app/assets
+      - ./src:/srv/app/src
+      - ./package.json:/srv/app/package.json
+      - ./package-lock.json:/srv/app/package-lock.json
+    # To prevent the container from exiting.
+    # See https://github.com/rails/rails/issues/44048.
+    tty: true
+    restart: always
 
   db:
     image: postgres:16.4-bookworm

docker/dev/app/Dockerfile

@@ -1,27 +1,16 @@
+# 1.83.0-bookworm
 FROM rust@sha256:a45bf1f5d9af0a23b26703b3500d70af1abff7f984a7abef5a104b42c02a292b
 
-RUN cargo install dioxus-cli diesel_cli \
- && apt-get update && apt-get install -y --no-install-recommends \
-    nodejs=18.19.0+dfsg-6~deb12u2 \
-    npm=9.2.0~ds1-1 \
-    supervisor=4.2.5-1 \
- && apt-get clean \
- && rm -rf /var/lib/apt/lists/*
+RUN cargo install dioxus-cli diesel_cli
 
 COPY . /srv/app
 WORKDIR /srv/app
 
-RUN npm install
-
-COPY docker/dev/app/supervisord.conf /etc/supervisor/conf.d/supervisord.conf
-
-RUN chown -R 1000:1000 /srv/app \
- && chown -R 1000:1000 /usr/local/cargo \
- && mkdir -p /.local/share/dioxus \
- && chown -R 1000:1000 /.local/share/dioxus
+RUN mkdir -p /.local/share/dioxus \
+ && chown -R 1000:1000 /srv/app /usr/local/cargo /.local/share/dioxus
 
 HEALTHCHECK CMD curl --fail -H "Accept: text/html" http://localhost:8000 || exit 1
 
 USER 1000:1000
 
-CMD ["sh", "docker/dev/app/entrypoint.sh"]
+CMD ["dx", "serve", "--addr", "0.0.0.0", "--port", "8000"]

docker/dev/app/entrypoint.sh

@@ -1,3 +0,0 @@
-#!/bin/bash
-
-supervisord -c /etc/supervisor/conf.d/supervisord.conf

docker/dev/app/supervisord.conf

@@ -1,23 +0,0 @@
-[supervisord]
-nodaemon=true
-logfile=/dev/null
-logfile_maxbytes=0
-pidfile=/dev/null
-
-[program:npm]
-command=npm run watch
-directory=/srv/app
-autostart=true
-autorestart=true
-stdout_logfile=/dev/fd/1
-stdout_logfile_maxbytes=0
-redirect_stderr=true
-
-[program:dx]
-command=dx serve --addr 0.0.0.0 --port 8000
-directory=/srv/app
-autostart=true
-autorestart=true
-stdout_logfile=/dev/fd/1
-stdout_logfile_maxbytes=0
-redirect_stderr=true

docker/dev/style-builder/Dockerfile

@@ -0,0 +1,13 @@
+# 23-alpine3.21
+FROM node@sha256:c61b6b12a3c96373673cd52d7ecee2314e82bca5d541eecf0bc6aee870c8c6f7
+
+WORKDIR /srv/app
+
+COPY ./package.json ./package.json
+COPY ./package-lock.json ./package-lock.json
+
+RUN npm install
+
+USER 1000:1000
+
+CMD ["npm", "run", "watch"]

src/styles/tailwind.config.js

@@ -1,7 +1,7 @@
-/** @type {import('tailwindcss').Config} */
+/** @type {import("tailwindcss").Config} */
 module.exports = {
   mode: "all",
-  content: ["./src/**/*.{rs,html,css}", "./dist/**/*.html"],
+  content: ["./src/**/*.{rs,html,css}"],
   theme: {
     fontFamily: {
       sans: ["Inter", "sans-serif"],