Merge pull request #9 from GDSC-Hongik/refactor/wow-ui-panda.config.ts

[Refactor] Panda CSS에서 사용되지 않는 변수 제거

apps/wow-docs/panda.config.ts

@@ -1,5 +1,6 @@
 import { defineConfig } from "@pandacss/dev";
 import { tokens, textStyles } from "theme";
+import { removeUnusedCssVars, removeUnusedKeyframes } from "theme/utils";
 
 export default defineConfig({
   preflight: true,
@@ -14,4 +15,11 @@ export default defineConfig({
     tokens,
     textStyles,
   },
+  hooks: {
+    "cssgen:done": ({ artifact, content }) => {
+      if (artifact === "styles.css") {
+        return removeUnusedCssVars(removeUnusedKeyframes(content));
+      }
+    },
+  },
 });

package.json

@@ -23,6 +23,7 @@
     "@changesets/changelog-git": "^0.2.0",
     "@changesets/cli": "^2.27.1",
     "@pandacss/dev": "^0.39.0",
+    "theme": "workspace:*",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@svgr/rollup": "^8.1.0",
@@ -47,6 +48,7 @@
     "eslint-plugin-storybook": "^0.6.15",
     "husky": "^8.0.0",
     "lint-staged": "^15.2.2",
+    "postcss": "^8.4.38",
     "prettier": "^3.2.5",
     "rollup": "^4.17.2",
     "rollup-plugin-babel": "^4.4.0",
@@ -55,10 +57,7 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-url": "^3.0.1",
     "turbo": "latest",
-    "typescript": "^5.3.3",
-    "@typescript-eslint/parser": "^7.1.0",
-    "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.29.1"
+    "typescript": "^5.3.3"
   },
   "packageManager": "[email protected]",
   "engines": {

packages/theme/package.json

@@ -3,9 +3,10 @@
   "version": "0.0.0",
   "private": true,
   "type": "module",
-  "files": [
-    "theme.js"
-  ],
+  "exports": {
+    ".": "./index.ts",
+    "./utils": "./utils/index.ts"
+  },
   "devDependencies": {
     "@pandacss/dev": "^0.39.0"
   },

packages/theme/utils/index.ts

@@ -0,0 +1,2 @@
+export * from "./remove-unused-css-vars.js";
+export * from "./remove-unused-keyframes.js";

packages/theme/utils/remove-unused-css-vars.ts

@@ -0,0 +1,78 @@
+import postcss from "postcss";
+
+interface UseRecord {
+  uses: number;
+  dependencies: Set<string>;
+  declarations: Set<postcss.Declaration>;
+}
+
+const varRegex = /var\(\s*(?<name>--[^ ,);]+)/g;
+
+export const removeUnusedCssVars = (css: string) => {
+  const root = postcss.parse(css);
+
+  const records = new Map<string, UseRecord>();
+
+  const getRecord = (variable: string): UseRecord => {
+    let record = records.get(variable);
+    if (!record) {
+      record = { uses: 0, dependencies: new Set(), declarations: new Set() };
+      records.set(variable, record);
+    }
+    return record;
+  };
+
+  const registerUse = (variable: string, ignoreList = new Set<string>()) => {
+    const record = getRecord(variable);
+    record.uses++;
+    ignoreList.add(variable);
+    for (const dependency of record.dependencies) {
+      if (!ignoreList.has(dependency)) registerUse(dependency, ignoreList);
+    }
+  };
+
+  const registerDependency = (variable: string, dependency: string) => {
+    const record = getRecord(variable);
+    record.dependencies.add(dependency);
+  };
+
+  root.walkDecls((decl) => {
+    const parent = decl.parent;
+    if (!parent) return;
+
+    if (
+      parent.type === "rule" &&
+      (parent as postcss.Rule).selector === ":root"
+    ) {
+      return;
+    }
+
+    const isVar = decl.prop.startsWith("--");
+
+    if (isVar) getRecord(decl.prop).declarations.add(decl);
+
+    if (!decl.value.includes("var(")) return;
+
+    for (const match of decl.value.matchAll(varRegex)) {
+      const variable = match.groups?.name?.trim();
+      if (!variable) continue;
+
+      if (isVar) {
+        registerDependency(decl.prop, variable);
+      } else {
+        registerUse(variable);
+      }
+    }
+  });
+
+  for (const { uses, declarations } of records.values()) {
+    if (uses === 0) {
+      for (const decl of declarations) {
+        if (decl.parent?.nodes.length === 1) decl.parent?.remove();
+        else decl.remove();
+      }
+    }
+  }
+
+  return root.toString();
+};

packages/theme/utils/remove-unused-keyframes.ts

@@ -0,0 +1,32 @@
+import postcss from "postcss";
+
+export const removeUnusedKeyframes = (css: string) => {
+  const root = postcss.parse(css);
+
+  const keyframes = new Map<string, boolean>();
+
+  root.walk((node) => {
+    if (node.type === "atrule" && node.name === "keyframes") {
+      keyframes.set(node.params, false);
+    } else if (node.type === "decl") {
+      const decl = node;
+      const animationName =
+        decl.prop === "animation" ? decl.value.split(" ")[0] || "" : decl.value;
+
+      if (
+        (decl.prop === "animation" || decl.prop === "animation-name") &&
+        keyframes.has(animationName)
+      ) {
+        keyframes.set(animationName, true);
+      }
+    }
+  });
+
+  root.walkAtRules("keyframes", (rule) => {
+    if (keyframes.get(rule.params) === false) {
+      rule.remove();
+    }
+  });
+
+  return root.toString();
+};

packages/wow-ui/panda.config.ts

@@ -1,4 +1,6 @@
 import { defineConfig } from "@pandacss/dev";
+import { removeUnusedCssVars, removeUnusedKeyframes } from "theme/utils";
+
 export default defineConfig({
   preflight: true,
   minify: true,
@@ -7,5 +9,12 @@ export default defineConfig({
   polyfill: true,
   include: ["./src/**/*.{js,jsx,ts,tsx}"],
   exclude: [],
+  hooks: {
+    "cssgen:done": ({ artifact, content }) => {
+      if (artifact === "styles.css") {
+        return removeUnusedCssVars(removeUnusedKeyframes(content));
+      }
+    },
+  },
   outdir: "styled-system",
 });