chaincss 2.1.11 → 2.1.12

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chaincss",
-  "version": "2.1.11",
+  "version": "2.1.12",
   "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';
 
 // ============================================================================