chaincss 2.1.29 → 2.1.31

package/dist/plugins/vite.js

@@ -2,7 +2,7 @@
 import fs6 from "fs";
 import path5 from "path";
 import crypto4 from "crypto";
-import chalk2 from "chalk";
+import chalk from "chalk";
 import { fileURLToPath, pathToFileURL } from "url";
 
 // src/core/constants.ts
@@ -332,9 +332,7 @@ function formatCSS(css, minify = false) {
 var currentLogLevel = process.env.DEBUG ? "debug" : "info";
 
 // src/compiler/btt.ts
-import fs2 from "fs";
 import https from "https";
-import chalk from "chalk";
 
 // src/compiler/commonProps.ts
 var COMMON_CSS_PROPERTIES = [
@@ -417,7 +415,7 @@ var COMMON_CSS_PROPERTIES = [
   "z-index"
 ];
 
-// src/compiler/btt.ts
+// src/compiler/timeline.ts
 var styleHistory = [];
 var styleChanges = [];
 var timelineEnabled = false;
@@ -428,22 +426,13 @@ function takeSnapshot(selector, styles, source) {
   const existing = styleHistory.find((s) => s.selector === selector && s.hash === hash);
   if (existing) return existing.id;
   const id = `snapshot_${currentSnapshotId++}`;
-  const snapshot = {
-    id,
-    timestamp: Date.now(),
-    selector,
-    styles: { ...styles },
-    source,
-    hash
-  };
-  styleHistory.push(snapshot);
-  const previousSnapshot = styleHistory.slice(-2)[0];
-  if (previousSnapshot && previousSnapshot.selector === selector) {
+  styleHistory.push({ id, timestamp: Date.now(), selector, styles: { ...styles }, source, hash });
+  const previous = styleHistory[styleHistory.length - 2];
+  if (previous && previous.selector === selector) {
     for (const [key, value] of Object.entries(styles)) {
-      const oldValue = previousSnapshot.styles[key];
-      if (!(key in previousSnapshot.styles)) {
+      if (!(key in previous.styles)) {
         styleChanges.push({
-          id: `change_${Date.now()}_${Math.random()}`,
+          id: `change_${Date.now()}_${Math.random().toString(36).slice(2)}`,
           timestamp: Date.now(),
           selector,
           property: key,
@@ -451,26 +440,26 @@ function takeSnapshot(selector, styles, source) {
           newValue: value,
           type: "add"
         });
-      } else if (JSON.stringify(oldValue) !== JSON.stringify(value)) {
+      } else if (JSON.stringify(previous.styles[key]) !== JSON.stringify(value)) {
         styleChanges.push({
-          id: `change_${Date.now()}_${Math.random()}`,
+          id: `change_${Date.now()}_${Math.random().toString(36).slice(2)}`,
           timestamp: Date.now(),
           selector,
           property: key,
-          oldValue,
+          oldValue: previous.styles[key],
           newValue: value,
           type: "modify"
         });
       }
     }
-    for (const [key] of Object.entries(previousSnapshot.styles)) {
+    for (const [key] of Object.entries(previous.styles)) {
       if (!(key in styles)) {
         styleChanges.push({
-          id: `change_${Date.now()}_${Math.random()}`,
+          id: `change_${Date.now()}_${Math.random().toString(36).slice(2)}`,
           timestamp: Date.now(),
           selector,
           property: key,
-          oldValue: previousSnapshot.styles[key],
+          oldValue: previous.styles[key],
           newValue: void 0,
           type: "remove"
         });
@@ -479,20 +468,47 @@ function takeSnapshot(selector, styles, source) {
   }
   return id;
 }
+function isTimelineEnabled() {
+  return timelineEnabled;
+}
+
+// src/compiler/scanner.ts
+import fs2 from "fs";
+function scanFileForStyles(filePath, optimizer, source = null) {
+  const errors = [];
+  let foundCount = 0;
+  try {
+    const content = source !== null ? source : fs2.readFileSync(filePath, "utf8");
+    if (!content || content.trim().length === 0) return { foundCount: 0, errors };
+    const styleRegex = /(?:chain|smartChain|\$)\(((?:[^()]|\([^()]*\))*)\)/g;
+    let match;
+    while ((match = styleRegex.exec(content)) !== null) {
+      try {
+        const styleBody = match[1].trim();
+        const cleanBody = styleBody.replace(/^['"\`]|['"\`]$/g, "");
+        if (cleanBody && optimizer && typeof optimizer.trackStyles === "function") {
+          optimizer.trackStyles([{ selectors: { "&": cleanBody } }]);
+          foundCount++;
+        }
+      } catch (parseError) {
+        errors.push(parseError);
+      }
+    }
+  } catch (err) {
+    errors.push(err);
+  }
+  return { foundCount, errors };
+}
+
+// src/compiler/btt.ts
 var enableSourceComments = true;
 function getSourceLocation() {
   if (!enableSourceComments) return null;
   const stack = new Error().stack;
   if (!stack) return null;
-  const stackLines = stack.split("\n");
-  for (let i = 0; i < stackLines.length; i++) {
-    const line = stackLines[i];
+  for (const line of stack.split("\n")) {
     const match = line.match(/([^/]+\.chain\.js):(\d+):\d+/);
-    if (match) {
-      const fileName = match[1];
-      const lineNumber = match[2];
-      return `${fileName}:${lineNumber}`;
-    }
+    if (match) return `${match[1]}:${match[2]}`;
   }
   return null;
 }
@@ -529,9 +545,7 @@ var fetchWithHttps = (url) => {
   });
 };
 var loadCSSProperties = async () => {
-  if (chains.cachedValidProperties !== null && chains.cachedValidProperties.length > 0) {
-    return chains.cachedValidProperties;
-  }
+  if (chains.cachedValidProperties?.length > 0) return chains.cachedValidProperties;
   try {
     const url = "https://raw.githubusercontent.com/mdn/data/main/css/properties.json";
     let data;
@@ -545,14 +559,9 @@ var loadCSSProperties = async () => {
       data = await fetchWithHttps(url);
     }
     const allProperties = Object.keys(data);
-    const baseProperties = /* @__PURE__ */ new Set();
-    allProperties.forEach((prop) => {
-      const baseProp = prop.replace(/^-(webkit|moz|ms|o)-/, "");
-      baseProperties.add(baseProp);
-    });
-    chains.cachedValidProperties = Array.from(baseProperties).sort();
+    chains.cachedValidProperties = allProperties.map((p) => p.replace(/^-(webkit|moz|ms|o)-/, "")).filter((v, i, a) => a.indexOf(v) === i).sort();
     return chains.cachedValidProperties;
-  } catch (error) {
+  } catch {
     chains.cachedValidProperties = COMMON_CSS_PROPERTIES;
     return chains.cachedValidProperties;
   }
@@ -563,11 +572,8 @@ var chains = {
   classMap: {},
   atomicStats: null,
   async initializeProperties() {
-    if (this.cachedValidProperties && this.cachedValidProperties.length > 0) {
-      return;
-    }
-    const properties = await loadCSSProperties();
-    this.cachedValidProperties = properties;
+    if (this.cachedValidProperties?.length > 0) return;
+    this.cachedValidProperties = await loadCSSProperties();
   },
   getCachedProperties() {
     return this.cachedValidProperties;
@@ -584,21 +590,13 @@ function processAtRule(rule, parentSelectors = null) {
       output = `@media ${rule.query} {
 `;
       if (rule.styles && typeof rule.styles === "object") {
-        let ruleBody = "";
-        for (const prop in rule.styles) {
-          const kebabKey = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
-          ruleBody += `    ${kebabKey}: ${rule.styles[prop]};
+        let body = "";
+        for (const prop in rule.styles) body += `    ${prop.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${rule.styles[prop]};
 `;
-        }
-        if (ruleBody.trim()) {
-          const selector = parentSelectors && parentSelectors.length > 0 ? parentSelectors.join(", ") : ".unknown-selector";
-          const sourceLocation = getSourceLocation();
-          if (enableSourceComments && sourceLocation) {
-            output += `  /* Generated from: ${sourceLocation} */
-`;
-          }
-          output += `  ${selector} {
-${ruleBody}  }
+        if (body.trim()) {
+          const sel = parentSelectors?.length ? parentSelectors.join(", ") : ".unknown-selector";
+          output += `  ${sel} {
+${body}  }
 `;
         }
       }
@@ -611,11 +609,8 @@ ${ruleBody}  }
         output += `  ${step} {
 `;
         for (const prop in rule.steps[step]) {
-          if (prop !== "selectors") {
-            const kebabKey = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
-            output += `    ${kebabKey}: ${rule.steps[step][prop]};
+          if (prop !== "selectors") output += `    ${prop.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${rule.steps[step][prop]};
 `;
-          }
         }
         output += "  }\n";
       }
@@ -624,17 +619,11 @@ ${ruleBody}  }
     case "font-face":
       output = "@font-face {\n";
       for (const prop in rule.properties) {
-        if (prop !== "selectors") {
-          const kebabKey = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
-          output += `  ${kebabKey}: ${rule.properties[prop]};
+        if (prop !== "selectors") output += `  ${prop.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${rule.properties[prop]};
 `;
-        }
       }
       output += "}\n";
       break;
-    default:
-      output = "";
-      break;
   }
   return output;
 }
@@ -646,25 +635,20 @@ var compile = (obj) => {
     if (!obj.hasOwnProperty(key)) continue;
     const element = obj[key];
     if (element && element.variants && typeof element.compileAll === "function") {
-      const cleanKey = key.includes("_") ? key.split("_").pop() : key;
-      const recipeOutput = element.compileAll(cleanKey);
-      cssString += recipeOutput + "\n";
+      cssString += element.compileAll(key.includes("_") ? key.split("_").pop() : key) + "\n";
       continue;
     }
-    if (!element || !element.selectors || !element.selectors[0]) continue;
+    if (!element?.selectors?.[0]) continue;
     const selectorKey = element.selectors.join(",");
     if (processedSelectors.has(selectorKey)) continue;
     processedSelectors.add(selectorKey);
     collected.push(element);
     const sourceLocation = getSourceLocation();
-    let elementCSS = "";
-    let subRulesCSS = "";
-    if (timelineEnabled) {
+    let elementCSS = "", subRulesCSS = "";
+    if (isTimelineEnabled()) {
       const styles = {};
       for (const prop in element) {
-        if (!["selectors", "atRules", "hover", "nestedRules", "use", "nest", "themes"].includes(prop)) {
-          styles[prop] = element[prop];
-        }
+        if (!["selectors", "atRules", "hover", "nestedRules", "use", "nest", "themes"].includes(prop)) styles[prop] = element[prop];
       }
       takeSnapshot(element.selectors[0], styles, sourceLocation || "unknown");
     }
@@ -674,41 +658,25 @@ var compile = (obj) => {
       if (prop.startsWith("_") || !element.hasOwnProperty(prop)) continue;
       const value = element[prop];
       if (value === void 0 || value === null) continue;
-      const kebabKey = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
-      elementCSS += `  ${kebabKey}: ${value};
+      elementCSS += `  ${prop.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${value};
 `;
     }
-    if (elementCSS.trim()) {
-      let block = `${element.selectors.join(", ")} {
+    if (elementCSS.trim()) cssString += addSourceComment(`${element.selectors.join(", ")} {
 ${elementCSS}}
-`;
-      cssString += addSourceComment(block, sourceLocation);
-    }
+`, sourceLocation);
     if (element.hover && typeof element.hover === "object") {
-      let hoverBody = "";
-      for (const hProp in element.hover) {
-        const hKebab = hProp.replace(/([A-Z])/g, "-$1").toLowerCase();
-        hoverBody += `  ${hKebab}: ${element.hover[hProp]};
-`;
-      }
-      if (hoverBody) {
-        let block = `${element.selectors.join(", ")}:hover {
-${hoverBody}}
+      let hb = "";
+      for (const hp in element.hover) hb += `  ${hp.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${element.hover[hp]};
 `;
-        cssString += addSourceComment(block, sourceLocation);
-      }
+      if (hb) cssString += addSourceComment(`${element.selectors.join(", ")}:hover {
+${hb}}
+`, sourceLocation);
     }
     for (const prop in element) {
       if ((prop.startsWith(".") || prop.startsWith("&")) && typeof element[prop] === "object") {
-        const subElement = element[prop];
-        const parentSelector = element.selectors[0];
-        const subSelector = prop.startsWith("&") ? prop.replace("&", parentSelector) : `${parentSelector} ${prop}`;
-        cssString += compile({
-          [subSelector]: {
-            selectors: [subSelector],
-            ...subElement
-          }
-        }) + "\n";
+        const parentSel = element.selectors[0];
+        const subSel = prop.startsWith("&") ? prop.replace("&", parentSel) : `${parentSel} ${prop}`;
+        cssString += compile({ [subSel]: { selectors: [subSel], ...element[prop] } }) + "\n";
       }
     }
     if (element.atRules && Array.isArray(element.atRules)) {
@@ -719,25 +687,21 @@ ${hoverBody}}
     if (element.themes && Array.isArray(element.themes)) {
       element.themes.forEach((theme) => {
         if (theme.styles) {
-          let themeCSS = "";
-          for (const tProp in theme.styles) {
-            if (tProp === "selectors") continue;
-            const tKebab = tProp.replace(/([A-Z])/g, "-$1").toLowerCase();
-            themeCSS += `  ${tKebab}: ${theme.styles[tProp]};
+          let tc = "";
+          for (const tp in theme.styles) {
+            if (tp === "selectors") continue;
+            tc += `  ${tp.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${theme.styles[tp]};
 `;
           }
-          if (themeCSS) {
-            let block = `${theme.styles.selectors?.join(", ") || element.selectors.join(", ")} {
-${themeCSS}}
-`;
-            subRulesCSS += addSourceComment(block, sourceLocation);
-          }
+          if (tc) subRulesCSS += addSourceComment(`${theme.styles.selectors?.join(", ") || element.selectors.join(", ")} {
+${tc}}
+`, sourceLocation);
         }
       });
     }
     cssString += subRulesCSS;
   }
-  if (atomicOptimizer && atomicOptimizer.options.enabled) {
+  if (atomicOptimizer?.options.enabled) {
     const result = atomicOptimizer.optimize(collected);
     chains.cssOutput = result.css;
     return result.css;
@@ -745,48 +709,8 @@ ${themeCSS}}
   chains.cssOutput = cssString.trim();
   return chains.cssOutput;
 };
-function scanFileForStyles(filePath, optimizer, source = null) {
-  const errors = [];
-  let foundCount = 0;
-  try {
-    const content = source !== null ? source : fs2.readFileSync(filePath, "utf8");
-    if (!content || content.trim().length === 0) {
-      return { foundCount: 0, errors };
-    }
-    const styleRegex = /(?:chain|\$)\(((?:[^()]|\([^()]*\))*)\)/g;
-    let match;
-    while ((match = styleRegex.exec(content)) !== null) {
-      try {
-        const styleBody = match[1].trim();
-        const cleanBody = styleBody.replace(/^['"`]|['"`]$/g, "");
-        if (cleanBody) {
-          if (optimizer && typeof optimizer.trackStyles === "function") {
-            optimizer.trackStyles([{ selectors: { "&": cleanBody } }]);
-          }
-          foundCount++;
-        }
-      } catch (parseError) {
-        errors.push(parseError);
-        if (process.env.DEBUG) {
-          console.error(`[Scanner] Parse error in ${filePath}:`, parseError);
-        }
-      }
-    }
-    if (foundCount > 0 && process.env.DEBUG) {
-      console.log(chalk.magenta(`[Scanner] Found ${foundCount} styles in ${filePath}`));
-    }
-  } catch (err) {
-    errors.push(err);
-    if (process.env.DEBUG) {
-      console.error(`[Scanner] Error processing ${filePath}:`, err);
-    }
-  }
-  return { foundCount, errors };
-}
 chains.initializeProperties().catch((err) => {
-  if (process.env.DEBUG) {
-    console.error("Failed to load CSS properties:", err.message);
-  }
+  if (process.env.DEBUG) console.error("Failed to load CSS properties:", err.message);
 });
 
 // src/compiler/atomic-optimizer.ts
@@ -2719,7 +2643,7 @@ var ChainCSSCompiler = class {
       if (oldest) {
         this.styleCache.delete(oldest);
         if (this.config.verbose) {
-          console.log(chalk2.gray(`  \u{1F9F9} Cache evicted: ${oldest.slice(0, 8)}...`));
+          console.log(chalk.gray(`  \u{1F9F9} Cache evicted: ${oldest.slice(0, 8)}...`));
         }
       }
     }
@@ -2739,7 +2663,7 @@ var ChainCSSCompiler = class {
         console.log(`  \u2514\u2500 Processed ${processedCount} chain() styles from ${id.split("/").pop()}`);
       }
     } catch (error) {
-      console.error(chalk2.red(`  \u274C Error compiling source ${id}: ${error}`));
+      console.error(chalk.red(`  \u274C Error compiling source ${id}: ${error}`));
     }
   }
   /**
@@ -2764,7 +2688,7 @@ var ChainCSSCompiler = class {
       }
     } catch (err) {
       if (this.config.verbose) {
-        console.warn(chalk2.yellow(`  \u26A0\uFE0F  Failed to parse style body: ${input.substring(0, 100)}...`));
+        console.warn(chalk.yellow(`  \u26A0\uFE0F  Failed to parse style body: ${input.substring(0, 100)}...`));
       }
     }
     return {};
@@ -2973,7 +2897,7 @@ var ChainCSSCompiler = class {
       if (this.atomicOptimizer) this.atomicOptimizer.reset();
       this.accumulatedCSS = "";
       if (!this.config.silent) {
-        console.log(chalk2.blue("\n\u{1F50D} Phase 1: Scanning & Usage Analysis..."));
+        console.log(chalk.blue("\n\u{1F50D} Phase 1: Scanning & Usage Analysis..."));
       }
       const BATCH_SIZE = PERFORMANCE.BATCH_SIZE || 10;
       const errors = [];
@@ -2998,7 +2922,7 @@ var ChainCSSCompiler = class {
             }
           } catch (err) {
             if (this.config.verbose) {
-              console.warn(chalk2.yellow(`  \u26A0\uFE0F  Scanning fallback for ${path5.basename(file)}`));
+              console.warn(chalk.yellow(`  \u26A0\uFE0F  Scanning fallback for ${path5.basename(file)}`));
             }
             const result = scanFileForStyles(file, this.atomicOptimizer);
             if (result.errors.length > 0) {
@@ -3009,14 +2933,14 @@ var ChainCSSCompiler = class {
         });
         await Promise.allSettled(batchPromises);
         if (this.config.verbose && i % (BATCH_SIZE * 5) === 0) {
-          console.log(chalk2.gray(`  \u{1F4CA} Processed ${Math.min(i + BATCH_SIZE, components.length)}/${components.length} files`));
+          console.log(chalk.gray(`  \u{1F4CA} Processed ${Math.min(i + BATCH_SIZE, components.length)}/${components.length} files`));
         }
       }
       if (errors.length > 0 && this.config.verbose) {
-        console.warn(chalk2.yellow(`  \u26A0\uFE0F  ${errors.length} scanning errors occurred`));
+        console.warn(chalk.yellow(`  \u26A0\uFE0F  ${errors.length} scanning errors occurred`));
       }
       if (!this.config.silent) {
-        console.log(chalk2.blue("\n\u{1F3D7}\uFE0F  Phase 2: Generating Component Styles..."));
+        console.log(chalk.blue("\n\u{1F3D7}\uFE0F  Phase 2: Generating Component Styles..."));
       }
       const publicDir = path5.resolve(process.cwd(), "public");
       const manifestDir = path5.resolve(process.cwd(), ".chaincss", "manifest");
@@ -3047,7 +2971,7 @@ var ChainCSSCompiler = class {
               const result = this.compileStyle(name, style);
               if (this.config.verbose) {
                 const className2 = Object.values(result.classMap)[0];
-                console.log(chalk2.gray(`   \u{1F4DD} ${name} \u2192 ${className2 || "(empty)"}`));
+                console.log(chalk.gray(`   \u{1F4DD} ${name} \u2192 ${className2 || "(empty)"}`));
               }
               const className = Object.values(result.classMap)[0];
               if (className) {
@@ -3073,21 +2997,21 @@ var ChainCSSCompiler = class {
             }
             processedComponents++;
             if (this.config.verbose) {
-              console.log(chalk2.green(`   \u2728 ${baseName} \u2192 ${path5.relative(process.cwd(), classFilePath)}`));
+              console.log(chalk.green(`   \u2728 ${baseName} \u2192 ${path5.relative(process.cwd(), classFilePath)}`));
             }
           }
         } catch (error) {
-          console.error(chalk2.red(`   \u274C Failed to process ${baseName}: ${error.message}`));
+          console.error(chalk.red(`   \u274C Failed to process ${baseName}: ${error.message}`));
         }
       }
       if (!this.config.silent) {
-        console.log(chalk2.blue("\n\u{1F30D} Phase 3: Finalizing Global Assets..."));
+        console.log(chalk.blue("\n\u{1F30D} Phase 3: Finalizing Global Assets..."));
       }
       const finalAtomicCSS = this.atomicOptimizer ? this.atomicOptimizer.generateAtomicCSS() : "";
       const globalCssPath = path5.join(publicDir, "global.css");
       fs6.writeFileSync(globalCssPath, formatCSS(finalAtomicCSS, this.config.output.minify));
       if (this.config.verbose) {
-        console.log(chalk2.blue(`   \u{1F4E6} Global CSS \u2192 ${path5.relative(process.cwd(), globalCssPath)} (${finalAtomicCSS.length} bytes)`));
+        console.log(chalk.blue(`   \u{1F4E6} Global CSS \u2192 ${path5.relative(process.cwd(), globalCssPath)} (${finalAtomicCSS.length} bytes)`));
       }
       const manifestData = {
         version: VERSION,
@@ -3099,25 +3023,25 @@ var ChainCSSCompiler = class {
       const manifestPath = path5.join(manifestDir, "manifest.json");
       fs6.writeFileSync(manifestPath, JSON.stringify(manifestData, null, 2));
       if (this.config.verbose) {
-        console.log(chalk2.blue(`   \u{1F4E6} Manifest \u2192 ${path5.relative(process.cwd(), manifestPath)}`));
+        console.log(chalk.blue(`   \u{1F4E6} Manifest \u2192 ${path5.relative(process.cwd(), manifestPath)}`));
       }
       if (!this.config.silent) {
-        console.log(chalk2.green(`
+        console.log(chalk.green(`
 \u2705 Build Complete!`));
-        console.log(chalk2.gray(`   \u{1F4C1} Components processed: ${processedComponents}`));
-        console.log(chalk2.gray(`   \u{1F4C1} Class files generated: ${generatedClassFiles.length}`));
-        console.log(chalk2.gray(`   \u{1F4C1} Global CSS: ${path5.relative(process.cwd(), globalCssPath)}`));
-        console.log(chalk2.gray(`   \u{1F4C1} Manifest: ${path5.relative(process.cwd(), manifestPath)}`));
+        console.log(chalk.gray(`   \u{1F4C1} Components processed: ${processedComponents}`));
+        console.log(chalk.gray(`   \u{1F4C1} Class files generated: ${generatedClassFiles.length}`));
+        console.log(chalk.gray(`   \u{1F4C1} Global CSS: ${path5.relative(process.cwd(), globalCssPath)}`));
+        console.log(chalk.gray(`   \u{1F4C1} Manifest: ${path5.relative(process.cwd(), manifestPath)}`));
         if (this.atomicOptimizer) {
           const atomicCount = Object.keys(this.atomicOptimizer.atomicMap).length;
           const stats = this.atomicOptimizer.getStats();
-          console.log(chalk2.cyan(`
+          console.log(chalk.cyan(`
 \u{1F4CA} Optimization Stats:`));
-          console.log(chalk2.gray(`   Atomic Rules: ${atomicCount}`));
-          console.log(chalk2.gray(`   Total Styles: ${stats.totalStyles}`));
-          console.log(chalk2.gray(`   Unique Properties: ${stats.uniqueProperties}`));
+          console.log(chalk.gray(`   Atomic Rules: ${atomicCount}`));
+          console.log(chalk.gray(`   Total Styles: ${stats.totalStyles}`));
+          console.log(chalk.gray(`   Unique Properties: ${stats.uniqueProperties}`));
           if (stats.savings) {
-            console.log(chalk2.green(`   CSS Savings: ${stats.savings}`));
+            console.log(chalk.green(`   CSS Savings: ${stats.savings}`));
           }
         }
       }

package/index.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>ChainCSS Vanilla JS</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module">
+    import { chain, injectChainStyles } from 'chaincss';
+
+    const heading = chain()
+      .fs(48)
+      .fw(800)
+      .textGradient(['#6366f1', '#06b6d4'])
+      .$el('heading');
+
+    const button = chain()
+      .display('inline-flex')
+      .px(28)
+      .py(14)
+      .bg('#6366f1')
+      .color('white')
+      .rounded(12)
+      .border('none')
+      .cursor('pointer')
+      .hover().bg('#4f46e5').transform('translateY(-2px)').end()
+      .$el('btn');
+
+    // Inject styles
+    injectChainStyles({ heading, button });
+
+    // Build UI
+    document.getElementById('app').innerHTML = `
+      <h1 class="${heading.selectors[0]}">Hello ChainCSS!</h1>
+      <button class="${button.selectors[0]}" onclick="alert('Clicked!')">
+        Vanilla JS Button
+      </button>
+    `;
+  </script>
+</body>
+</html>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "chaincss",
-  "version": "2.1.29",
-  "description": "ChainCSS - The first CSS-in-JS library with true auto-detection mixed mode. Zero runtime by default, dynamic when you need it.",
+  "version": "2.1.31",
+  "description": "ChainCSS v3.0 - 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",
   "types": "./dist/index.d.ts",
@@ -33,14 +33,15 @@
     }
   },
   "scripts": {
-    "build": "npm run build:clean && npm run build:types && npm run build:core && npm run build:cli && npm run build:plugins && npm run build:runtime && npm run build:compiler",
+    "build": "npm run build:clean && npm run build:types && npm run build:core && npm run build:cli && npm run build:plugins && npm run build:runtime && npm run build:browser && npm run build:compiler",
     "build:clean": "rm -rf dist",
     "build:types": "tsc -p tsconfig.build.json",
-    "build:core": "esbuild src/index.ts --bundle --platform=node --format=esm --outfile=dist/index.js --external:autoprefixer --external:browserslist --external:caniuse-db --external:autoprefixer --external:browserslist --external:caniuse-db --packages=external",
-    "build:cli": "esbuild src/cli/index.ts --bundle --platform=node --format=esm --outfile=dist/cli/index.js --external:autoprefixer --external:browserslist --external:caniuse-db --external:autoprefixer --external:browserslist --external:caniuse-db --packages=external && chmod +x dist/cli/index.js",
-    "build:plugins": "esbuild src/plugins/vite.ts --bundle --platform=node --format=esm --outfile=dist/plugins/vite.js --external:autoprefixer --external:browserslist --external:caniuse-db --packages=external && esbuild src/plugins/webpack.ts --bundle --platform=node --format=esm --outfile=dist/plugins/webpack.js --external:autoprefixer --external:browserslist --external:caniuse-db --packages=external",
+    "build:core": "esbuild src/index.ts --bundle --platform=node --format=esm --outfile=dist/index.js --packages=external",
+    "build:cli": "esbuild src/cli/index.ts --bundle --platform=node --format=esm --outfile=dist/cli/index.js --packages=external && chmod +x dist/cli/index.js",
+    "build:plugins": "esbuild src/plugins/vite.ts --bundle --platform=node --format=esm --outfile=dist/plugins/vite.js --packages=external && esbuild src/plugins/webpack.ts --bundle --platform=node --format=esm --outfile=dist/plugins/webpack.js --packages=external",
     "build:runtime": "esbuild src/runtime/index.ts --bundle --platform=browser --format=esm --outfile=dist/runtime/index.js --external:react --external:react-dom --external:vue --external:svelte",
-    "build:compiler": "esbuild src/compiler/index.ts --bundle --platform=node --format=esm --outfile=dist/compiler/index.js --external:autoprefixer --external:browserslist --external:caniuse-db --external:autoprefixer --external:browserslist --external:caniuse-db --packages=external",
+    "build:browser": "esbuild src/browser.ts --bundle --platform=browser --format=esm --outfile=dist/browser.js --external:react --external:react-dom --external:vue --external:svelte",
+    "build:compiler": "esbuild src/compiler/index.ts --bundle --platform=node --format=esm --outfile=dist/compiler/index.js --packages=external",
     "dev": "tsc -w",
     "prepublishOnly": "npm run build",
     "test": "vitest run",

package/src/browser.ts

@@ -0,0 +1,9 @@
+// Lightweight browser-only entry for vanilla JS
+// No React, Vue, Svelte, HMR, or Node.js deps
+export { chain, createChain, enableDebug, setTokenContext, getTokenContext } from './compiler/Chain.js';
+export { $, $t, chain as runtimeChain, setManifest, setTokens } from './runtime/Chain.js';
+export { smartChain, buildChain, runtimeChain as smartRuntimeChain } from './core/smart-chain.js';
+export { shorthandMap, macros, getAvailableShorthands } from './compiler/shorthands.js';
+export { animationPresets, createAnimation, getAnimationPreset, getAnimationPresetNames } from './compiler/animations.js';
+export { helpers } from './compiler/helpers.js';
+export { injectChainStyles, inspectSplit } from './runtime/index.js';