Zac Gaetano
3b89cf2d5f
Three bugs found during task 20 verify, all fixed: 1. Tailwind CLI does NOT read postcss.config.js. Switched Dockerfile to npx postcss + postcss-cli so the postcss plugin chain actually runs. 2. postcss-import was not installed but app.css uses @import for the primitive component files. Added postcss-import + cssnano (for prod minification under --env production). 3. @import statements must come BEFORE any other rules per CSS spec. app.css had @tailwind base/components ABOVE @import, so postcss-import silently skipped every component @import. Moved all @imports to the top, @tailwind directives below. Bundle went from 121KB with 0 wd-* classes to 138KB with 116 wd-* classes. Also added tailwind safelist for wd-/is-/nav-dev-badge so the wave-2 migration of HTML files cannot accidentally tree-shake primitives.
21 lines
687 B
Docker
21 lines
687 B
Docker
# Stage 1: build CSS bundle
|
|
FROM node:20-alpine AS css-build
|
|
WORKDIR /build
|
|
|
|
# Copy only the files needed to install deps (better cache layering)
|
|
COPY package.json package-lock.json* ./
|
|
RUN npm install --no-audit --no-fund
|
|
|
|
# Copy source CSS + tailwind config + every HTML file (tailwind scans HTML to determine which utilities to emit)
|
|
COPY tailwind.config.js postcss.config.js ./
|
|
COPY src/ ./src/
|
|
COPY public/ ./public/
|
|
|
|
# Build into public/dist/app.css
|
|
RUN npx postcss ./src/css/app.css -o ./public/dist/app.css --env production
|
|
|
|
# Stage 2: runtime
|
|
FROM nginx:alpine
|
|
COPY --from=css-build /build/public/ /usr/share/nginx/html/
|
|
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
|
EXPOSE 80
|