@melcanz85/chaincss 1.12.5 → 1.12.6

package/browser/react-hooks.js

@@ -1,7 +1,9 @@
-import { useMemo, useEffect, useRef, useState } from 'react';
+import React, { useMemo, useEffect, useRef, useState } from 'react';
 import { $, compile, chain } from './rtt';
+
 const styleCache = new Map();
 let styleSheet = null;
+
 const initStyleSheet = () => {
   if (typeof document === 'undefined') return null;
   if (!styleSheet) {
@@ -18,31 +20,38 @@ const initStyleSheet = () => {
   }
   return styleSheet;
 };
+
 const updateStyles = (css) => {
   const sheet = initStyleSheet();
   if (sheet) {
     sheet.textContent = css;
   }
 };
+
 export function useChainStyles(styles, deps = [], options = {}) {
   const {
     cache = true,
     namespace = 'chain',
     watch = false
   } = options;
+  
   const id = useRef(`chain-${Math.random().toString(36).substr(2, 9)}`);
   const [classNames, setClassNames] = useState({});
+  
   const processed = useMemo(() => {
     const resolvedStyles = typeof styles === 'function' ? styles() : styles;
     if (!resolvedStyles || Object.keys(resolvedStyles).length === 0) {
       return { classNames: {}, css: '' };
     }
+    
     const cacheKey = JSON.stringify(resolvedStyles);
     if (cache && styleCache.has(cacheKey)) {
       return styleCache.get(cacheKey);
     }
+    
     const newClassNames = {};
     const compiledStyles = {};
+    
     Object.entries(resolvedStyles).forEach(([key, styleDef]) => {
       const className = `${namespace}-${key}-${id.current}`;
       const styleObj = typeof styleDef === 'function' 
@@ -54,14 +63,17 @@ export function useChainStyles(styles, deps = [], options = {}) {
         ...styleObj
       };
     });
+    
     compile(compiledStyles);
     const css = chain.cssOutput;
     const result = { classNames: newClassNames, css };
+    
     if (cache) {
       styleCache.set(cacheKey, result);
     }
     return result;
   }, [styles, namespace, id.current, ...deps]);
+  
   useEffect(() => {
     if (processed.css) {
       if (!watch) {
@@ -76,6 +88,7 @@ export function useChainStyles(styles, deps = [], options = {}) {
         updateStyles(processed.css);
       }
     }
+    
     return () => {
       if (!watch && styleSheet) {
         const existingStyles = styleSheet.textContent || '';
@@ -84,14 +97,17 @@ export function useChainStyles(styles, deps = [], options = {}) {
       }
     };
   }, [processed.css, watch]);
+  
   return processed.classNames;
 }
+
 export function useDynamicChainStyles(styleFactory, deps = [], options = {}) {
   const styles = useMemo(() => {
     return styleFactory();
   }, deps);
   return useChainStyles(styles, options);
 }
+
 export function useThemeChainStyles(styles, theme, options = {}) {
   const themedStyles = useMemo(() => {
     if (typeof styles === 'function') {
@@ -101,19 +117,22 @@ export function useThemeChainStyles(styles, theme, options = {}) {
   }, [styles, theme]);
   return useChainStyles(themedStyles, options);
 }
+
 export function ChainCSSGlobal({ styles }) {
   useChainStyles(styles, { watch: true });
   return null;
 }
+
 export function withChainStyles(styles, options = {}) {
   return function WrappedComponent(props) {
     const classNames = useChainStyles(
       typeof styles === 'function' ? styles(props) : styles,
       options
     );
-    return <WrappedComponent {...props} chainStyles={classNames} />;
+    return React.createElement(WrappedComponent, { ...props, chainStyles: classNames });
   };
 }
+
 export function cx(...classes) {
   return classes.filter(Boolean).join(' ');
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@melcanz85/chaincss",
-  "version": "1.12.5",
+  "version": "1.12.6",
   "description": "Chainable CSS-in-JS with build-time compilation, atomic CSS, and zero-runtime options",
   "keywords": [
     "css",