minify assets in prod

packages/docs/package.json

@@ -6,7 +6,7 @@
     "prepare": "node ./scripts/fix-heroicons.js",
     "serve": "esmo --experimental-import-meta-resolve --experimental-json-modules --no-warnings --enable-source-maps src/main.tsx | pino-colada",
     "dev": "nodemon --inspect --exec \"pnpm serve\" --watch src --ext ts,tsx,md,css",
-    "start": "NODE_ENV=production pnpm serve",
+    "start": "cross-env NODE_ENV=production pnpm serve",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
@@ -15,6 +15,8 @@
     "alpinejs": "^3.7.1",
     "clsx": "^1.1.1",
     "compression": "^1.7.4",
+    "cross-env": "^7.0.3",
+    "cssnano": "^5.0.15",
     "esbuild": "^0.14.10",
     "esno": "^0.13.0",
     "express": "^4.17.2",
@@ -36,6 +38,7 @@
   "devDependencies": {
     "@types/browser-sync": "^2.26.3",
     "@types/compression": "^1.7.2",
+    "@types/cssnano": "^5.0.0",
     "@types/express": "^4.17.13",
     "@types/markdown-it": "^12.2.3",
     "@types/node": "*",

packages/docs/src/asset-builder/transform-esbuild.ts

@@ -10,6 +10,7 @@ export const transformEsbuild: AssetTransformer = {
         target: ["chrome89", "firefox89"],
         format: "esm",
         write: false,
+        minify: process.env.NODE_ENV === "production",
       })
 
       return {

packages/docs/src/asset-builder/transform-postcss.ts

@@ -1,5 +1,7 @@
+import autoprefixer from "autoprefixer"
+import cssnano from "cssnano"
 import { readFile } from "fs/promises"
-import postcss from "postcss"
+import postcss, { AcceptedPlugin } from "postcss"
 import tailwindcss from "tailwindcss"
 import { AssetTransformer } from "./asset-builder.js"
 
@@ -7,10 +9,15 @@ export const transformPostCss: AssetTransformer = {
   async transform(inputFile) {
     if (!inputFile.match(/\.css$/)) return
 
-    const result = await postcss(tailwindcss).process(
-      await readFile(inputFile),
-      { from: inputFile },
-    )
+    const plugins: AcceptedPlugin[] = [tailwindcss, autoprefixer]
+
+    if (process.env.NODE_ENV === "production") {
+      plugins.push(cssnano)
+    }
+
+    const result = await postcss(plugins).process(await readFile(inputFile), {
+      from: inputFile,
+    })
 
     return {
       content: result.css,