@weerachai06/tw-scanner 1.1.2 → 1.1.4

package/dist/validator.js

@@ -1,6 +1,27 @@
 import * as fs from 'fs';
 import * as path from 'path';
 import { compile } from '@tailwindcss/node';
+// ─── Compile with fallback for unknown @apply utilities ──────────────────────
+// Tailwind v4 throws when @apply references a utility it doesn't know about.
+// This can happen with custom utilities defined via PostCSS plugins or external
+// font/design systems. We recover by injecting empty @utility stubs and retrying.
+async function compileWithFallback(css, base, stubs = []) {
+    const injected = stubs.map((u) => `@utility ${u} { --tw-stub: 0; }`).join('\n');
+    const input = injected ? injected + '\n' + css : css;
+    try {
+        return await compile(input, { base, onDependency: () => { } });
+    }
+    catch (err) {
+        const msg = err.message ?? '';
+        const match = msg.match(/Cannot apply unknown utility class [`']?([^\s`']+)[`']?/);
+        if (match && stubs.length < 50) {
+            const unknown = match[1];
+            console.warn(`⚠  Unknown utility in @apply: "${unknown}" — stub injected for scanning. Add "@utility ${unknown} {}" to your CSS to silence this.`);
+            return compileWithFallback(css, base, [...stubs, unknown]);
+        }
+        throw err;
+    }
+}
 // ─── Cache: compile result per CSS file ──────────────────────────────────────
 const compileCache = new Map();
 export async function loadTailwindContext(cssFile) {
@@ -11,58 +32,15 @@ export async function loadTailwindContext(cssFile) {
         throw new Error(`Tailwind CSS file not found: ${abs}`);
     }
     const css = fs.readFileSync(abs, 'utf8');
-    let result;
-    try {
-        result = await compile(css, {
-            base: path.dirname(abs),
-            onDependency: () => { },
-        });
-    }
-    catch (err) {
-        const msg = err.message ?? '';
-        const match = msg.match(/Cannot apply unknown utility class [`']?([^\s`']+)[`']?/);
-        if (match) {
-            // Strip all @apply lines from the entry CSS and retry so scanning can continue.
-            // Unknown utilities are likely defined via PostCSS plugins or external font systems
-            // that @tailwindcss/node's compile() doesn't have access to.
-            const strippedCss = css.replace(/^\s*@apply\b[^;]+;/gm, '');
-            console.warn(`⚠  Skipping @apply in "${path.relative(process.cwd(), abs)}" — ` +
-                `unknown utility: "${match[1]}". ` +
-                `Add "@utility ${match[1]} {}" to register it if you want it validated.`);
-            result = await compile(strippedCss, {
-                base: path.dirname(abs),
-                onDependency: () => { },
-            });
-        }
-        else {
-            throw err;
-        }
-    }
+    const result = await compileWithFallback(css, path.dirname(abs));
     compileCache.set(abs, result);
     return result;
 }
 // ─── Build CSS selector for string matching ──────────────────────────────────
 function cssSelector(cls) {
-    // Produces the escaped selector as it appears in Tailwind's CSS output
-    return '.' + cls
-        .replace(/\//g, '\\/')
-        .replace(/\./g, '\\.')
-        .replace(/:/g, '\\:')
-        .replace(/\[/g, '\\[')
-        .replace(/\]/g, '\\]')
-        .replace(/\(/g, '\\(')
-        .replace(/\)/g, '\\)')
-        .replace(/=/g, '\\=')
-        .replace(/>/g, '\\>')
-        .replace(/&/g, '\\&')
-        .replace(/~/g, '\\~')
-        .replace(/\+/g, '\\+')
-        .replace(/#/g, '\\#')
-        .replace(/%/g, '\\%')
-        .replace(/!/g, '\\!')
-        .replace(/,/g, '\\,')
-        .replace(/'/g, "\\'")
-        .replace(/"/g, '\\"');
+    // Produces the escaped selector as it appears in Tailwind's CSS output.
+    // Single-pass replacement avoids any interaction between sequential replacements.
+    return '.' + cls.replace(/[\\/.:[\]()=>&~+#%!,'"]/g, '\\$&');
 }
 function selectorInOutput(selector, output) {
     const idx = output.indexOf(selector);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weerachai06/tw-scanner",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "AST-based Tailwind v4 class validator for React projects",
   "type": "module",
   "bin": {