chaincss 2.1.34 → 2.1.36

package/dist/plugins/vite.js

@@ -3157,17 +3157,17 @@ function chaincssPlugin(options = {}) {
       return false;
     }
     const isUserFile = id.includes("/src/") || id.includes("/components/");
-    const isComponent = /\.(t|j)sx?$/.test(id) || id.endsWith(".chain.ts") || id.endsWith(".chain.js");
+    const isComponent = /\.(t|j)sx?$/.test(id);
     return isUserFile && isComponent;
   }
   function updateCSS() {
     try {
-      const compilerCSS = compiler.getCombinedCSS();
-      if (compilerCSS && compilerCSS.trim()) {
-        generatedCSS = compilerCSS;
-      }
-      if (options.verbose) {
-        log(`CSS updated: ${generatedCSS.length} bytes`);
+      const freshCSS = compiler.getCombinedCSS();
+      if (freshCSS && freshCSS !== generatedCSS) {
+        generatedCSS = freshCSS;
+        if (options.verbose) {
+          log(`CSS updated: ${generatedCSS.length} bytes`);
+        }
       }
       return generatedCSS;
     } catch (error) {
@@ -3220,10 +3220,7 @@ function chaincssPlugin(options = {}) {
       return `
         // ChainCSS Runtime Bootstrap (No CSS Injection)
         import manifest from "virtual:chaincss-manifest";
-        // Inline setManifest to avoid pulling in optional framework deps
-const setManifest = (manifest) => {
-  window.__CHAINCSS_MANIFEST__ = manifest?.atomicMap || manifest?.atomicClasses || manifest || {};
-};
+        import { setManifest } from "chaincss/runtime";
         
         try {
           setManifest(manifest);
@@ -3237,10 +3234,7 @@ const setManifest = (manifest) => {
     return `
       // ChainCSS Runtime Bootstrap
       import manifest from "virtual:chaincss-manifest";
-      // Inline setManifest to avoid pulling in optional framework deps
-const setManifest = (manifest) => {
-  window.__CHAINCSS_MANIFEST__ = manifest?.atomicMap || manifest?.atomicClasses || manifest || {};
-};
+      import { setManifest } from "chaincss/runtime";
       
       // Initialize ChainCSS
       try {
@@ -3290,14 +3284,17 @@ const setManifest = (manifest) => {
       }
     `;
   }
-  let chainCount = 0;
-  let staticCount = 0;
-  let dynamicCount = 0;
-  let hybridCount = 0;
-  let totalCSSBytes = 0;
   return {
     name: "chaincss",
     enforce: "pre",
+    config(config) {
+      if (!config.optimizeDeps) config.optimizeDeps = {};
+      if (!config.optimizeDeps.exclude) config.optimizeDeps.exclude = [];
+      const exclude = config.optimizeDeps.exclude;
+      if (!exclude.includes("url")) exclude.push("url");
+      if (!exclude.includes("fs")) exclude.push("fs");
+      if (!exclude.includes("path")) exclude.push("path");
+    },
     configureServer(_server) {
       server = _server;
       log("Vite plugin initialized");
@@ -3342,42 +3339,7 @@ const setManifest = (manifest) => {
         }
         log(`Processing: ${fileName}`);
         processedFiles.add(id);
-        const chainMatches = source.match(/chain\(/g);
-        const smartMatches = source.match(/smartChain\(/g);
-        const total = (chainMatches?.length || 0) + (smartMatches?.length || 0);
-        if (total > 0) {
-          chainCount += total;
-          if (smartMatches) {
-            hybridCount += smartMatches.length;
-            staticCount += chainMatches?.length || 0;
-          } else {
-            staticCount += total;
-          }
-          console.log(`  \u2514\u2500 Found ${total} chain calls (${chainMatches?.length || 0} static, ${smartMatches?.length || 0} hybrid)`);
-        }
-        if (id.endsWith(".chain.ts") || id.endsWith(".chain.js")) {
-          try {
-            const results = await compiler.compileFile(id);
-            let css2 = "";
-            for (const r of Object.values(results)) {
-              if (r.css) css2 += r.css + "\n";
-            }
-            if (css2.trim()) {
-              generatedCSS += css2;
-              totalCSSBytes += css2.length;
-              if (options.verbose) {
-                console.log(`  \u2514\u2500 Extracted ${css2.length} bytes of CSS`);
-              }
-            }
-          } catch (e) {
-          }
-        }
         await compiler.compileSource(source, id);
-        const css = compiler.getCombinedCSS();
-        if (css && css.trim()) {
-          const ruleCount = (css.match(/\{/g) || []).length;
-          console.log(`  \u2514\u2500 Extracted ${ruleCount} CSS rules from ${fileName}`);
-        }
         updateCSS();
         updateManifest();
         if (server && options.hmr !== false) {
@@ -3387,13 +3349,6 @@ const setManifest = (manifest) => {
         if (isEntryFile && !source.includes("virtual:chaincss.css")) {
           const bootstrapCode = generateBootstrapCode(generatedCSS);
           log(`Bootstrapping entry file: ${fileName} (${generatedCSS.length} bytes)`);
-          if (chainCount > 0) {
-            console.log("");
-            console.log("\u26D3\uFE0F  ChainCSS \u2014 Ready");
-            console.log(`  \u{1F4DD} ${chainCount} chain() calls detected`);
-            console.log("  \u{1F500} Auto-split active \u2014 open browser console for split report");
-            console.log("");
-          }
           return {
             code: `${bootstrapCode}
 ${source}`,
@@ -3437,28 +3392,9 @@ ${source}`,
       generatedCSS = "";
       generatedManifest = {};
       compiler.clearCSS();
-      chainCount = 0;
-      staticCount = 0;
-      dynamicCount = 0;
-      hybridCount = 0;
-      totalCSSBytes = 0;
     },
-    async buildEnd() {
-      if (generatedCSS.trim() && options.cssOutput) {
-        const fs8 = await import("fs");
-        const outputPath = path6.resolve(process.cwd(), options.cssOutput);
-        fs8.writeFileSync(outputPath, generatedCSS, "utf8");
-        console.log(`  \u{1F4C1} CSS written to ${options.cssOutput} (${generatedCSS.length} bytes)`);
-      }
+    buildEnd() {
       const finalCSS = updateCSS();
-      const stats = compiler.getStats();
-      console.log("");
-      console.log("[ChainCSS] \u2705 Build complete");
-      console.log(`  \u{1F4E6} Static CSS:  ${finalCSS.length} bytes`);
-      console.log(`  \u26A1 Runtime JS:  minimal (dynamic properties only)`);
-      console.log(`  \u{1F9E9} Total styles: ${stats.totalStyles || 0} processed`);
-      console.log(`  \u{1F4BE} Atomic savings: ${stats.savings || "0%"}`);
-      console.log("");
       log(`Build complete - Final CSS: ${finalCSS.length} bytes`);
       if (options.cssOutput) {
         try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chaincss",
-  "version": "2.1.34",
+  "version": "2.1.36",
   "description": "ChainCSS - The first CSS-in-JS library with true auto-detection mixed mode. Zero runtime by default, dynamic when you need it.",
   "type": "module",
   "main": "./dist/index.js",

package/src/plugins/vite.ts

@@ -76,7 +76,7 @@ export default function chaincssPlugin(options: ChainCSSPluginOptions = {}): Plu
     
     // Default: process source files
     const isUserFile = id.includes('/src/') || id.includes('/components/');
-    const isComponent = /\.(t|j)sx?$/.test(id) || id.endsWith(".chain.ts") || id.endsWith(".chain.js");
+    const isComponent = /\.(t|j)sx?$/.test(id);
     
     return isUserFile && isComponent;
   }
@@ -84,13 +84,12 @@ export default function chaincssPlugin(options: ChainCSSPluginOptions = {}): Plu
   // Get CSS from compiler safely
   function updateCSS(): string {
     try {
-      // Get CSS from both compiler and our generatedCSS
-      const compilerCSS = compiler.getCombinedCSS();
-      if (compilerCSS && compilerCSS.trim()) {
-        generatedCSS = compilerCSS;
-      }
-      if (options.verbose) {
-        log(`CSS updated: ${generatedCSS.length} bytes`);
+      const freshCSS = compiler.getCombinedCSS();
+      if (freshCSS && freshCSS !== generatedCSS) {
+        generatedCSS = freshCSS;
+        if (options.verbose) {
+          log(`CSS updated: ${generatedCSS.length} bytes`);
+        }
       }
       return generatedCSS;
     } catch (error) {
@@ -156,10 +155,7 @@ export default function chaincssPlugin(options: ChainCSSPluginOptions = {}): Plu
       return `
         // ChainCSS Runtime Bootstrap (No CSS Injection)
         import manifest from "virtual:chaincss-manifest";
-        // Inline setManifest to avoid pulling in optional framework deps
-const setManifest = (manifest) => {
-  window.__CHAINCSS_MANIFEST__ = manifest?.atomicMap || manifest?.atomicClasses || manifest || {};
-};
+        import { setManifest } from "chaincss/runtime";
         
         try {
           setManifest(manifest);
@@ -179,10 +175,7 @@ const setManifest = (manifest) => {
     return `
       // ChainCSS Runtime Bootstrap
       import manifest from "virtual:chaincss-manifest";
-      // Inline setManifest to avoid pulling in optional framework deps
-const setManifest = (manifest) => {
-  window.__CHAINCSS_MANIFEST__ = manifest?.atomicMap || manifest?.atomicClasses || manifest || {};
-};
+      import { setManifest } from "chaincss/runtime";
       
       // Initialize ChainCSS
       try {
@@ -233,22 +226,24 @@ const setManifest = (manifest) => {
     `;
   }
 
-  let chainCount = 0;
-  let staticCount = 0;
-  let dynamicCount = 0;
-  let hybridCount = 0;
-  let totalCSSBytes = 0;
-
   return {
     name: 'chaincss',
     enforce: 'pre' as const,
 
+    config(config) {
+      // Prevent Vite from trying to optimize Node.js built-ins
+      if (!config.optimizeDeps) config.optimizeDeps = {};
+      if (!config.optimizeDeps.exclude) config.optimizeDeps.exclude = [];
+      const exclude = config.optimizeDeps.exclude as string[];
+      if (!exclude.includes('url')) exclude.push('url');
+      if (!exclude.includes('fs')) exclude.push('fs');
+      if (!exclude.includes('path')) exclude.push('path');
+    },
+
     configureServer(_server: ViteDevServer) {
       server = _server;
       log('Vite plugin initialized');
       
-// Stats shown in transform hook after processing
-      
       // Watch for config changes
       _server.watcher.on('change', (filePath) => {
         if (filePath.includes('chaincss.config')) {
@@ -301,53 +296,9 @@ const setManifest = (manifest) => {
         log(`Processing: ${fileName}`);
         processedFiles.add(id);
         
-        // Count chain() and smartChain() calls
-        const chainMatches = source.match(/chain\(/g);
-        const smartMatches = source.match(/smartChain\(/g);
-        const total = (chainMatches?.length || 0) + (smartMatches?.length || 0);
-        
-        if (total > 0) {
-          chainCount += total;
-          // Estimate static vs dynamic (smartChain is hybrid, chain is static)
-          if (smartMatches) {
-            hybridCount += smartMatches.length;
-            staticCount += (chainMatches?.length || 0);
-          } else {
-            staticCount += total;
-          }
-          console.log(`  └─ Found ${total} chain calls (${chainMatches?.length || 0} static, ${smartMatches?.length || 0} hybrid)`);
-        }
-        
-        // Compile .chain.ts files to CSS
-        if (id.endsWith('.chain.ts') || id.endsWith('.chain.js')) {
-          try {
-            const results = await compiler.compileFile(id);
-            let css = '';
-            for (const r of Object.values(results)) {
-              if (r.css) css += r.css + '\n';
-            }
-            if (css.trim()) {
-              generatedCSS += css;
-              totalCSSBytes += css.length;
-              if (options.verbose) {
-                console.log(`  └─ Extracted ${css.length} bytes of CSS`);
-              }
-            }
-          } catch (e) {
-            // Not a compilable chain file
-          }
-        }
-        
-        // Also detect chain() calls in JSX/TSX for stats
+        // Compile the source
         await compiler.compileSource(source, id);
         
-        // Show what was found
-        const css = compiler.getCombinedCSS();
-        if (css && css.trim()) {
-          const ruleCount = (css.match(/\{/g) || []).length;
-          console.log(`  └─ Extracted ${ruleCount} CSS rules from ${fileName}`);
-        }
-        
         // Update stored data
         updateCSS();
         updateManifest();
@@ -364,15 +315,6 @@ const setManifest = (manifest) => {
           const bootstrapCode = generateBootstrapCode(generatedCSS);
           log(`Bootstrapping entry file: ${fileName} (${generatedCSS.length} bytes)`);
           
-          // Show stats after processing all files
-          if (chainCount > 0) {
-            console.log('');
-            console.log('⛓️  ChainCSS — Ready');
-            console.log(`  📝 ${chainCount} chain() calls detected`);
-            console.log('  🔀 Auto-split active — open browser console for split report');
-            console.log('');
-          }
-          
           return {
             code: `${bootstrapCode}\n${source}`,
             map: null
@@ -430,32 +372,10 @@ const setManifest = (manifest) => {
       generatedCSS = '';
       generatedManifest = {};
       compiler.clearCSS();
-      chainCount = 0;
-      staticCount = 0;
-      dynamicCount = 0;
-      hybridCount = 0;
-      totalCSSBytes = 0;
     },
     
-    async buildEnd() {
-      // Write CSS to file if we have any
-      if (generatedCSS.trim() && options.cssOutput) {
-        const fs = await import('fs');
-        const outputPath = path.resolve(process.cwd(), options.cssOutput);
-        fs.writeFileSync(outputPath, generatedCSS, 'utf8');
-        console.log(`  📁 CSS written to ${options.cssOutput} (${generatedCSS.length} bytes)`);
-      }
-      
+    buildEnd() {
       const finalCSS = updateCSS();
-      const stats = compiler.getStats();
-      
-      console.log('');
-      console.log('[ChainCSS] ✅ Build complete');
-      console.log(`  📦 Static CSS:  ${finalCSS.length} bytes`);
-      console.log(`  ⚡ Runtime JS:  minimal (dynamic properties only)`);
-      console.log(`  🧩 Total styles: ${stats.totalStyles || 0} processed`);
-      console.log(`  💾 Atomic savings: ${stats.savings || '0%'}`);
-      console.log('');
       log(`Build complete - Final CSS: ${finalCSS.length} bytes`);
       
       // Write CSS to file if output specified