app/bun.lock

@@ -5,6 +5,7 @@
       "dependencies": {
         "@fastify/middie": "^9.0.3",
         "@fastify/static": "^8.1.1",
+        "@fullhuman/postcss-purgecss": "^7.0.2",
         "@markdoc/markdoc": "^0.5.1",
         "@mdx-js/rollup": "^3.1.0",
         "@sindresorhus/slugify": "^2.2.1",
@@ -16,6 +17,7 @@
         "flexsearch": "^0.8.158",
         "js-yaml": "^4.1.0",
         "nprogress": "^0.2.0",
+        "postcss": "^8.5.3",
         "prismjs": "^1.30.0",
         "reading-time-estimator": "^1.14.0",
         "remark-frontmatter": "^5.0.0",
@@ -213,6 +215,8 @@
 
     "@fastify/static": ["@fastify/static@8.1.1", "", { "dependencies": { "@fastify/accept-negotiator": "^2.0.0", "@fastify/send": "^3.2.0", "content-disposition": "^0.5.4", "fastify-plugin": "^5.0.0", "fastq": "^1.17.1", "glob": "^11.0.0" } }, "sha512-TW9eyVHJLytZNpBlSIqd0bl1giJkEaRaPZG+5AT3L/OBKq9U8D7g/OYmc2NPQZnzPURGhMt3IAWuyVkvd2nOkQ=="],
 
+    "@fullhuman/postcss-purgecss": ["@fullhuman/postcss-purgecss@7.0.2", "", { "dependencies": { "purgecss": "^7.0.2" }, "peerDependencies": { "postcss": "^8.0.0" } }, "sha512-U4zAXNaVztbDxO9EdcLp51F3UxxYsb/7DN89rFxFJhfk2Wua2pvw2Kf3HdspbPhW/wpHjSjsxWYoIlbTgRSjbQ=="],
+
     "@humanfs/core": ["@humanfs/core@0.19.1", "", {}, "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA=="],
 
     "@humanfs/node": ["@humanfs/node@0.16.6", "", { "dependencies": { "@humanfs/core": "^0.19.1", "@humanwhocodes/retry": "^0.3.0" } }, "sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw=="],
@@ -499,6 +503,8 @@
 
     "comma-separated-tokens": ["comma-separated-tokens@2.0.3", "", {}, "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg=="],
 
+    "commander": ["commander@12.1.0", "", {}, "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA=="],
+
     "concat-map": ["concat-map@0.0.1", "", {}, "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="],
 
     "content-disposition": ["content-disposition@0.5.4", "", { "dependencies": { "safe-buffer": "5.2.1" } }, "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ=="],
@@ -953,6 +959,8 @@
 
     "punycode": ["punycode@2.3.1", "", {}, "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg=="],
 
+    "purgecss": ["purgecss@7.0.2", "", { "dependencies": { "commander": "^12.1.0", "glob": "^11.0.0", "postcss": "^8.4.47", "postcss-selector-parser": "^6.1.2" }, "bin": { "purgecss": "bin/purgecss.js" } }, "sha512-4Ku8KoxNhOWi9X1XJ73XY5fv+I+hhTRedKpGs/2gaBKU8ijUiIKF/uyyIyh7Wo713bELSICF5/NswjcuOqYouQ=="],
+
     "queue-microtask": ["queue-microtask@1.2.3", "", {}, "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="],
 
     "quick-format-unescaped": ["quick-format-unescaped@4.0.4", "", {}, "sha512-tYC1Q1hgyRuHgloV/YXs2w15unPVh8qfu/qCTfhTYamaw7fyhumKa2yGpdSo87vY32rIclj+4fWYQXUMs9EHvg=="],
@@ -1241,6 +1249,8 @@
 
     "pino/process-warning": ["process-warning@4.0.1", "", {}, "sha512-3c2LzQ3rY9d0hc1emcsHhfT9Jwz0cChib/QN89oME2R451w5fy3f0afAhERFZAwrbDU43wk12d0ORBpDVME50Q=="],
 
+    "purgecss/postcss-selector-parser": ["postcss-selector-parser@6.1.2", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg=="],
+
     "remark-heading-id/unist-util-visit": ["unist-util-visit@1.4.1", "", { "dependencies": { "unist-util-visit-parents": "^2.0.0" } }, "sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw=="],
 
     "source-map-support/source-map": ["source-map@0.6.1", "", {}, "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="],

app/package.json

@@ -10,6 +10,7 @@
 	"dependencies": {
 		"@fastify/middie": "^9.0.3",
 		"@fastify/static": "^8.1.1",
+		"@fullhuman/postcss-purgecss": "^7.0.2",
 		"@markdoc/markdoc": "^0.5.1",
 		"@mdx-js/rollup": "^3.1.0",
 		"@sindresorhus/slugify": "^2.2.1",
@@ -21,6 +22,7 @@
 		"flexsearch": "^0.8.158",
 		"js-yaml": "^4.1.0",
 		"nprogress": "^0.2.0",
+		"postcss": "^8.5.3",
 		"prismjs": "^1.30.0",
 		"reading-time-estimator": "^1.14.0",
 		"remark-frontmatter": "^5.0.0",

app/vite.config.ts

@@ -1,4 +1,7 @@
+import type { Root } from "postcss";
+
 import remarkExtractFrontmatter from "./remarkExtractFrontmatter";
+import { purgeCSSPlugin } from "@fullhuman/postcss-purgecss";
 import prismjsVitePlugin from "vite-plugin-prismjs";
 import remarkFrontmatter from "remark-frontmatter";
 import remarkHeadingId from "./remarkHeadingId";
@@ -10,6 +13,14 @@ import mdx from "@mdx-js/rollup";
 import vike from "vike/plugin";
 import path from "node:path";
 
+type RemoveCommentRules = (root: Root) => void;
+
+const removeCommentRules: RemoveCommentRules = (root) => {
+	root.walkComments((comment) => {
+		comment.remove();
+	});
+};
+
 const __dirname = path.resolve();
 
 export default defineConfig({
@@ -40,6 +51,30 @@ export default defineConfig({
 		tailwindcss(),
 		telefunc(),
 	],
+	css: {
+		postcss: {
+			plugins: [
+				purgeCSSPlugin({
+					content: [
+						"./**/*.html",
+						"./**/*.js",
+						"./**/*.jsx",
+						"./**/*.ts",
+						"./**/*.tsx",
+						"./**/*.mdx",
+						"./**/*.md",
+					],
+					defaultExtractor: (content) => {
+						return content.match(/[\w-/:.\[\]\(\)_\[\]]+(?<!:)/g) || [];
+					},
+					variables: true,
+					keyframes: true,
+					fontFace: true,
+				}),
+				removeCommentRules,
+			],
+		},
+	},
 	build: {
 		target: "es2022",
 	},