feat: add purgecss (#1127)

Author: nmerget

.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+/debug_rejected.css

package-lock.json

@@ -14,7 +14,7 @@
     "generate:parse-options": "node scripts/generateParseOptions.js",
     "generate:tailwind": "tailwindcss -i ./src/tailwind.css -o ./src/components/Editor/tailwind.generated.css --full --minify",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives",
-    "postbuild": "npm run copy",
+    "postbuild": "npm run copy && node purgecss.js",
     "prepare": "husky",
     "preview": "vite preview"
   },
@@ -71,6 +71,7 @@
     "sass": "^1.81.0",
     "tailwindcss": "^3.4.17",
     "typescript": "^5.7.2",
+    "purgecss": "7.0.2",
     "vite": "^6.0.2"
   }
 }

package.json

@@ -0,0 +1,30 @@
+import { PurgeCSS } from "purgecss";
+
+import { writeFileSync } from "node:fs";
+
+new PurgeCSS()
+  .purge({
+    content: ["./dist/**/*.html", "./dist/**/*.js"],
+    css: ["./dist/**/*.css"],
+    defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
+    variables: true,
+    rejectedCss: true,
+    safelist: {
+      standard: [
+        "md:min-h-[282px]",
+        "md:w-[100vw]",
+        "md:w-[376px]",
+        "md:h-[100vh]",
+      ],
+      /* Keep density & all color properties/variables */
+      variables: [/-regular-/, /-default$/, /-hovered$/, /-pressed$/],
+      /* Some components require a safelist */
+      greedy: [/db-tabs/],
+    },
+  })
+  .then((purgeCSSResult) => {
+    for (const result of purgeCSSResult) {
+      writeFileSync(result.file, result.css);
+      writeFileSync(`debug_rejected.css`, result.rejectedCss || "");
+    }
+  });

purgecss.js

@@ -1,26 +1,10 @@
-/** @type {import('tailwindcss').Config} */
 import tokens from "@db-ui/foundations/build/tailwind/tailwind-tokens.json";
 
 export default {
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-  safelist: [
-    {
-      pattern: /./, // all but colors
-    },
-  ],
+  content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"],
+  plugins: [],
   theme: {
-    colors: [],
-    fontFamily: [],
-    fontSize: [],
-    screens: {
-      xs: "360px",
-      sm: "720px",
-      md: "1024px",
-      lg: "1440px",
-      xl: "1920px",
-    },
-    spacing: { 0: 0, ...tokens.spacing },
-    boxShadow: tokens.elevation,
+    ...tokens,
     gap: ({ theme }) => ({
       ...theme("spacing"),
     }),