chaincss 2.1.10 → 2.1.11

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.11",
   "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/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;
+}