chaincss 2.1.11 → 2.1.13

package/dist/index.d.ts

@@ -3,6 +3,7 @@
  * @packageDocumentation
  */
 export { smartChain, smartChain as chainV3, buildChain, runtimeChain } from './core/smart-chain.js';
+export { injectChainStyles } from './runtime/index.js';
 export { autoDetector, AutoDetector, type ValueType, type Mode } from './core/auto-detector.js';
 export { useSmartStyles, createSmartComponent, withSmartStyles } from './runtime/auto-hooks.js';
 export { ChainCSSCompiler, compileChainCSS } from './core/compiler.js';

package/dist/index.js

@@ -3065,9 +3065,6 @@ function smartChain(useTokens = true) {
 var buildChain = (useTokens) => chain(useTokens);
 var runtimeChain = (useTokens) => new RuntimeChain(useTokens || true).proxy;
 
-// src/runtime/auto-hooks.tsx
-import React, { useEffect, useRef, useState } from "react";
-
 // src/core/common-utils.ts
 function kebabCase(str) {
   return str.replace(/([A-Z])/g, "-$1").toLowerCase();
@@ -3353,7 +3350,40 @@ ${rules}}
 var styleInjector = new StyleInjector();
 var compileRuntime = (s, moduleId) => styleInjector.injectMultiple(s, moduleId);
 
+// src/runtime/index.ts
+function injectChainStyles(styles) {
+  let css = "";
+  for (const [key, obj] of Object.entries(styles)) {
+    if (!obj || !obj.selectors) continue;
+    const sel = "." + obj.selectors[0];
+    css += sel + "{";
+    for (const [k, v] of Object.entries(obj)) {
+      if (["selectors", "hover", "atRules", "nestedRules", "_name", "_classes"].includes(k)) continue;
+      css += k.replace(/([A-Z])/g, "-$1").toLowerCase() + ":" + v + ";";
+    }
+    css += "}";
+    if (obj.hover) {
+      css += sel + ":hover{";
+      for (const [k, v] of Object.entries(obj.hover)) css += k.replace(/([A-Z])/g, "-$1").toLowerCase() + ":" + v + ";";
+      css += "}";
+    }
+    if (obj.nestedRules) {
+      for (const rule of obj.nestedRules) {
+        css += rule.selector.replace("&", sel) + "{";
+        for (const [k, v] of Object.entries(rule.styles || {})) css += k.replace(/([A-Z])/g, "-$1").toLowerCase() + ":" + v + ";";
+        css += "}";
+      }
+    }
+  }
+  const el = document.createElement("style");
+  el.setAttribute("data-chaincss", "runtime");
+  el.textContent = css;
+  document.head.appendChild(el);
+  return el;
+}
+
 // src/runtime/auto-hooks.tsx
+import React, { useEffect, useRef, useState } from "react";
 function useSmartStyles(styleBuilder, deps = [], options = {}) {
   const moduleId = useRef(options.moduleId || `smart-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`);
   const [classMap, setClassMap] = useState({});
@@ -7001,6 +7031,7 @@ export {
   handleShorthand,
   hasAnimationPreset,
   helpers,
+  injectChainStyles,
   isShorthand,
   macros,
   recipe,

package/dist/plugins/vite.js

@@ -3471,6 +3471,11 @@ const setManifest = (manifest) => {
         log(`Processing: ${fileName}`);
         processedFiles.add(id);
         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) {
@@ -3526,6 +3531,14 @@ ${source}`,
     },
     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.11",
+  "version": "2.1.13",
   "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",

package/src/index.ts

@@ -9,6 +9,7 @@
 // 🆕 NEW: Smart Chain API (Auto-detection mixed mode)
 // ============================================================================
 export { smartChain, smartChain as chainV3, buildChain, runtimeChain } from './core/smart-chain.js';
+export { injectChainStyles } from './runtime/index.js';
 export { autoDetector, AutoDetector, type ValueType, type Mode } from './core/auto-detector.js';
 
 // ============================================================================

package/src/plugins/vite.ts

@@ -295,6 +295,13 @@ const setManifest = (manifest) => {
         // 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();
@@ -372,6 +379,15 @@ const setManifest = (manifest) => {
     
     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