@melcanz85/chaincss 1.12.3 → 1.12.5

package/browser/index.js

@@ -1,2 +1,3 @@
-export * from './react-hooks.jsx';
-export {$,run,compile,chain,createTokens,responsive,tokens } from './rtt.js';
+// ChainCSS Browser Entry Point
+export { $, run, compile, chain, createTokens, responsive, tokens } from './rtt.js';
+export { useChainStyles, useDynamicChainStyles, useThemeChainStyles, ChainCSSGlobal, withChainStyles, cx } from './react-hooks.js';

package/node/btt.js

@@ -5,7 +5,7 @@ const { tokens, createTokens, responsive } = require('../shared/tokens.cjs');
 const { AtomicOptimizer } = require('./atomic-optimizer');
 
 const atomicOptimizer = new AtomicOptimizer({ 
-  enabled: false,  // default off; turn on via configure()
+  enabled: false,
   alwaysAtomic: [],
   neverAtomic: ['content', 'animation']
 });
@@ -18,8 +18,8 @@ const chain = {
   cssOutput: undefined,
   catcher: {},
   cachedValidProperties: [],
-  classMap: {},      // For atomic CSS class mapping
-  atomicStats: null, // For atomic optimizer stats
+  classMap: {},
+  atomicStats: null,
 
   initializeProperties() {
     try {
@@ -28,7 +28,7 @@ const chain = {
         const data = fs.readFileSync(jsonPath, 'utf8');
         this.cachedValidProperties = JSON.parse(data);
       } else {
-        console.log('CSS properties not cached, will load on first use');
+        console.log('⚠️ CSS properties not cached, will load on first use');
       }
     } catch (error) {
       console.error('Error loading CSS properties:', error.message);
@@ -154,31 +154,36 @@ function $(useTokens = true) {
         };
       }
 
-      // Handle .select() - renamed from $ to avoid conflict
+      // Handle .select() - nested selectors
       if (prop === 'select') {
         return function(selector) {
-          const props = {};
-          const selectorProxy = new Proxy({}, {
-            get: (target, methodProp) => {
-              if (methodProp === 'block') {
-                return function() {
-                  return {
-                    selectors: [selector],
-                    ...props
-                  };
+          const nestedStyles = {};
+          const nestedHandler = {
+            get: (nestedTarget, nestedProp) => {
+              if (nestedProp === 'block') {
+                return () => {
+                  if (!catcher.nestedRules) catcher.nestedRules = [];
+                  catcher.nestedRules.push({
+                    selector: selector,
+                    styles: { ...nestedStyles }
+                  });
+                  return proxy;
                 };
               }
-              return function(value) {
-                props[methodProp] = resolveToken(value, useTokens);
-                return selectorProxy;
+              return (value) => {
+                nestedStyles[nestedProp] = resolveToken(value, useTokens);
+                return nestedProxy;
               };
             }
-          });
-          return selectorProxy;
+          };
+          const nestedProxy = new Proxy({}, nestedHandler);
+          return nestedProxy;
         };
       }
 
-      // At-Rules
+      // ========== AT-RULES ==========
+
+      // @media
       if (prop === 'media') {
         return function(query, callback) {
           const subChain = $(useTokens);
@@ -193,6 +198,7 @@ function $(useTokens = true) {
         };
       }
 
+      // @keyframes
       if (prop === 'keyframes') {
         return function(name, callback) {
           const keyframeContext = { _keyframeSteps: {} };
@@ -228,10 +234,21 @@ function $(useTokens = true) {
         };
       }
 
+      // @font-face
       if (prop === 'fontFace') {
         return function(callback) {
-          const subChain = $(useTokens);
-          const fontProps = callback(subChain).block();
+          const fontProps = {};
+          const fontHandler = {
+            get: (target, fontProp) => {
+              return (value) => {
+                fontProps[fontProp] = resolveToken(value, useTokens);
+                return fontProxy;
+              };
+            }
+          };
+          const fontProxy = new Proxy({}, fontHandler);
+          callback(fontProxy);
+          
           if (!catcher.atRules) catcher.atRules = [];
           catcher.atRules.push({
             type: 'font-face',
@@ -241,71 +258,96 @@ function $(useTokens = true) {
         };
       }
 
+      // @supports
       if (prop === 'supports') {
         return function(condition, callback) {
           const subChain = $(useTokens);
-          const styles = callback(subChain).block();
+          const result = callback(subChain);
           if (!catcher.atRules) catcher.atRules = [];
           catcher.atRules.push({
             type: 'supports',
             condition: condition,
-            styles: styles
+            styles: result
           });
           return proxy;
         };
       }
 
+      // @container
       if (prop === 'container') {
         return function(condition, callback) {
           const subChain = $(useTokens);
-          const styles = callback(subChain).block();
+          const result = callback(subChain);
           if (!catcher.atRules) catcher.atRules = [];
           catcher.atRules.push({
             type: 'container',
             condition: condition,
-            styles: styles
+            styles: result
           });
           return proxy;
         };
       }
 
+      // @layer
       if (prop === 'layer') {
         return function(name, callback) {
           const subChain = $(useTokens);
-          const styles = callback(subChain).block();
+          const result = callback(subChain);
           if (!catcher.atRules) catcher.atRules = [];
           catcher.atRules.push({
             type: 'layer',
             name: name,
-            styles: styles
+            styles: result
           });
           return proxy;
         };
       }
 
+      // @counter-style
       if (prop === 'counterStyle') {
         return function(name, callback) {
-          const subChain = $(useTokens);
-          const properties = callback(subChain).block();
+          const counterProps = {};
+          const counterHandler = {
+            get: (target, counterProp) => {
+              return (value) => {
+                counterProps[counterProp] = resolveToken(value, useTokens);
+                return counterProxy;
+              };
+            }
+          };
+          const counterProxy = new Proxy({}, counterHandler);
+          callback(counterProxy);
+          
           if (!catcher.atRules) catcher.atRules = [];
           catcher.atRules.push({
             type: 'counter-style',
             name: name,
-            properties: properties
+            properties: counterProps
           });
           return proxy;
         };
       }
 
+      // @property
       if (prop === 'property') {
         return function(name, callback) {
-          const subChain = $(useTokens);
-          const descriptors = callback(subChain).block();
+          const propertyDescs = {};
+          const propertyHandler = {
+            get: (target, descProp) => {
+              return (value) => {
+                propertyDescs[descProp] = resolveToken(value, useTokens);
+                return propertyProxy;
+              };
+            }
+          };
+          const propertyProxy = new Proxy({}, propertyHandler);
+          callback(propertyProxy);
+          
           if (!catcher.atRules) catcher.atRules = [];
           catcher.atRules.push({
             type: 'property',
             name: name,
-            descriptors: descriptors
+            descriptors: propertyDescs
           });
           return proxy;
         };
@@ -326,7 +368,6 @@ function $(useTokens = true) {
   
   const proxy = new Proxy({}, handler);
   
-  // Async load CSS properties if needed
   if (chain.cachedValidProperties.length === 0) {
     chain.getCSSProperties().catch(err => {
       console.error('Failed to load CSS properties:', err.message);
@@ -336,7 +377,7 @@ function $(useTokens = true) {
   return proxy;
 }
 
-// Process at-rules
+// Process at-rules for CSS generation
 function processAtRule(rule, parentSelectors = null) {
   let output = '';
   
@@ -554,8 +595,21 @@ const run = (...args) => {
           continue;
         }
         
+        if (key === 'nestedRules' && Array.isArray(value[key])) {
+          value[key].forEach(rule => {
+            let nestedBody = '';
+            for (let prop in rule.styles) {
+              const kebabKey = prop.replace(/([A-Z])/g, '-$1').toLowerCase();
+              nestedBody += `    ${kebabKey}: ${rule.styles[prop]};\n`;
+            }
+            if (nestedBody) {
+              atRulesOutput += `${value.selectors.join(', ')} ${rule.selector} {\n${nestedBody}  }\n`;
+            }
+          });
+          continue;
+        }
+        
         if (key === 'hover' && typeof value[key] === 'object') {
-          // Handle hover styles
           let hoverBody = '';
           for (let hoverKey in value[key]) {
             const kebabKey = hoverKey.replace(/([A-Z])/g, '-$1').toLowerCase();
@@ -585,11 +639,11 @@ const run = (...args) => {
   chain.cssOutput = cssOutput;
 
   if (atomicOptimizer.options.enabled) {
-    const { css, map, stats } = atomicOptimizer.optimize(styleObjs);
-    chain.cssOutput = css;
-    chain.classMap = map;
-    chain.atomicStats = stats;
-    return css;
+    const result = atomicOptimizer.optimize(styleObjs);
+    chain.cssOutput = result.css;
+    chain.classMap = result.map;
+    chain.atomicStats = result.stats;
+    return result.css;
   }
   
   return cssOutput;
@@ -622,6 +676,17 @@ const compile = (obj) => {
           element[prop].forEach(rule => { 
             atRulesCSS += processAtRule(rule, element.selectors); 
           });
+        } else if (prop === 'nestedRules' && Array.isArray(element[prop])) {
+          element[prop].forEach(rule => {
+            let nestedBody = '';
+            for (let nestedProp in rule.styles) {
+              const kebabKey = nestedProp.replace(/([A-Z])/g, '-$1').toLowerCase();
+              nestedBody += `    ${kebabKey}: ${rule.styles[nestedProp]};\n`;
+            }
+            if (nestedBody) {
+              atRulesCSS += `${element.selectors.join(', ')} ${rule.selector} {\n${nestedBody}  }\n`;
+            }
+          });
         } else if (prop === 'hover' && typeof element[prop] === 'object') {
           let hoverBody = '';
           for (let hoverKey in element[prop]) {
@@ -647,11 +712,11 @@ const compile = (obj) => {
   chain.cssOutput = cssString.trim();
 
   if (atomicOptimizer.options.enabled) {
-    const { css, map, stats } = atomicOptimizer.optimize(collected);
-    chain.cssOutput = css;
-    chain.classMap = map;
-    chain.atomicStats = stats;
-    return css;
+    const result = atomicOptimizer.optimize(collected);
+    chain.cssOutput = result.css;
+    chain.classMap = result.map;
+    chain.atomicStats = result.stats;
+    return result.css;
   }
   
   return chain.cssOutput;
@@ -665,11 +730,9 @@ function recipe(options) {
     compoundVariants = []
   } = options;
 
-  // Store the original style objects
   const baseStyle = typeof base === 'function' ? base() : base;
   const variantStyles = {};
   
-  // Store variant style objects
   for (const [variantName, variantMap] of Object.entries(variants)) {
     variantStyles[variantName] = {};
     for (const [variantKey, variantStyle] of Object.entries(variantMap)) {
@@ -679,53 +742,12 @@ function recipe(options) {
     }
   }
 
-  // Store compound variant styles
   const compoundStyles = compoundVariants.map(cv => ({
     condition: cv.variants || cv,
     style: typeof cv.style === 'function' ? cv.style() : cv.style
   }));
 
-  // Helper to extract atomic class names from a style object
-  function getAtomicClasses(styleObj) {
-    if (!styleObj) return [];
-    
-    const classes = [];
-    
-    // Check if atomic optimizer is enabled and has class mapping
-    if (atomicOptimizer.options.enabled && chain.classMap) {
-      // Generate a temporary style to get atomic classes
-      const tempBuilder = $(true);
-      for (const [prop, value] of Object.entries(styleObj)) {
-        if (prop !== 'selectors' && prop !== 'hover' && tempBuilder[prop]) {
-          tempBuilder[prop](value);
-        }
-      }
-      
-      // Add hover styles if present
-      if (styleObj.hover) {
-        tempBuilder.hover();
-        for (const [hoverProp, hoverValue] of Object.entries(styleObj.hover)) {
-          if (tempBuilder[hoverProp]) tempBuilder[hoverProp](hoverValue);
-        }
-        tempBuilder.end();
-      }
-      
-      // Get the style object to extract atomic classes
-      const style = tempBuilder.block();
-      
-      // Find matching atomic classes from the classMap
-      // This requires that the atomic optimizer has processed these styles
-      const selectorKey = JSON.stringify(style);
-      if (chain.classMap[selectorKey]) {
-        return chain.classMap[selectorKey].split(' ');
-      }
-    }
-    
-    return classes;
-  }
-
-  // Helper to merge style objects and return class names
-  function mergeStylesToClasses(...styles) {
+  function mergeStyles(...styles) {
     const merged = {};
     for (const style of styles) {
       if (!style) continue;
@@ -741,59 +763,18 @@ function recipe(options) {
         }
       }
     }
-    
-    // Generate a unique class name for this combination
-    const selectorKey = Object.entries(merged)
-      .filter(([k]) => k !== 'selectors' && k !== 'hover')
-      .map(([k, v]) => `${k}-${v}`)
-      .join('--');
-    
-    const baseClassName = `recipe-${selectorKey}`;
-    
-    // Register this style with the atomic optimizer if enabled
-    if (atomicOptimizer.options.enabled) {
-      // Create a style object with the merged styles
-      const styleObj = {
-        selectors: [`.${baseClassName}`],
-        ...merged
-      };
-      
-      // Process through atomic optimizer
-      const { css, map } = atomicOptimizer.optimize({ [baseClassName]: styleObj });
-      
-      // Store the generated CSS in chain
-      if (css) {
-        chain.cssOutput = (chain.cssOutput || '') + css;
-      }
-      
-      // Return atomic classes if available, otherwise return the generated class
-      if (map && map[`.${baseClassName}`]) {
-        return map[`.${baseClassName}`].split(' ');
-      }
-    }
-    
-    // Fallback: return the generated class name
-    return [baseClassName];
+    return merged;
   }
 
-  // The main pick function that returns class names
   function pick(variantSelection = {}) {
-    // Merge defaults with selection
     const selected = { ...defaultVariants, ...variantSelection };
-    
-    // Collect all relevant styles
     const stylesToMerge = [];
     
-    // Add base style
     if (baseStyle) stylesToMerge.push(baseStyle);
-    
-    // Add variant styles
     for (const [variantName, variantValue] of Object.entries(selected)) {
       const variantStyle = variantStyles[variantName]?.[variantValue];
       if (variantStyle) stylesToMerge.push(variantStyle);
     }
-    
-    // Add compound variants
     for (const cv of compoundStyles) {
       const matches = Object.entries(cv.condition).every(
         ([key, value]) => selected[key] === value
@@ -801,19 +782,30 @@ function recipe(options) {
       if (matches && cv.style) stylesToMerge.push(cv.style);
     }
     
-    // Merge styles and return class names
-    const classNames = mergeStylesToClasses(...stylesToMerge);
+    const merged = mergeStyles(...stylesToMerge);
     
-    // Return as string for easy use
-    return classNames.join(' ');
+    const styleBuilder = $(true);
+    for (const [prop, value] of Object.entries(merged)) {
+      if (prop === 'selectors' || prop === 'hover') continue;
+      if (styleBuilder[prop]) styleBuilder[prop](value);
+    }
+    
+    if (merged.hover) {
+      styleBuilder.hover();
+      for (const [hoverProp, hoverValue] of Object.entries(merged.hover)) {
+        if (styleBuilder[hoverProp]) styleBuilder[hoverProp](hoverValue);
+      }
+      styleBuilder.end();
+    }
+    
+    const selectors = merged.selectors || [];
+    return styleBuilder.block(...selectors);
   }
   
-  // Add metadata for introspection
   pick.variants = variants;
   pick.defaultVariants = defaultVariants;
   pick.base = baseStyle;
   
-  // Helper to get all possible variant combinations
   pick.getAllVariants = () => {
     const result = [];
     const variantKeys = Object.keys(variants);
@@ -834,82 +826,35 @@ function recipe(options) {
     return result;
   };
   
-  // Pre-compile all variants at build time
   pick.compileAll = () => {
     const allVariants = pick.getAllVariants();
     const styles = [];
     
-    // Add base
     if (baseStyle) styles.push(baseStyle);
-    
-    // Add all variant styles
     for (const variantMap of Object.values(variants)) {
       for (const variantStyle of Object.values(variantMap)) {
         if (variantStyle) styles.push(variantStyle);
       }
     }
-    
-    // Add compound variant styles
     for (const cv of compoundStyles) {
       if (cv.style) styles.push(cv.style);
     }
     
-    // Compile all styles through atomic optimizer
     if (atomicOptimizer.options.enabled) {
       const styleObj = {};
       styles.forEach((style, i) => {
         const selectors = style.selectors || [`variant-${i}`];
         styleObj[selectors[0].replace(/^\./, '')] = style;
       });
-      const { css, map } = atomicOptimizer.optimize(styleObj);
-      chain.cssOutput = (chain.cssOutput || '') + css;
-      chain.classMap = { ...chain.classMap, ...map };
-      return css;
+      const result = atomicOptimizer.optimize(styleObj);
+      chain.cssOutput = (chain.cssOutput || '') + result.css;
+      chain.classMap = { ...chain.classMap, ...result.map };
+      return result.css;
     }
     
-    // Fallback: use run()
     return run(...styles);
   };
   
-  // Helper to get CSS for a specific variant combination
-  pick.getCSS = (variantSelection = {}) => {
-    const selected = { ...defaultVariants, ...variantSelection };
-    const stylesToMerge = [];
-    
-    if (baseStyle) stylesToMerge.push(baseStyle);
-    for (const [variantName, variantValue] of Object.entries(selected)) {
-      const variantStyle = variantStyles[variantName]?.[variantValue];
-      if (variantStyle) stylesToMerge.push(variantStyle);
-    }
-    for (const cv of compoundStyles) {
-      const matches = Object.entries(cv.condition).every(
-        ([key, value]) => selected[key] === value
-      );
-      if (matches && cv.style) stylesToMerge.push(cv.style);
-    }
-    
-    // Create a temporary style object to generate CSS
-    const tempBuilder = $(true);
-    for (const style of stylesToMerge) {
-      for (const [prop, value] of Object.entries(style)) {
-        if (prop !== 'selectors' && prop !== 'hover' && tempBuilder[prop]) {
-          tempBuilder[prop](value);
-        }
-      }
-      if (style.hover) {
-        tempBuilder.hover();
-        for (const [hoverProp, hoverValue] of Object.entries(style.hover)) {
-          if (tempBuilder[hoverProp]) tempBuilder[hoverProp](hoverValue);
-        }
-        tempBuilder.end();
-      }
-    }
-    
-    const mergedStyle = tempBuilder.block();
-    const css = compile({ [selected.join('-')]: mergedStyle });
-    return css;
-  };
-  
   return pick;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@melcanz85/chaincss",
-  "version": "1.12.3",
+  "version": "1.12.5",
   "description": "Chainable CSS-in-JS with build-time compilation, atomic CSS, and zero-runtime options",
   "keywords": [
     "css",
@@ -31,15 +31,19 @@
         "import": "./browser/index.js",
         "require": "./browser/index.js"
       },
+      "node": {
+        "import": "./node/btt.js",
+        "require": "./node/btt.js"
+      },
       "default": "./browser/index.js"
     },
     "./react": {
       "types": "./types.d.ts",
       "browser": {
-        "import": "./browser/react-hooks.jsx",
-        "require": "./browser/react-hooks.jsx"
+        "import": "./browser/react-hooks.js",
+        "require": "./browser/react-hooks.js"
       },
-      "default": "./browser/react-hooks.jsx"
+      "default": "./browser/react-hooks.js"
     },
     "./browser/*": {
       "browser": {