fix: build CSS with Hugo's native TailwindCSS instead of PostCSS

hugo server/build was failing with "binary postcss is not a Node.js
script" — pnpm's default node_modules/.bin shims are shell wrappers, not
plain Node scripts, which Hugo's exec-security check rejects. Switches
head.html from css.PostCSS to css.TailwindCSS, drops the now-unused
PostCSS toolchain, and adds pnpm-workspace.yaml's
preferSymlinkedExecutables so pnpm emits real symlinks Hugo can exec
(same fix already in use on roux).

Also updates the Dockerfile's build stage to hugomods/hugo:debian-node,
which bundles the matching Hugo Extended + Node versions, keeping ffmpeg
for the video-compression step.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012E2mmywuZyXmPBgSDtNdTL
This commit is contained in:
2026-09-13 17:50:28 +02:00
co-authored by Claude Sonnet 5
parent e426798c42
commit 71828c2379
7 changed files with 279 additions and 543 deletions
+9 -5
View File
@@ -1,16 +1,20 @@
# Stage 1: Build # Stage 1: Build
FROM node:22-alpine AS builder # hugomods image bundles Hugo Extended + Node at matching, tested versions —
# Hugo's css.TailwindCSS execs node_modules/.bin/tailwindcss during the build,
# and pnpm-workspace.yaml's preferSymlinkedExecutables makes that a plain
# symlink Hugo's exec-security check accepts (see layouts/partials/head.html).
FROM hugomods/hugo:debian-node-0.165.0 AS builder
# Install Hugo + FFmpeg (video compression) # Install FFmpeg (video compression)
RUN apk add --no-cache hugo ffmpeg git RUN apt-get update && apt-get install -y --no-install-recommends ffmpeg && rm -rf /var/lib/apt/lists/*
# Install pnpm # Install pnpm
RUN corepack enable && corepack prepare pnpm@latest --activate RUN npm install -g pnpm
WORKDIR /app WORKDIR /app
# Copy package files first (for layer caching) # Copy package files first (for layer caching)
COPY package.json pnpm-lock.yaml ./ COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
RUN pnpm install --frozen-lockfile RUN pnpm install --frozen-lockfile
# Copy source files # Copy source files
+3
View File
@@ -79,3 +79,6 @@ noClasses = true
[build] [build]
writeStats = true writeStats = true
[security.exec]
allow = ['^(dart-)?sass$', '^go$', '^git$', '^node$', '^npx$', '^tailwindcss$']
+2 -2
View File
@@ -112,8 +112,8 @@
href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Share+Tech+Mono&display=swap" href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Share+Tech+Mono&display=swap"
/></noscript> /></noscript>
<!-- CSS via Hugo Pipes + PostCSS + Tailwind v4 --> <!-- CSS via Hugo Pipes + Tailwind v4 (native css.TailwindCSS, no PostCSS) -->
{{- $css := resources.Get "css/main.css" | css.PostCSS -}} {{- $css := resources.Get "css/main.css" | css.TailwindCSS -}}
{{- if eq hugo.Environment "production" -}} {{- if eq hugo.Environment "production" -}}
{{- $css = $css | minify | fingerprint "sha256" -}} {{- $css = $css | minify | fingerprint "sha256" -}}
{{- end -}} {{- end -}}
+1 -4
View File
@@ -9,10 +9,7 @@
"format:check": "prettier --check \"layouts/**/*.html\" \"assets/**/*.css\" \"assets/**/*.js\" \"content/**/*.md\" \"*.toml\"" "format:check": "prettier --check \"layouts/**/*.html\" \"assets/**/*.css\" \"assets/**/*.js\" \"content/**/*.md\" \"*.toml\""
}, },
"devDependencies": { "devDependencies": {
"@tailwindcss/postcss": "^4.0.0", "@tailwindcss/cli": "^4.0.0",
"autoprefixer": "^10.4.0",
"postcss": "^8.5.0",
"postcss-cli": "^11.0.0",
"prettier": "^3.8.3", "prettier": "^3.8.3",
"prettier-plugin-go-template": "^0.0.15", "prettier-plugin-go-template": "^0.0.15",
"prettier-plugin-toml": "^2.0.6", "prettier-plugin-toml": "^2.0.6",
+261 -526
View File
File diff suppressed because it is too large Load Diff
+3
View File
@@ -0,0 +1,3 @@
preferSymlinkedExecutables: true
allowBuilds:
'@parcel/watcher': true
-6
View File
@@ -1,6 +0,0 @@
module.exports = {
plugins: {
"@tailwindcss/postcss": {},
autoprefixer: {},
},
};