refactor: use Tailwind CLI and esbuild for assets

Fixes: #10
Fixes: #14

.env.example

@@ -12,8 +12,10 @@ COMPOSE_PROJECT_NAME=oliverdavies-uk
 DOCKER_OUTPUT_VOLUME=/app/output_dev
 
 # The environment to generate the site for (e.g. dev or prod).
-#SCULPIN_ENV=prod
+# SCULPIN_ENV=prod
+# NODE_ENV=production
 SCULPIN_ENV=dev
+NODE_ENV=development
 
 # The port on which to serve the site if the --server option is specified.
 #SCULPIN_PORT=80

.gitignore

@@ -1,7 +1,7 @@
-/build/
-/node_modules/
-/output_*/
-/source/build/
-/vendor/
 /.env
 /.phpunit.cache
+/build/
+/docker-compose.override.yaml
+/output/
+/source/build/
+/vendor/

.yarnrc

@@ -0,0 +1 @@
+--modules-folder /node_modules

Dockerfile

@@ -1,39 +1,71 @@
+FROM node:14-alpine AS assets
+
+ARG NODE_ENV="production"
+ARG SCULPIN_ENV="prod"
+ENV NODE_ENV="${NODE_ENV}" \
+    PATH="${PATH}:/node_modules/.bin" \
+    SCULPIN_ENV="${SCULPIN_ENV}"
+
+RUN apk add --no-cache bash
+
+WORKDIR /app
+
+RUN mkdir -p /node_modules \
+  && chown node:node -R /app /node_modules
+
+USER node
+
+COPY --chown=node:node *yarn* package.json ./
+
+RUN yarn install && yarn cache clean
+
+COPY --chown=node:node . .
+
+RUN if [ "${NODE_ENV}" != "development" ]; then \
+  ./run yarn:build:css && ./run yarn:build:js; \
+  else mkdir -p /app/build; fi
+
+CMD ["bash"]
+
+###
+
 FROM opdavies/sculpin-serve AS app
 
-#
+WORKDIR /app
+
+RUN adduser --disabled-password sculpin \
+  && chown sculpin:sculpin -R /app
+
+###
 
 FROM app AS build
 
 ENV PATH=$PATH:/app/vendor/bin/phpunit
 
+COPY tools/docker/images/app/root /
+
 WORKDIR /app
 
-COPY composer.* ./
+USER sculpin
+
+COPY --chown=sculpin:sculpin composer.* ./
 
 RUN composer install --no-dev
 
-COPY app app
-COPY source source
-COPY src src
+COPY --chown=sculpin:sculpin app app
+COPY --chown=sculpin:sculpin source source
+COPY --chown=sculpin:sculpin src src
 
 RUN sculpin generate --env prod
 
-#
+COPY --chown=sculpin:sculpin . .
+COPY --chown=sculpin:sculpin --from=assets /app/build /build
 
-FROM node:14-alpine AS assets
+ENTRYPOINT ["/usr/bin/docker-entrypoint.sh"]
 
-RUN apk add --no-cache make
+CMD ["bash"]
 
-WORKDIR /app
-
-COPY package*.json ./
-RUN npm ci
-
-COPY . .
-
-RUN npm run production
-
-#
+###
 
 FROM nginx:1 AS production
 

Makefile

@@ -1,7 +0,0 @@
-assets-watch:
-	npm ci
-	npm run watch
-
-.PHONY: *
-
-# vim: noexpandtab filetype=make

assets/js/app.js

@@ -1,7 +1,5 @@
 import 'alpinejs'
 import 'focus-visible'
-import 'highlight.js/styles/github.css'
-import 'styles/tailwind.pcss'
 import bash from 'highlight.js/lib/languages/bash'
 import hljs from 'highlight.js/lib/core'
 import ini from 'highlight.js/lib/languages/ini'

docker-compose.override.yaml.example

@@ -0,0 +1,20 @@
+x-assets: &default-assets
+  build:
+    context: "."
+    target: "assets"
+  env_file:
+    - ".env"
+  restart: "${DOCKER_RESTART_POLICY:-unless-stopped}"
+  stop_grace_period: "3s"
+  tty: true
+  volumes:
+    - ".:/app"
+
+services:
+  css:
+    <<: *default-assets
+    command: "./run yarn:build:css"
+
+  js:
+    <<: *default-assets
+    command: "./run yarn:build:js"

docker-compose.yaml

@@ -1,43 +1,13 @@
-x-build-args: &default-build-args
-  context: .
-
 services:
   app:
     build:
-      <<: *default-build-args
-      target: app
-    command: generate --port "${SCULPIN_PORT:-80}" --url "${SCULPIN_URL:-http://localhost}" --env "${SCULPIN_ENV:-dev}" "${SCULPIN_GENERATE_ARGS}"
+      context: .
+      target: build
+    command: sculpin generate --clean --port "${SCULPIN_PORT:-80}" --url "${SCULPIN_URL:-http://localhost}" --env "${SCULPIN_ENV:-dev}" "${SCULPIN_GENERATE_ARGS}" --output-dir output --no-interaction
     volumes:
-      - assets:/app/source/build
       - .:/app
-      - "${DOCKER_OUTPUT_VOLUME:-./output_prod:/app/output_prod}"
     ports:
       - "${SCULPIN_PORT:-80}:${SCULPIN_PORT:-80}"
     env_file:
       - .env
-    depends_on:
-      - assets
-
-  assets:
-    build:
-      <<: *default-build-args
-      target: assets
-    volumes:
-      - assets:/node/source/build
-      - /node/node_modules
-      - ./assets:/node/assets
-      - ./Makefile:/node/Makefile
-      - ./package.json:/node/package.json
-      - ./package-lock.json:/node/package-lock.json
-      - ./postcss.config.js:/node/postcss.config.js
-      - ./source:/node/source
-      - ./tailwind.config.js:/node/tailwind.config.js
-      - ./tools/tailwindcss:/node/tools/tailwindcss
-      - ./webpack.config.js:/node/webpack.config.js
-    working_dir: /node
-    entrypoint: make
-    command:
-      - assets-watch
-
-volumes:
-  assets: {}
+    tty: true

esbuild.config.js

@@ -0,0 +1,28 @@
+const esbuild = require('esbuild')
+
+let minify = false
+let sourcemap = true
+let watch_fs = true
+
+if (process.env.NODE_ENV === 'production') {
+  minify = true
+  sourcemap = false
+  watch_fs = false
+}
+
+const watch = watch_fs && {
+  onRebuild(error) {
+    if (error) console.error('[watch] build failed', error)
+    else console.log('[watch] build finished')
+  },
+}
+
+esbuild.build({
+  entryPoints: ['./assets/js/app.js'],
+  outfile: './build/app.js',
+  bundle: true,
+  minify: minify,
+  sourcemap: sourcemap,
+  watch: watch,
+  plugins: [],
+})

package.json

@@ -1,28 +1,22 @@
 {
   "private": true,
   "scripts": {
-    "dev": "npm run development",
-    "development": "encore dev",
-    "prod": "npm run production",
-    "production": "encore production",
-    "watch": "encore dev --watch"
+    "build:css": "./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",
     "alpinejs": "^2.3.5",
     "autoprefixer": "^10.2.5",
     "elliptic": ">=6.5.3",
+    "esbuild": "^0.14.10",
     "focus-visible": "^5.1.0",
     "highlight.js": "^10.4.1",
     "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.2",
-    "webpack-notifier": "^1.8.0"
+    "tailwindcss": "2"
   }
 }

run

@@ -93,6 +93,24 @@ function test:unit {
   _dc --entrypoint phpunit app "${@}"
 }
 
+function yarn:build:css {
+  # Build CSS assets, this is meant to be run from within the assets container.
+  local args=()
+
+  if [ "${SCULPIN_ENV}" == "prod" ]; then
+    args=(--minify)
+  elif [ "${NODE_ENV}" == "development" ]; then
+    args=(--watch)
+  fi
+
+  tailwindcss --postcss -i assets/css/tailwind.pcss -o build/app.css "${args[@]}"
+}
+
+function yarn:build:js {
+  # Build JS assets, this is meant to be run from within the assets container.
+  node esbuild.config.js
+}
+
 function _dc {
   docker-compose ${DC} ${TTY} "${@}"
 }

tools/docker/images/app/root/usr/bin/docker-entrypoint.sh

@@ -0,0 +1,7 @@
+#!/bin/sh
+
+set -e
+
+cp -r /build /app/source
+
+exec "$@"

webpack.config.js

@@ -1,27 +0,0 @@
-let Encore = require('@symfony/webpack-encore')
-let path = require('path')
-
-Encore
-    .disableSingleRuntimeChunk()
-    .cleanupOutputBeforeBuild()
-    .setOutputPath('source/build/')
-    .setPublicPath('/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()