chaincss 2.1.10 → 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/dist/runtime/index.d.ts

@@ -22,3 +22,4 @@ export declare const chainStyles: (...args: any[]) => any;
 export { setupHMR, registerForHMR } from './hmr.js';
 export { generateStyleId, hashString, kebabCase, isBrowser, isDevelopment, isProduction, debounce, memoize, cn as cnUtils, devWarn, devLog, logError, createDebugger } from './utils.js';
 export type { RuntimeStyleDefinition, UseChainStylesOptions, RuntimeCompiledResult, StyleInjector, UseAtomicClassesReturn, HMRPayload, ChainCSSDebugger } from './types.js';
+export declare function injectChainStyles(styles: Record<string, any>): HTMLStyleElement;

package/dist/runtime/index.js

@@ -3907,6 +3907,36 @@ var useComputedStylesSvelte = (...args) => getSvelteExports().useComputedStyles?
 var provideStyleContextSvelte = (...args) => getSvelteExports().provideStyleContext?.(...args);
 var injectStyleContextSvelte = (...args) => getSvelteExports().injectStyleContext?.(...args);
 var chainStyles2 = (...args) => getSvelteExports().chainStyles?.(...args);
+function injectChainStyles(styles3) {
+  let css = "";
+  for (const [key, obj] of Object.entries(styles3)) {
+    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;
+}
 export {
   $,
   $t,
@@ -3932,6 +3962,7 @@ export {
   enableChainCSSDebug,
   generateStyleId,
   hashString,
+  injectChainStyles,
   injectStyleContext,
   injectStyleContextSvelte,
   isBrowser,

package/package.json

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

package/src/runtime/index.ts

@@ -88,4 +88,35 @@ export type {
   UseAtomicClassesReturn,
   HMRPayload,
   ChainCSSDebugger
-} from './types.js';
+} from './types.js';
+// Auto-inject styles into DOM
+export function injectChainStyles(styles: Record<string, any>) {
+  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;
+}