build(docker): use Tailwind CLI for generating CSS

.env.example

@@ -1,3 +1,7 @@
 IFTTT_WEBHOOK_URL=
 
 INTEGROMAT_WEBHOOK_URL=
+
+# Which environment is running? This should be "development" or "production".
+# NODE_ENV=development
+NODE_ENV=production

.github/workflows/ci.yml

@@ -77,12 +77,6 @@ jobs:
           path: node_modules
           key: dependencies-npm-${{ hashFiles('package-lock.json') }}
 
-      - name: Build the production theme assets
-        run: |
-          cd ${{ matrix.theme-path }}
-          npm clean-install
-          npm run production
-
   phpunit:
     runs-on: ubuntu-latest
     name: "Run ${{ matrix.test-types }} tests"

.gitignore

@@ -11,6 +11,7 @@
 !/bin/
 !/config/**
 !/Dockerfile
+!/docker-compose.override.yaml.example
 !/docker-compose.yaml
 !/phpcs.xml.dist
 !/phpstan*.neon

Dockerfile

@@ -1,15 +1,29 @@
-FROM node:14-alpine AS assets
+FROM node:14-buster-slim AS assets
+
+ARG NODE_ENV=production
+ENV NODE_ENV="${NODE_ENV:-production}" \
+  PATH="${PATH}:/node_modules/.bin"
+
 WORKDIR /app
+
 RUN mkdir /node_modules \
-  chown node:node -R /node_modules /app
+  && chown node:node -R /node_modules /app
+
 USER node
+
+COPY --chown=node:node run .
+
 WORKDIR /app/web/themes/custom/opdavies
-COPY web/themes/custom/opdavies/.yarnrc .
-COPY web/themes/custom/opdavies/package.json .
-COPY web/themes/custom/opdavies/yarn.lock .
-RUN yarn install && yarn cache clear
-COPY web/themes/custom/opdavies ./
-RUN npm run production
+
+COPY --chown=node:node web/themes/custom/opdavies/.yarnrc .
+COPY --chown=node:node web/themes/custom/opdavies/package.json .
+COPY --chown=node:node web/themes/custom/opdavies/yarn.lock .
+
+RUN yarn install && yarn cache clean
+
+COPY --chown=node:node config ../../../../config
+
+CMD ["bash"]
 
 ###
 

docker-compose.override.yaml.example

@@ -0,0 +1,17 @@
+x-assets: &default-assets
+  build:
+    context: .
+    target: assets
+    args:
+      - "NODE_ENV=${NODE_ENV:-production}"
+  env_file:
+    - .env
+  tty: true
+  volumes:
+    - '.:/app'
+
+services:
+  css:
+    <<: *default-assets
+    command: 'yarn build:css'
+    working_dir: /app/web/themes/custom/opdavies

docker-compose.yaml

@@ -1,10 +1,3 @@
-version: '2.4'
-
-volumes:
-  assets:
-  mysql_data:
-  node_modules:
-
 services:
   nginx:
     build:
@@ -12,7 +5,6 @@ services:
       target: nginx
     volumes:
       - assets:/app/web/themes/custom/opdavies/build
-      - node_modules:/app/web/themes/custom/opdavies/node_modules
       - ./:/app
     depends_on:
       php:
@@ -46,3 +38,7 @@ services:
       test: ["CMD-SHELL", "bash", "-c", "echo > /dev/tcp/localhost/3306"]
       interval: 1s
     restart: unless-stopped
+
+volumes:
+  assets:
+  mysql_data:

run

@@ -116,7 +116,21 @@ function task:test:unit {
 
 function run-tests {
   # Run PHPUnit tests.
-  docker-compose run php --user ${DOCKER_WEB_USER} php phpunit "${@}"
+  docker-compose run --rm php --user ${DOCKER_WEB_USER} php phpunit "${@}"
+}
+
+function task:yarn:build:css {
+  # Build CSS assets, this is meant to be run from within the assets container.
+  local args=()
+
+  if [ "${NODE_ENV}" == "production" ]; then
+    args=(--minify)
+  else
+    args=(--watch)
+  fi
+
+  tailwindcss --postcss --input assets/css/tailwind.pcss \
+    --output build/app.css "${args[@]}"
 }
 
 eval "task:${@:-help}"

web/themes/custom/opdavies/package.json

@@ -1,14 +1,9 @@
 {
   "private": true,
   "scripts": {
-    "dev": "npm run development",
-    "development": "encore dev",
-    "prod": "npm run production",
-    "production": "encore production",
-    "watch": "encore dev --watch"
+    "build:css": "/app/run yarn:build:css"
   },
-  "devDependencies": {
-    "@symfony/webpack-encore": "^1.1.2",
+  "dependencies": {
     "@tailwindcss/aspect-ratio": "^0.2.0",
     "@tailwindcss/forms": "^0.2.1",
     "@tailwindcss/typography": "^0.4.0",
@@ -20,9 +15,7 @@
     "lodash": ">=4.17.19",
     "postcss": "^8.2.1",
     "postcss-easy-import": "^3.0.0",
-    "postcss-loader": "^5.2.0",
     "postcss-nested": "^5.0.5",
-    "tailwindcss": "^2.2.19",
-    "webpack-notifier": "^1.8.0"
+    "tailwindcss": "^2.2.19"
   }
 }

web/themes/custom/opdavies/tailwind.config.js

@@ -8,7 +8,7 @@ module.exports = {
   important: true,
   purge: {
     content: [
-      'config/**/*.yml',
+      '../../../../config/**/*.yml',
       'tailwindcss/safelist-classes.txt',
       'templates/**/*.html.twig'
     ],

web/themes/custom/opdavies/webpack.config.js

@@ -1,27 +0,0 @@
-let Encore = require('@symfony/webpack-encore')
-let path = require('path')
-
-Encore
-    .disableSingleRuntimeChunk()
-    .cleanupOutputBeforeBuild()
-    .setOutputPath('build/')
-    .setPublicPath('/themes/custom/opdavies/build')
-    .setManifestKeyPrefix('build/')
-
-    .addEntry('app', '@/app.js')
-
-    .enablePostCssLoader()
-
-    .addAliases({
-        '@': path.resolve(__dirname, 'assets', 'js'),
-        styles: path.resolve(__dirname, 'assets', 'css')
-    })
-
-if (!Encore.isProduction()) {
-    Encore.enableSourceMaps()
-}
-
-process.env.NODE_ENV =
-  process.env.NODE_ENV || Encore.isProduction() ? 'production' : 'development';
-
-module.exports = Encore.getWebpackConfig()