@csszyx/unplugin 0.3.1 → 0.5.0

package/dist/webpack.cjs

@@ -200,6 +200,194 @@ function transformIndexHtml(html, mangleMap, checksum, options = {}) {
   return injectHydrationData(html, mangleMap, checksum, options);
 }
 
+// src/theme-scanner.ts
+var EMPTY_THEME = { colors: [], spacings: [], fonts: [], radii: [], shadows: [] };
+function stripLayerWrappers(css) {
+  let result = "";
+  let i = 0;
+  while (i < css.length) {
+    const layerIdx = css.indexOf("@layer", i);
+    if (layerIdx === -1) {
+      result += css.slice(i);
+      break;
+    }
+    result += css.slice(i, layerIdx);
+    const openBrace = css.indexOf("{", layerIdx);
+    if (openBrace === -1) {
+      result += css.slice(layerIdx);
+      break;
+    }
+    let depth = 0;
+    let j = openBrace;
+    while (j < css.length) {
+      if (css[j] === "{") {
+        depth++;
+      }
+      if (css[j] === "}") {
+        depth--;
+        if (depth === 0) {
+          result += css.slice(openBrace + 1, j);
+          i = j + 1;
+          break;
+        }
+      }
+      j++;
+    }
+    if (depth !== 0) {
+      result += css.slice(openBrace);
+      break;
+    }
+  }
+  return result;
+}
+function extractThemeBlocks(css) {
+  const blocks = [];
+  const themeStart = /@theme\s+(?:inline\s+)?\{|@theme\{/g;
+  let match;
+  while ((match = themeStart.exec(css)) !== null) {
+    const openPos = css.indexOf("{", match.index);
+    let depth = 0;
+    let j = openPos;
+    while (j < css.length) {
+      if (css[j] === "{") {
+        depth++;
+      }
+      if (css[j] === "}") {
+        depth--;
+        if (depth === 0) {
+          blocks.push(css.slice(openPos + 1, j));
+          break;
+        }
+      }
+      j++;
+    }
+  }
+  return blocks;
+}
+function categorizeProperty(prop) {
+  const categoryMap = [
+    ["color-", "colors"],
+    ["spacing-", "spacings"],
+    ["font-", "fonts"],
+    ["radius-", "radii"],
+    ["shadow-", "shadows"]
+  ];
+  for (const [prefix, category] of categoryMap) {
+    if (prop.startsWith(prefix)) {
+      let token = prop.slice(prefix.length);
+      token = token.replace(/-\d+$/, "");
+      if (token) {
+        return { category, token };
+      }
+    }
+  }
+  return null;
+}
+function parseThemeBlocks(cssContent) {
+  const result = {
+    colors: /* @__PURE__ */ new Set(),
+    spacings: /* @__PURE__ */ new Set(),
+    fonts: /* @__PURE__ */ new Set(),
+    radii: /* @__PURE__ */ new Set(),
+    shadows: /* @__PURE__ */ new Set()
+  };
+  const stripped = stripLayerWrappers(cssContent);
+  const blocks = extractThemeBlocks(stripped);
+  const propPattern = /--([a-z][a-z0-9-]*)(?:\s*:[^;]+)?;/g;
+  for (const block of blocks) {
+    let match;
+    while ((match = propPattern.exec(block)) !== null) {
+      const categorized = categorizeProperty(match[1]);
+      if (categorized) {
+        result[categorized.category].add(categorized.token);
+      }
+    }
+    propPattern.lastIndex = 0;
+  }
+  return {
+    colors: [...result.colors].sort(),
+    spacings: [...result.spacings].sort(),
+    fonts: [...result.fonts].sort(),
+    radii: [...result.radii].sort(),
+    shadows: [...result.shadows].sort()
+  };
+}
+function mergeThemes(themes) {
+  if (themes.length === 0) {
+    return { ...EMPTY_THEME };
+  }
+  const merged = {
+    colors: /* @__PURE__ */ new Set(),
+    spacings: /* @__PURE__ */ new Set(),
+    fonts: /* @__PURE__ */ new Set(),
+    radii: /* @__PURE__ */ new Set(),
+    shadows: /* @__PURE__ */ new Set()
+  };
+  for (const theme of themes) {
+    for (const cat of Object.keys(merged)) {
+      for (const token of theme[cat]) {
+        merged[cat].add(token);
+      }
+    }
+  }
+  return {
+    colors: [...merged.colors].sort(),
+    spacings: [...merged.spacings].sort(),
+    fonts: [...merged.fonts].sort(),
+    radii: [...merged.radii].sort(),
+    shadows: [...merged.shadows].sort()
+  };
+}
+
+// src/theme-type-writer.ts
+var import_node_fs = require("fs");
+var import_node_path = require("path");
+function generateThemeDts(opts) {
+  const { theme, sourceFiles } = opts;
+  const timestamp = (/* @__PURE__ */ new Date()).toISOString();
+  const sources = sourceFiles.join(", ");
+  const toUnion = (tokens) => tokens.map((t) => `'${t}'`).join(" | ");
+  const entries = [];
+  if (theme.colors.length > 0) {
+    entries.push(`        colors: ${toUnion(theme.colors)};`);
+  }
+  if (theme.spacings.length > 0) {
+    entries.push(`        spacings: ${toUnion(theme.spacings)};`);
+  }
+  if (theme.fonts.length > 0) {
+    entries.push(`        fonts: ${toUnion(theme.fonts)};`);
+  }
+  if (theme.radii.length > 0) {
+    entries.push(`        radii: ${toUnion(theme.radii)};`);
+  }
+  if (theme.shadows.length > 0) {
+    entries.push(`        shadows: ${toUnion(theme.shadows)};`);
+  }
+  return [
+    "// Auto-generated by csszyx theme-scanner \u2014 DO NOT EDIT",
+    `// Source: ${sources}`,
+    `// Updated: ${timestamp}`,
+    "",
+    "declare module '@csszyx/compiler' {",
+    "    /**",
+    "     * Custom design tokens extracted from @theme blocks.",
+    "     * These tokens are surfaced in sz prop IntelliSense.",
+    "     */",
+    "    interface CustomTheme {",
+    ...entries,
+    "    }",
+    "}",
+    "",
+    "export {};",
+    ""
+  ].join("\n");
+}
+function writeThemeDts(opts) {
+  const content = generateThemeDts(opts);
+  (0, import_node_fs.mkdirSync)((0, import_node_path.dirname)(opts.outputPath), { recursive: true });
+  (0, import_node_fs.writeFileSync)(opts.outputPath, content, "utf-8");
+}
+
 // src/virtual-modules.ts
 var VIRTUAL_MODULE_ID = "virtual:csszyx/mangle-map";
 var RESOLVED_VIRTUAL_MODULE_ID = "\0" + VIRTUAL_MODULE_ID;
@@ -252,19 +440,259 @@ function resolveVirtualModule(id) {
 // src/unplugin.ts
 var CHECKSUM_PLACEHOLDER = "___CSSZYX_CHECKSUM___";
 var MANGLE_MAP_PLACEHOLDER = "___CSSZYX_MANGLE_MAP___";
+var _hasWarnedTsConfig = false;
+function runThemeScan(rootDir, scanCss) {
+  if (!scanCss) {
+    return;
+  }
+  const patterns = Array.isArray(scanCss) ? scanCss : [scanCss];
+  const sourceFiles = [];
+  for (const pattern of patterns) {
+    const resolved = path.isAbsolute(pattern) ? pattern : path.join(rootDir, pattern);
+    if (fs.existsSync(resolved)) {
+      sourceFiles.push(resolved);
+    }
+  }
+  if (sourceFiles.length === 0) {
+    return;
+  }
+  const themes = sourceFiles.map((f) => {
+    try {
+      return parseThemeBlocks(fs.readFileSync(f, "utf-8"));
+    } catch {
+      return null;
+    }
+  }).filter((t) => t !== null);
+  const merged = mergeThemes(themes);
+  const outputPath = path.join(rootDir, ".csszyx", "theme.d.ts");
+  writeThemeDts({ outputPath, theme: merged, sourceFiles });
+  if (!_hasWarnedTsConfig) {
+    _hasWarnedTsConfig = true;
+    try {
+      const checkFile = (cfgPath) => {
+        if (fs.existsSync(cfgPath)) {
+          const content = fs.readFileSync(cfgPath, "utf-8");
+          if (!content.includes(".csszyx")) {
+            console.warn(`
+\x1B[33m\u26A0\uFE0F CSSzyx: Theme Auto-Scan enabled, but TypeScript isn't configured. Run "npx @csszyx/cli init" to fix.\x1B[0m
+`);
+          }
+          return true;
+        }
+        return false;
+      };
+      if (!checkFile(path.join(rootDir, "tsconfig.json"))) {
+        checkFile(path.join(rootDir, "tsconfig.app.json"));
+      }
+    } catch {
+    }
+  }
+}
+function mangleCodeClassesSync(code, mangleMap) {
+  function mangleClassString(classString) {
+    return classString.split(/\s+/).filter(Boolean).map((cls) => {
+      return mangleMap[cls.replace(/\\(.)/g, "$1")] || cls;
+    }).join(" ");
+  }
+  let result = code.replace(/(?:class(?:Name)?|sz)[:=]\s*"((?:[^"\\]|\\.)*)"/g, (match, classes) => {
+    const mangled = mangleClassString(classes);
+    if (mangled === classes) {
+      return match;
+    }
+    return match.replace(classes, mangled);
+  }).replace(/(?:class(?:Name)?|sz)[:=]\s*'((?:[^'\\]|\\.)*)'/g, (match, classes) => {
+    const mangled = mangleClassString(classes);
+    if (mangled === classes) {
+      return match;
+    }
+    return match.replace(classes, mangled);
+  });
+  result = result.replace(/className:\s*`([^`]+)`/g, (fullMatch, tplContent) => {
+    let changed = false;
+    let out = "";
+    let i = 0;
+    while (i < tplContent.length) {
+      const interStart = tplContent.indexOf("${", i);
+      if (interStart === -1) {
+        const quasi2 = tplContent.slice(i);
+        const trimmed2 = quasi2.trim();
+        if (trimmed2) {
+          const m = mangleClassString(trimmed2);
+          if (m !== trimmed2) {
+            changed = true;
+            out += quasi2.replace(trimmed2, m);
+          } else {
+            out += quasi2;
+          }
+        } else {
+          out += quasi2;
+        }
+        break;
+      }
+      const quasi = tplContent.slice(i, interStart);
+      const trimmed = quasi.trim();
+      if (trimmed) {
+        const m = mangleClassString(trimmed);
+        if (m !== trimmed) {
+          changed = true;
+          out += quasi.replace(trimmed, m);
+        } else {
+          out += quasi;
+        }
+      } else {
+        out += quasi;
+      }
+      let j = interStart + 2;
+      let depth = 0;
+      while (j < tplContent.length) {
+        if (tplContent[j] === "{") {
+          depth++;
+        } else if (tplContent[j] === "}") {
+          if (depth === 0) {
+            j++;
+            break;
+          }
+          depth--;
+        }
+        j++;
+      }
+      const interInner = tplContent.slice(interStart + 2, j - 1);
+      const mangledInner = interInner.replace(/"([^"]*)"/g, (qm, inner) => {
+        const parts = inner.split(/\s+/).filter(Boolean);
+        if (parts.length === 0) {
+          return qm;
+        }
+        const m = parts.map((p) => mangleMap[p] || p).join(" ");
+        if (m === inner) {
+          return qm;
+        }
+        changed = true;
+        return '"' + m + '"';
+      });
+      out += "${" + mangledInner + "}";
+      i = j;
+    }
+    return changed ? "className:`" + out + "`" : fullMatch;
+  });
+  {
+    const marker = "className:";
+    let searchFrom = 0;
+    let out = "";
+    while (searchFrom < result.length) {
+      const idx = result.indexOf(marker, searchFrom);
+      if (idx === -1) {
+        out += result.slice(searchFrom);
+        break;
+      }
+      out += result.slice(searchFrom, idx + marker.length);
+      const afterColon = idx + marker.length;
+      let exprStart = afterColon;
+      while (exprStart < result.length && result[exprStart] === " ") {
+        exprStart++;
+      }
+      const firstChar = result[exprStart];
+      if (firstChar === '"' || firstChar === "'" || firstChar === "`") {
+        searchFrom = afterColon;
+        continue;
+      }
+      let depth = 0;
+      let j = afterColon;
+      while (j < result.length) {
+        const ch = result[j];
+        if (ch === "(" || ch === "[") {
+          depth++;
+        } else if (ch === ")" || ch === "]") {
+          if (depth === 0) {
+            break;
+          }
+          depth--;
+        } else if (depth === 0 && (ch === "," || ch === ";" || ch === "\n" || ch === "}")) {
+          break;
+        }
+        j++;
+      }
+      const expr = result.slice(afterColon, j);
+      const qIdx = expr.indexOf("?");
+      if (qIdx === -1 || !expr.slice(qIdx).includes(":")) {
+        out += expr;
+        searchFrom = j;
+        continue;
+      }
+      let changed = false;
+      const mangled = expr.replace(/"([^"]*)"/g, (qm, inner) => {
+        const parts = inner.split(/\s+/).filter(Boolean);
+        if (parts.length === 0) {
+          return qm;
+        }
+        const mangledStr = parts.map((p) => mangleMap[p] || p).join(" ");
+        if (mangledStr !== inner) {
+          changed = true;
+          return '"' + mangledStr + '"';
+        }
+        return qm;
+      });
+      out += changed ? mangled : expr;
+      searchFrom = j;
+    }
+    result = out;
+  }
+  result = result.replace(/(?<=(?:[,(]|&&)\s*)"([^"]+)"/g, (match, inner) => {
+    const tokens = inner.split(/\s+/).filter(Boolean);
+    if (tokens.length === 0) {
+      return match;
+    }
+    let changed = false;
+    const mangled = [];
+    for (const t of tokens) {
+      const m = mangleMap[t];
+      if (m === void 0) {
+        return match;
+      }
+      if (m !== t) {
+        changed = true;
+      }
+      mangled.push(m);
+    }
+    if (!changed) {
+      return match;
+    }
+    return '"' + mangled.join(" ") + '"';
+  });
+  return result;
+}
 function createCsszyxPlugins(options = {}) {
   const manglingEnabled = options.production?.mangle !== false;
   const state = {
     classes: /* @__PURE__ */ new Set(),
     mangleMap: {},
     checksum: "",
-    finalized: false
+    finalized: false,
+    rootDir: process.cwd()
   };
-  const SAFELIST_FILENAME = "csszyx-classes.js";
+  const SAFELIST_FILENAME = "csszyx-classes.html";
   const SOURCE_EXTENSIONS = /* @__PURE__ */ new Set([".tsx", ".jsx", ".ts", ".js"]);
   const IGNORE_DIRS = /* @__PURE__ */ new Set(["node_modules", ".next", ".git", "dist", "build", ".turbo"]);
-  function prescanAndWriteClasses(rootDir) {
+  function writeSafelistFile(classes) {
+    if (classes.size === 0) {
+      return;
+    }
+    const safelistPath = path.join(state.rootDir, SAFELIST_FILENAME);
+    const classList = Array.from(classes).join(" ");
+    const content = `<!-- Auto-generated by csszyx \u2014 DO NOT EDIT -->
+<!-- Tailwind CSS scans this file for class name detection -->
+<div class="${classList}"><div class="${classList}">x</div><div class="${classList}">x</div></div>
+`;
+    try {
+      const existing = fs.existsSync(safelistPath) ? fs.readFileSync(safelistPath, "utf-8") : "";
+      if (existing !== content) {
+        fs.writeFileSync(safelistPath, content);
+      }
+    } catch {
+    }
+  }
+  function prescanAndWriteClasses() {
     const discoveredClasses = /* @__PURE__ */ new Set();
+    const rawDiscoveredClasses = /* @__PURE__ */ new Set();
     function scanDir(dir) {
       let entries;
       try {
@@ -291,6 +719,9 @@ function createCsszyxPlugins(options = {}) {
             for (const cls of result.classes) {
               discoveredClasses.add(cls);
             }
+            for (const cls of result.rawClassNames) {
+              rawDiscoveredClasses.add(cls);
+            }
             if (result.usesRuntime) {
               const szCallRe = /_sz\(\s*\{/g;
               let szMatch;
@@ -345,21 +776,12 @@ function createCsszyxPlugins(options = {}) {
         }
       }
     }
-    scanDir(rootDir);
+    scanDir(state.rootDir);
     for (const cls of discoveredClasses) {
       state.classes.add(cls);
     }
-    if (discoveredClasses.size > 0) {
-      const safelistPath = path.join(rootDir, SAFELIST_FILENAME);
-      const content = '// Auto-generated by csszyx \u2014 DO NOT EDIT\n// Tailwind CSS scans this file for class name detection\nexport default "' + Array.from(discoveredClasses).join(" ") + '";\n';
-      try {
-        const existing = fs.existsSync(safelistPath) ? fs.readFileSync(safelistPath, "utf-8") : "";
-        if (existing !== content) {
-          fs.writeFileSync(safelistPath, content);
-        }
-      } catch {
-      }
-    }
+    const safelistClasses = /* @__PURE__ */ new Set([...discoveredClasses, ...rawDiscoveredClasses]);
+    writeSafelistFile(safelistClasses);
   }
   function extractClasses(code) {
     const dqPattern = /(?:class(?:Name)?|sz)[:=]\s*"([^"]*)"/g;
@@ -407,47 +829,8 @@ function createCsszyxPlugins(options = {}) {
     state.checksum = (0, import_core.compute_mangle_checksum)(state.mangleMap);
     state.finalized = true;
   }
-  function mangleClassString(classString) {
-    return classString.split(/\s+/).map((cls) => state.mangleMap[cls] || cls).join(" ");
-  }
   function mangleCodeClasses(code) {
-    let result = code.replace(/(?:class(?:Name)?|sz)[:=]\s*"([^"]*)"/g, (match, classes) => {
-      const mangled = mangleClassString(classes);
-      if (mangled === classes) {
-        return match;
-      }
-      return match.replace(classes, mangled);
-    }).replace(/(?:class(?:Name)?|sz)[:=]\s*'([^']*)'/g, (match, classes) => {
-      const mangled = mangleClassString(classes);
-      if (mangled === classes) {
-        return match;
-      }
-      return match.replace(classes, mangled);
-    });
-    result = result.replace(/className:(?!["'])([^,;}\])\n]+)/g, (fullMatch, expr) => {
-      const qIdx = expr.indexOf("?");
-      if (qIdx === -1 || !expr.slice(qIdx).includes(":")) {
-        return fullMatch;
-      }
-      let changed = false;
-      const mangled = expr.replace(/"([^"]*)"/g, (qm, inner) => {
-        const parts = inner.split(/\s+/).filter(Boolean);
-        if (parts.length === 0) {
-          return qm;
-        }
-        const mangledStr = parts.map((p) => state.mangleMap[p] || p).join(" ");
-        if (mangledStr !== inner) {
-          changed = true;
-          return '"' + mangledStr + '"';
-        }
-        return qm;
-      });
-      if (changed) {
-        return "className:" + mangled;
-      }
-      return fullMatch;
-    });
-    return result;
+    return mangleCodeClassesSync(code, state.mangleMap);
   }
   function replacePlaceholders(code) {
     let result = code;
@@ -455,7 +838,9 @@ function createCsszyxPlugins(options = {}) {
       result = result.split(CHECKSUM_PLACEHOLDER).join(state.checksum);
     }
     if (result.includes(MANGLE_MAP_PLACEHOLDER)) {
-      result = result.split(MANGLE_MAP_PLACEHOLDER).join(JSON.stringify(state.mangleMap));
+      const jsonMap = JSON.stringify(state.mangleMap);
+      const escapedMap = result.includes("eval(") ? jsonMap.replace(/"/g, '\\"') : jsonMap;
+      result = result.split(MANGLE_MAP_PLACEHOLDER).join(escapedMap);
     }
     return result;
   }
@@ -517,12 +902,18 @@ function createCsszyxPlugins(options = {}) {
         if (hasTailwindImport && state.classes.size > 0) {
           const candidates = Array.from(state.classes).filter((c) => c.length >= 2 && /^[a-z]/.test(c)).join(" ");
           if (candidates) {
-            const inlineDirective = `@source inline("${candidates}");
+            const safelistPath = path.join(state.rootDir, SAFELIST_FILENAME).replace(/\\/g, "/");
+            const cssDir = path.dirname(id).replace(/\\/g, "/");
+            let relPath = path.posix.relative(cssDir, safelistPath);
+            if (!relPath.startsWith(".")) {
+              relPath = "./" + relPath;
+            }
+            const sourceDirective = `@source "${relPath}";
 `;
             const transformed2 = code.replace(
               /(@import\s+["']tailwindcss[^"']*["'];)/,
               `$1
-${inlineDirective}`
+${sourceDirective}`
             );
             if (transformed2 !== code) {
               return { code: transformed2, map: null };
@@ -533,6 +924,7 @@ ${inlineDirective}`
       }
       let transformedCode = code;
       let usesRuntime = false;
+      let usesMerge = false;
       let usesColorVar = false;
       let transformed = false;
       let szClasses;
@@ -554,9 +946,16 @@ ${inlineDirective}`
           const result = (0, import_compiler.transformSourceCode)(code);
           transformedCode = result.code;
           usesRuntime = result.usesRuntime;
+          usesMerge = result.usesMerge;
           usesColorVar = result.usesColorVar;
           transformed = result.transformed;
           szClasses = result.classes;
+          if (result.diagnostics.length > 0 && process.env.NODE_ENV !== "production") {
+            for (const msg of result.diagnostics) {
+              this.warn(`[csszyx] ${id}
+  ${msg}`);
+            }
+          }
         }
       }
       if (transformedCode.includes("<html") && /layout|Root|Document|app\\.tsx?$/i.test(id)) {
@@ -576,18 +975,32 @@ ${inlineDirective}`
         if (usesRuntime) {
           imports.push("_sz");
         }
+        if (usesMerge) {
+          imports.push("_szMerge");
+        }
         if (usesColorVar) {
           imports.push("__szColorVar");
         }
-        if (imports.length > 0 && !transformedCode.includes("from 'csszyx/lite'")) {
-          const importStmt = `import { ${imports.join(", ")} } from 'csszyx/lite';
-`;
-          const directiveMatch = transformedCode.match(/^['"]use (client|server)['"];?\s*/);
-          if (directiveMatch) {
-            const directive = directiveMatch[0];
-            transformedCode = transformedCode.replace(directive, `${directive}${importStmt}`);
+        const needed = imports.filter(
+          (name) => !new RegExp(`\\{[^}]*\\b${name}\\b[^}]*\\}\\s*from\\s*['"]@csszyx/runtime['"]`).test(transformedCode)
+        );
+        if (needed.length > 0) {
+          const existingImport = transformedCode.match(/^(import\s*\{[^}]*)\}\s*from\s*'@csszyx\/runtime'/m);
+          if (existingImport) {
+            transformedCode = transformedCode.replace(
+              existingImport[0],
+              `${existingImport[1]}, ${needed.join(", ")} } from '@csszyx/runtime'`
+            );
           } else {
-            transformedCode = `${importStmt}${transformedCode}`;
+            const importStmt = `import { ${needed.join(", ")} } from '@csszyx/runtime';
+`;
+            const directiveMatch = transformedCode.match(/^['"]use (client|server)['"];?\s*/);
+            if (directiveMatch) {
+              const directive = directiveMatch[0];
+              transformedCode = transformedCode.replace(directive, `${directive}${importStmt}`);
+            } else {
+              transformedCode = `${importStmt}${transformedCode}`;
+            }
           }
           transformed = true;
         }
@@ -607,6 +1020,9 @@ ${inlineDirective}`
     /** Finalizes the mangle map after all source modules have been processed. */
     buildEnd() {
       finalizeMangleMap();
+      if (manglingEnabled && Object.keys(state.mangleMap).length > 0) {
+        globalThis.__csszyx_ssr_mangle_map = state.mangleMap;
+      }
     },
     /**
      * Webpack hook: pre-scans source files before compilation for Tailwind class discovery.
@@ -614,23 +1030,94 @@ ${inlineDirective}`
      */
     webpack(compiler) {
       compiler.hooks.beforeCompile.tap("csszyx:prescan", () => {
+        const root = compiler.context || process.cwd();
+        state.rootDir = root;
         if (state.classes.size === 0) {
-          prescanAndWriteClasses(compiler.context || process.cwd());
+          prescanAndWriteClasses();
         }
+        runThemeScan(root, options.build?.scanCss);
       });
+      if (options.build?.scanCss) {
+        const patterns = Array.isArray(options.build.scanCss) ? options.build.scanCss : [options.build.scanCss];
+        compiler.hooks.thisCompilation.tap("csszyx:theme-deps", (compilation) => {
+          const root = compiler.context || process.cwd();
+          for (const pattern of patterns) {
+            const resolved = path.isAbsolute(pattern) ? pattern : path.join(root, pattern);
+            if (fs.existsSync(resolved)) {
+              compilation.fileDependencies.add(resolved);
+            }
+          }
+        });
+      }
     },
     vite: {
       /**
        * Vite hook: pre-scans source files when config is resolved.
+       * Also runs theme scan to generate .csszyx/theme.d.ts if scanCss is configured.
        * @param config - the resolved Vite configuration object
        */
       configResolved(config) {
-        prescanAndWriteClasses(config.root || process.cwd());
+        const root = config.root || process.cwd();
+        state.rootDir = root;
+        prescanAndWriteClasses();
+        runThemeScan(root, options.build?.scanCss);
+      },
+      /**
+       * Vite HMR hook: re-runs theme scan when a watched CSS file changes,
+       * and incrementally updates csszyx-classes.html when a source file gains new sz classes.
+       * @param ctx - HMR context containing the changed file
+       */
+      handleHotUpdate(ctx) {
+        const scanCss = options.build?.scanCss;
+        if (scanCss) {
+          const patterns = Array.isArray(scanCss) ? scanCss : [scanCss];
+          const root = ctx.server.config.root || process.cwd();
+          const isWatched = patterns.some((p) => {
+            const resolved = path.isAbsolute(p) ? p : path.join(root, p);
+            return ctx.file === resolved;
+          });
+          if (isWatched) {
+            runThemeScan(root, scanCss);
+          }
+        }
+        if (!SOURCE_EXTENSIONS.has(path.extname(ctx.file))) {
+          return;
+        }
+        if (ctx.file.includes("node_modules")) {
+          return;
+        }
+        let fileContent, result;
+        try {
+          fileContent = fs.readFileSync(ctx.file, "utf-8");
+        } catch {
+          return;
+        }
+        if (!fileContent.includes("sz=") && !/\bsz\s*:\s*["'{]/.test(fileContent)) {
+          return;
+        }
+        try {
+          result = (0, import_compiler.transformSourceCode)(fileContent);
+        } catch {
+          return;
+        }
+        if (!result.transformed) {
+          return;
+        }
+        const sizeBefore = state.classes.size;
+        for (const cls of result.classes) {
+          state.classes.add(cls);
+        }
+        if (state.classes.size > sizeBefore) {
+          writeSafelistFile(state.classes);
+          const safelistPath = path.join(state.rootDir, SAFELIST_FILENAME);
+          ctx.server.watcher.emit("change", safelistPath);
+        }
       },
       transformIndexHtml: {
         order: "pre",
         /**
          * Injects hydration data (mangle map + checksum) into the HTML document.
+         * Also mangles class attributes in SSR-rendered HTML so they match mangled CSS selectors.
          * @param html - the raw HTML string to transform
          * @returns transformed HTML with injected hydration data
          */
@@ -665,10 +1152,23 @@ ${inlineDirective}`
           },
           (assets) => {
             finalizeMangleMap();
+            const isWebpackDevMode = compiler.options.mode === "development";
+            const manifestData = {
+              version: "0.4.0",
+              buildId: state.checksum,
+              classes: Object.keys(state.mangleMap)
+            };
+            if (manglingEnabled && !isWebpackDevMode && Object.keys(state.mangleMap).length > 0) {
+              manifestData.mangleMap = state.mangleMap;
+            }
+            compilation.emitAsset(
+              "csszyx-manifest.json",
+              new compiler.webpack.sources.RawSource(JSON.stringify(manifestData))
+            );
             for (const file in assets) {
               const asset = assets[file];
               const source = asset.source().toString();
-              if (manglingEnabled && Object.keys(state.mangleMap).length > 0) {
+              if (manglingEnabled && !isWebpackDevMode && Object.keys(state.mangleMap).length > 0) {
                 if (file.endsWith(".css")) {
                   try {
                     const result = mangleCSSSync(source, state.mangleMap, {
@@ -688,6 +1188,21 @@ ${inlineDirective}`
                       throw e;
                     }
                   }
+                } else if (file.endsWith(".html")) {
+                  const mangledHtml = source.replace(/\bclass="([^"]*)"/g, (_m, cls) => {
+                    const out = cls.split(/\s+/).filter(Boolean).map((c) => state.mangleMap[c] || c).join(" ");
+                    return out !== cls ? `class="${out}"` : _m;
+                  }).replace(/\bclass='([^']*)'/g, (_m, cls) => {
+                    const out = cls.split(/\s+/).filter(Boolean).map((c) => state.mangleMap[c] || c).join(" ");
+                    return out !== cls ? `class='${out}'` : _m;
+                  });
+                  if (mangledHtml !== source) {
+                    compilation.updateAsset(
+                      file,
+                      new compiler.webpack.sources.RawSource(mangledHtml)
+                    );
+                    continue;
+                  }
                 } else if (file.endsWith(".js")) {
                   let mangled = mangleCodeClasses(source);
                   mangled = replacePlaceholders(mangled);
@@ -722,6 +1237,19 @@ ${inlineDirective}`
        */
       generateBundle(_options, bundle) {
         finalizeMangleMap();
+        const manifestData = {
+          version: "0.4.0",
+          buildId: state.checksum,
+          classes: Object.keys(state.mangleMap)
+        };
+        if (manglingEnabled && Object.keys(state.mangleMap).length > 0) {
+          manifestData.mangleMap = state.mangleMap;
+        }
+        this.emitFile({
+          type: "asset",
+          fileName: "csszyx-manifest.json",
+          source: JSON.stringify(manifestData)
+        });
         for (const file in bundle) {
           const chunk = bundle[file];
           if (manglingEnabled && Object.keys(state.mangleMap).length > 0) {