@csszyx/unplugin 0.1.3 → 0.3.0

package/README.md

@@ -1,6 +1,6 @@
 # @csszyx/unplugin
 
-> Vite, Webpack, and esbuild integration for csszyx.
+> Vite, Webpack, and esbuild integration for CSSzyx.
 
 Build-time plugin that transforms `sz` props into Tailwind classes, generates static CSS, mangles class names in production, and injects hydration scripts for SSR.
 

package/dist/{chunk-JKM7IRGZ.js → chunk-3J4XUYF5.js}

@@ -160,34 +160,8 @@ function createCsszyxPlugins(options = {}) {
             if (!result.transformed) {
               continue;
             }
-            const classPattern = /class(?:Name)?=["']([^"']*)["']/g;
-            let match;
-            while ((match = classPattern.exec(result.code)) !== null) {
-              for (const cls of match[1].split(/\s+/).filter(Boolean)) {
-                discoveredClasses.add(cls);
-              }
-            }
-            const exprPattern = /className=\{/g;
-            while ((match = exprPattern.exec(result.code)) !== null) {
-              let depth = 1;
-              let i = match.index + match[0].length;
-              while (i < result.code.length && depth > 0) {
-                if (result.code[i] === "{") {
-                  depth++;
-                } else if (result.code[i] === "}") {
-                  depth--;
-                }
-                i++;
-              }
-              const expr = result.code.slice(match.index + match[0].length, i - 1);
-              const strPattern = /"([^"]+)"|'([^']+)'/g;
-              let strMatch;
-              while ((strMatch = strPattern.exec(expr)) !== null) {
-                const str = strMatch[1] || strMatch[2];
-                for (const cls of str.split(/\s+/).filter(Boolean)) {
-                  discoveredClasses.add(cls);
-                }
-              }
+            for (const cls of result.classes) {
+              discoveredClasses.add(cls);
             }
             if (result.usesRuntime) {
               const szCallRe = /_sz\(\s*\{/g;
@@ -260,12 +234,15 @@ function createCsszyxPlugins(options = {}) {
     }
   }
   function extractClasses(code) {
-    const classPattern = /(?:class(?:Name)?|sz)[:=]\s*["']([^"']*)["']/g;
+    const dqPattern = /(?:class(?:Name)?|sz)[:=]\s*"([^"]*)"/g;
+    const sqPattern = /(?:class(?:Name)?|sz)[:=]\s*'([^']*)'/g;
     let match;
-    while ((match = classPattern.exec(code)) !== null) {
-      const classes = match[1].split(/\s+/).filter(Boolean);
-      for (const cls of classes) {
-        state.classes.add(cls);
+    for (const classPattern of [dqPattern, sqPattern]) {
+      while ((match = classPattern.exec(code)) !== null) {
+        const classes = match[1].split(/\s+/).filter(Boolean);
+        for (const cls of classes) {
+          state.classes.add(cls);
+        }
       }
     }
     const exprStart = /className=\{/g;
@@ -306,14 +283,24 @@ function createCsszyxPlugins(options = {}) {
     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) => {
+    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) => {
+    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);
@@ -375,7 +362,8 @@ function createCsszyxPlugins(options = {}) {
       return null;
     },
     /**
-     * Filters files for the pre-transform phase — only source files outside node_modules.
+     * Filters files for the pre-transform phase — source files plus CSS files.
+     * CSS files need special handling to inject @source inline() for Tailwind class discovery.
      * @param id - the file path to check for inclusion
      * @returns true if the file should be transformed, false otherwise
      */
@@ -383,19 +371,43 @@ function createCsszyxPlugins(options = {}) {
       if (id.includes("node_modules") || id.includes("/packages/") || id.includes(".next") && !id.includes("static")) {
         return false;
       }
+      if (/\.css(\?.*)?$/.test(id)) {
+        return true;
+      }
       return /\.[tj]sx?$/.test(id) || id.endsWith(".vue") || id.endsWith(".svelte");
     },
     /**
      * Core transform: detects sz prop, compiles to className, injects runtime, collects classes.
+     * For CSS files: injects @source inline() so Tailwind generates CSS for sz-derived classes.
      * @param code - the source code to transform
      * @param id - the file path of the module being transformed
      * @returns transformed code with source map, or null if no changes were made
      */
     transform(code, id) {
+      if (/\.css(\?.*)?$/.test(id)) {
+        const hasTailwindImport = code.includes('@import "tailwindcss') || code.includes("@import 'tailwindcss");
+        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 transformed2 = code.replace(
+              /(@import\s+["']tailwindcss[^"']*["'];)/,
+              `$1
+${inlineDirective}`
+            );
+            if (transformed2 !== code) {
+              return { code: transformed2, map: null };
+            }
+          }
+        }
+        return null;
+      }
       let transformedCode = code;
       let usesRuntime = false;
       let usesColorVar = false;
       let transformed = false;
+      let szClasses;
       const hasSzProp = code.includes("sz=") || /\bsz\s*:\s*["'{]/.test(code) || code.includes('sz: "');
       if (hasSzProp) {
         if (id.endsWith(".vue")) {
@@ -416,6 +428,7 @@ function createCsszyxPlugins(options = {}) {
           usesRuntime = result.usesRuntime;
           usesColorVar = result.usesColorVar;
           transformed = result.transformed;
+          szClasses = result.classes;
         }
       }
       if (transformedCode.includes("<html") && /layout|Root|Document|app\\.tsx?$/i.test(id)) {
@@ -452,7 +465,13 @@ function createCsszyxPlugins(options = {}) {
         }
       }
       if (transformed || transformedCode.includes("class=") || transformedCode.includes("className=")) {
-        extractClasses(transformedCode);
+        if (szClasses !== void 0) {
+          for (const cls of szClasses) {
+            state.classes.add(cls);
+          }
+        } else {
+          extractClasses(transformedCode);
+        }
         return { code: transformedCode, map: null };
       }
       return null;

package/dist/index.cjs

@@ -397,34 +397,8 @@ function createCsszyxPlugins(options = {}) {
             if (!result.transformed) {
               continue;
             }
-            const classPattern = /class(?:Name)?=["']([^"']*)["']/g;
-            let match;
-            while ((match = classPattern.exec(result.code)) !== null) {
-              for (const cls of match[1].split(/\s+/).filter(Boolean)) {
-                discoveredClasses.add(cls);
-              }
-            }
-            const exprPattern = /className=\{/g;
-            while ((match = exprPattern.exec(result.code)) !== null) {
-              let depth = 1;
-              let i = match.index + match[0].length;
-              while (i < result.code.length && depth > 0) {
-                if (result.code[i] === "{") {
-                  depth++;
-                } else if (result.code[i] === "}") {
-                  depth--;
-                }
-                i++;
-              }
-              const expr = result.code.slice(match.index + match[0].length, i - 1);
-              const strPattern = /"([^"]+)"|'([^']+)'/g;
-              let strMatch;
-              while ((strMatch = strPattern.exec(expr)) !== null) {
-                const str = strMatch[1] || strMatch[2];
-                for (const cls of str.split(/\s+/).filter(Boolean)) {
-                  discoveredClasses.add(cls);
-                }
-              }
+            for (const cls of result.classes) {
+              discoveredClasses.add(cls);
             }
             if (result.usesRuntime) {
               const szCallRe = /_sz\(\s*\{/g;
@@ -497,12 +471,15 @@ function createCsszyxPlugins(options = {}) {
     }
   }
   function extractClasses(code) {
-    const classPattern = /(?:class(?:Name)?|sz)[:=]\s*["']([^"']*)["']/g;
+    const dqPattern = /(?:class(?:Name)?|sz)[:=]\s*"([^"]*)"/g;
+    const sqPattern = /(?:class(?:Name)?|sz)[:=]\s*'([^']*)'/g;
     let match;
-    while ((match = classPattern.exec(code)) !== null) {
-      const classes = match[1].split(/\s+/).filter(Boolean);
-      for (const cls of classes) {
-        state.classes.add(cls);
+    for (const classPattern of [dqPattern, sqPattern]) {
+      while ((match = classPattern.exec(code)) !== null) {
+        const classes = match[1].split(/\s+/).filter(Boolean);
+        for (const cls of classes) {
+          state.classes.add(cls);
+        }
       }
     }
     const exprStart = /className=\{/g;
@@ -543,14 +520,24 @@ function createCsszyxPlugins(options = {}) {
     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) => {
+    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) => {
+    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);
@@ -612,7 +599,8 @@ function createCsszyxPlugins(options = {}) {
       return null;
     },
     /**
-     * Filters files for the pre-transform phase — only source files outside node_modules.
+     * Filters files for the pre-transform phase — source files plus CSS files.
+     * CSS files need special handling to inject @source inline() for Tailwind class discovery.
      * @param id - the file path to check for inclusion
      * @returns true if the file should be transformed, false otherwise
      */
@@ -620,19 +608,43 @@ function createCsszyxPlugins(options = {}) {
       if (id.includes("node_modules") || id.includes("/packages/") || id.includes(".next") && !id.includes("static")) {
         return false;
       }
+      if (/\.css(\?.*)?$/.test(id)) {
+        return true;
+      }
       return /\.[tj]sx?$/.test(id) || id.endsWith(".vue") || id.endsWith(".svelte");
     },
     /**
      * Core transform: detects sz prop, compiles to className, injects runtime, collects classes.
+     * For CSS files: injects @source inline() so Tailwind generates CSS for sz-derived classes.
      * @param code - the source code to transform
      * @param id - the file path of the module being transformed
      * @returns transformed code with source map, or null if no changes were made
      */
     transform(code, id) {
+      if (/\.css(\?.*)?$/.test(id)) {
+        const hasTailwindImport = code.includes('@import "tailwindcss') || code.includes("@import 'tailwindcss");
+        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 transformed2 = code.replace(
+              /(@import\s+["']tailwindcss[^"']*["'];)/,
+              `$1
+${inlineDirective}`
+            );
+            if (transformed2 !== code) {
+              return { code: transformed2, map: null };
+            }
+          }
+        }
+        return null;
+      }
       let transformedCode = code;
       let usesRuntime = false;
       let usesColorVar = false;
       let transformed = false;
+      let szClasses;
       const hasSzProp = code.includes("sz=") || /\bsz\s*:\s*["'{]/.test(code) || code.includes('sz: "');
       if (hasSzProp) {
         if (id.endsWith(".vue")) {
@@ -653,6 +665,7 @@ function createCsszyxPlugins(options = {}) {
           usesRuntime = result.usesRuntime;
           usesColorVar = result.usesColorVar;
           transformed = result.transformed;
+          szClasses = result.classes;
         }
       }
       if (transformedCode.includes("<html") && /layout|Root|Document|app\\.tsx?$/i.test(id)) {
@@ -689,7 +702,13 @@ function createCsszyxPlugins(options = {}) {
         }
       }
       if (transformed || transformedCode.includes("class=") || transformedCode.includes("className=")) {
-        extractClasses(transformedCode);
+        if (szClasses !== void 0) {
+          for (const cls of szClasses) {
+            state.classes.add(cls);
+          }
+        } else {
+          extractClasses(transformedCode);
+        }
         return { code: transformedCode, map: null };
       }
       return null;

package/dist/index.js

@@ -4,7 +4,7 @@ import {
   unplugin,
   vitePlugin,
   webpackPlugin
-} from "./chunk-JKM7IRGZ.js";
+} from "./chunk-3J4XUYF5.js";
 import {
   createPostCSSPlugin,
   escapeCSSClassName,

package/dist/vite.cjs

@@ -288,34 +288,8 @@ function createCsszyxPlugins(options = {}) {
             if (!result.transformed) {
               continue;
             }
-            const classPattern = /class(?:Name)?=["']([^"']*)["']/g;
-            let match;
-            while ((match = classPattern.exec(result.code)) !== null) {
-              for (const cls of match[1].split(/\s+/).filter(Boolean)) {
-                discoveredClasses.add(cls);
-              }
-            }
-            const exprPattern = /className=\{/g;
-            while ((match = exprPattern.exec(result.code)) !== null) {
-              let depth = 1;
-              let i = match.index + match[0].length;
-              while (i < result.code.length && depth > 0) {
-                if (result.code[i] === "{") {
-                  depth++;
-                } else if (result.code[i] === "}") {
-                  depth--;
-                }
-                i++;
-              }
-              const expr = result.code.slice(match.index + match[0].length, i - 1);
-              const strPattern = /"([^"]+)"|'([^']+)'/g;
-              let strMatch;
-              while ((strMatch = strPattern.exec(expr)) !== null) {
-                const str = strMatch[1] || strMatch[2];
-                for (const cls of str.split(/\s+/).filter(Boolean)) {
-                  discoveredClasses.add(cls);
-                }
-              }
+            for (const cls of result.classes) {
+              discoveredClasses.add(cls);
             }
             if (result.usesRuntime) {
               const szCallRe = /_sz\(\s*\{/g;
@@ -388,12 +362,15 @@ function createCsszyxPlugins(options = {}) {
     }
   }
   function extractClasses(code) {
-    const classPattern = /(?:class(?:Name)?|sz)[:=]\s*["']([^"']*)["']/g;
+    const dqPattern = /(?:class(?:Name)?|sz)[:=]\s*"([^"]*)"/g;
+    const sqPattern = /(?:class(?:Name)?|sz)[:=]\s*'([^']*)'/g;
     let match;
-    while ((match = classPattern.exec(code)) !== null) {
-      const classes = match[1].split(/\s+/).filter(Boolean);
-      for (const cls of classes) {
-        state.classes.add(cls);
+    for (const classPattern of [dqPattern, sqPattern]) {
+      while ((match = classPattern.exec(code)) !== null) {
+        const classes = match[1].split(/\s+/).filter(Boolean);
+        for (const cls of classes) {
+          state.classes.add(cls);
+        }
       }
     }
     const exprStart = /className=\{/g;
@@ -434,14 +411,24 @@ function createCsszyxPlugins(options = {}) {
     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) => {
+    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) => {
+    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);
@@ -503,7 +490,8 @@ function createCsszyxPlugins(options = {}) {
       return null;
     },
     /**
-     * Filters files for the pre-transform phase — only source files outside node_modules.
+     * Filters files for the pre-transform phase — source files plus CSS files.
+     * CSS files need special handling to inject @source inline() for Tailwind class discovery.
      * @param id - the file path to check for inclusion
      * @returns true if the file should be transformed, false otherwise
      */
@@ -511,19 +499,43 @@ function createCsszyxPlugins(options = {}) {
       if (id.includes("node_modules") || id.includes("/packages/") || id.includes(".next") && !id.includes("static")) {
         return false;
       }
+      if (/\.css(\?.*)?$/.test(id)) {
+        return true;
+      }
       return /\.[tj]sx?$/.test(id) || id.endsWith(".vue") || id.endsWith(".svelte");
     },
     /**
      * Core transform: detects sz prop, compiles to className, injects runtime, collects classes.
+     * For CSS files: injects @source inline() so Tailwind generates CSS for sz-derived classes.
      * @param code - the source code to transform
      * @param id - the file path of the module being transformed
      * @returns transformed code with source map, or null if no changes were made
      */
     transform(code, id) {
+      if (/\.css(\?.*)?$/.test(id)) {
+        const hasTailwindImport = code.includes('@import "tailwindcss') || code.includes("@import 'tailwindcss");
+        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 transformed2 = code.replace(
+              /(@import\s+["']tailwindcss[^"']*["'];)/,
+              `$1
+${inlineDirective}`
+            );
+            if (transformed2 !== code) {
+              return { code: transformed2, map: null };
+            }
+          }
+        }
+        return null;
+      }
       let transformedCode = code;
       let usesRuntime = false;
       let usesColorVar = false;
       let transformed = false;
+      let szClasses;
       const hasSzProp = code.includes("sz=") || /\bsz\s*:\s*["'{]/.test(code) || code.includes('sz: "');
       if (hasSzProp) {
         if (id.endsWith(".vue")) {
@@ -544,6 +556,7 @@ function createCsszyxPlugins(options = {}) {
           usesRuntime = result.usesRuntime;
           usesColorVar = result.usesColorVar;
           transformed = result.transformed;
+          szClasses = result.classes;
         }
       }
       if (transformedCode.includes("<html") && /layout|Root|Document|app\\.tsx?$/i.test(id)) {
@@ -580,7 +593,13 @@ function createCsszyxPlugins(options = {}) {
         }
       }
       if (transformed || transformedCode.includes("class=") || transformedCode.includes("className=")) {
-        extractClasses(transformedCode);
+        if (szClasses !== void 0) {
+          for (const cls of szClasses) {
+            state.classes.add(cls);
+          }
+        } else {
+          extractClasses(transformedCode);
+        }
         return { code: transformedCode, map: null };
       }
       return null;

package/dist/vite.js

@@ -1,6 +1,6 @@
 import {
   vitePlugin
-} from "./chunk-JKM7IRGZ.js";
+} from "./chunk-3J4XUYF5.js";
 import "./chunk-4M7CPGP7.js";
 
 // src/vite.ts

package/dist/webpack.cjs

@@ -288,34 +288,8 @@ function createCsszyxPlugins(options = {}) {
             if (!result.transformed) {
               continue;
             }
-            const classPattern = /class(?:Name)?=["']([^"']*)["']/g;
-            let match;
-            while ((match = classPattern.exec(result.code)) !== null) {
-              for (const cls of match[1].split(/\s+/).filter(Boolean)) {
-                discoveredClasses.add(cls);
-              }
-            }
-            const exprPattern = /className=\{/g;
-            while ((match = exprPattern.exec(result.code)) !== null) {
-              let depth = 1;
-              let i = match.index + match[0].length;
-              while (i < result.code.length && depth > 0) {
-                if (result.code[i] === "{") {
-                  depth++;
-                } else if (result.code[i] === "}") {
-                  depth--;
-                }
-                i++;
-              }
-              const expr = result.code.slice(match.index + match[0].length, i - 1);
-              const strPattern = /"([^"]+)"|'([^']+)'/g;
-              let strMatch;
-              while ((strMatch = strPattern.exec(expr)) !== null) {
-                const str = strMatch[1] || strMatch[2];
-                for (const cls of str.split(/\s+/).filter(Boolean)) {
-                  discoveredClasses.add(cls);
-                }
-              }
+            for (const cls of result.classes) {
+              discoveredClasses.add(cls);
             }
             if (result.usesRuntime) {
               const szCallRe = /_sz\(\s*\{/g;
@@ -388,12 +362,15 @@ function createCsszyxPlugins(options = {}) {
     }
   }
   function extractClasses(code) {
-    const classPattern = /(?:class(?:Name)?|sz)[:=]\s*["']([^"']*)["']/g;
+    const dqPattern = /(?:class(?:Name)?|sz)[:=]\s*"([^"]*)"/g;
+    const sqPattern = /(?:class(?:Name)?|sz)[:=]\s*'([^']*)'/g;
     let match;
-    while ((match = classPattern.exec(code)) !== null) {
-      const classes = match[1].split(/\s+/).filter(Boolean);
-      for (const cls of classes) {
-        state.classes.add(cls);
+    for (const classPattern of [dqPattern, sqPattern]) {
+      while ((match = classPattern.exec(code)) !== null) {
+        const classes = match[1].split(/\s+/).filter(Boolean);
+        for (const cls of classes) {
+          state.classes.add(cls);
+        }
       }
     }
     const exprStart = /className=\{/g;
@@ -434,14 +411,24 @@ function createCsszyxPlugins(options = {}) {
     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) => {
+    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) => {
+    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);
@@ -503,7 +490,8 @@ function createCsszyxPlugins(options = {}) {
       return null;
     },
     /**
-     * Filters files for the pre-transform phase — only source files outside node_modules.
+     * Filters files for the pre-transform phase — source files plus CSS files.
+     * CSS files need special handling to inject @source inline() for Tailwind class discovery.
      * @param id - the file path to check for inclusion
      * @returns true if the file should be transformed, false otherwise
      */
@@ -511,19 +499,43 @@ function createCsszyxPlugins(options = {}) {
       if (id.includes("node_modules") || id.includes("/packages/") || id.includes(".next") && !id.includes("static")) {
         return false;
       }
+      if (/\.css(\?.*)?$/.test(id)) {
+        return true;
+      }
       return /\.[tj]sx?$/.test(id) || id.endsWith(".vue") || id.endsWith(".svelte");
     },
     /**
      * Core transform: detects sz prop, compiles to className, injects runtime, collects classes.
+     * For CSS files: injects @source inline() so Tailwind generates CSS for sz-derived classes.
      * @param code - the source code to transform
      * @param id - the file path of the module being transformed
      * @returns transformed code with source map, or null if no changes were made
      */
     transform(code, id) {
+      if (/\.css(\?.*)?$/.test(id)) {
+        const hasTailwindImport = code.includes('@import "tailwindcss') || code.includes("@import 'tailwindcss");
+        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 transformed2 = code.replace(
+              /(@import\s+["']tailwindcss[^"']*["'];)/,
+              `$1
+${inlineDirective}`
+            );
+            if (transformed2 !== code) {
+              return { code: transformed2, map: null };
+            }
+          }
+        }
+        return null;
+      }
       let transformedCode = code;
       let usesRuntime = false;
       let usesColorVar = false;
       let transformed = false;
+      let szClasses;
       const hasSzProp = code.includes("sz=") || /\bsz\s*:\s*["'{]/.test(code) || code.includes('sz: "');
       if (hasSzProp) {
         if (id.endsWith(".vue")) {
@@ -544,6 +556,7 @@ function createCsszyxPlugins(options = {}) {
           usesRuntime = result.usesRuntime;
           usesColorVar = result.usesColorVar;
           transformed = result.transformed;
+          szClasses = result.classes;
         }
       }
       if (transformedCode.includes("<html") && /layout|Root|Document|app\\.tsx?$/i.test(id)) {
@@ -580,7 +593,13 @@ function createCsszyxPlugins(options = {}) {
         }
       }
       if (transformed || transformedCode.includes("class=") || transformedCode.includes("className=")) {
-        extractClasses(transformedCode);
+        if (szClasses !== void 0) {
+          for (const cls of szClasses) {
+            state.classes.add(cls);
+          }
+        } else {
+          extractClasses(transformedCode);
+        }
         return { code: transformedCode, map: null };
       }
       return null;

package/dist/webpack.js

@@ -1,6 +1,6 @@
 import {
   webpackPlugin
-} from "./chunk-JKM7IRGZ.js";
+} from "./chunk-3J4XUYF5.js";
 import "./chunk-4M7CPGP7.js";
 
 // src/webpack.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@csszyx/unplugin",
-  "version": "0.1.3",
+  "version": "0.3.0",
   "description": "Vite and Webpack integration for csszyx",
   "keywords": [
     "csszyx",
@@ -55,11 +55,11 @@
     "postcss": "^8.4.35",
     "postcss-selector-parser": "^6.0.15",
     "unplugin": "^1.10.1",
-    "@csszyx/compiler": "0.1.3",
-    "@csszyx/core": "0.1.3",
-    "@csszyx/svelte-adapter": "0.0.0",
-    "@csszyx/types": "0.1.3",
-    "@csszyx/vue-adapter": "0.0.0"
+    "@csszyx/compiler": "0.3.0",
+    "@csszyx/core": "0.3.0",
+    "@csszyx/svelte-adapter": "0.0.1",
+    "@csszyx/types": "0.3.0",
+    "@csszyx/vue-adapter": "0.0.1"
   },
   "devDependencies": {
     "@types/node": "^20.11.0",