@melcanz85/chaincss 1.9.5 → 1.10.1

package/README.md

@@ -4,6 +4,8 @@
 [![npm version](https://img.shields.io/npm/v/@melcanz85/chaincss.svg)](https://www.npmjs.com/package/@melcanz85/chaincss)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
+[![Live Demo](https://img.shields.io/badge/demo-live-brightgreen)](https://melcanz08.github.io/chaincss_react_website/)
+
 **Write CSS with JavaScript. The only CSS-in-JS library that lets you CHOOSE your runtime cost.**
 
 ChainCSS is a revolutionary CSS-in-JS solution that gives you **two powerful modes** in one package:
@@ -52,6 +54,7 @@ ChainCSS is a revolutionary CSS-in-JS solution that gives you **two powerful mod
 **in your main.jcss**
 
 ```javascript
+  // src/main.jcss
   <@
     const button = get('./button.jcss');
 
@@ -80,27 +83,44 @@ OR with vanilla nodejs project
 **Perfect for:** Dynamic styles that respond to props, state, or themes.
 
 ```jsx
-    // components/DynamicButton.jsx
-    import { useChainStyles } from '@melcanz85/chaincss';
+    import { useChainStyles, $ } from '@melcanz85/chaincss/react';
+    import { useState } from 'react';
 
-    function DynamicButton({ variant = 'primary', children }) {
-      const styles = useChainStyles({
-        button: () => $()
-          .backgroundColor(variant === 'primary' ? '#667eea' : '#48bb78')
-          .color('white')
+    const SectionDemo = () => {
+      const [variant, setVariant] = useState('primary');
+      const [isHovered, setIsHovered] = useState(false);
+      
+      // Runtime styles that change based on state/props!
+      const styles = useChainStyles(() => ({
+        buttonGroup: $()
+          .display('flex')
+          .gap('1rem')
+          .justifyContent('center')
+          .marginTop('2rem')
+          .flexWrap('wrap')
+          .block(),
+        
+        variantButton: $()
           .padding('0.5rem 1rem')
-          .borderRadius('4px')
+          .backgroundColor('#e2e8f0')
+          .border('none')
+          .borderRadius('0.375rem')
+          .cursor('pointer')
+          .fontWeight('500')
+          .transition('all 0.2s')
           .hover()
-            .transform('translateY(-2px)')
-            .boxShadow('0 4px 6px rgba(0,0,0,0.1)')
+            .backgroundColor('#cbd5e0')
           .block()
-      });
-      
-      return <button className={styles.button}>{children}</button>;
-    }
-    //  Styles injected at runtime
-    //  Automatic cleanup on unmount
-    //  Fully dynamic based on props
+        }),[variant]
+      );
+
+      return (
+        <section> 
+        </section>
+      );
+    };
+
+    export default SectionDemo;
 
 
 ```
@@ -294,6 +314,9 @@ compile({ hello });" > chaincss/main.jcss
 ```
 
 
+See ChainCSS in action! Visit our interactive demo site - [https://melcanz08.github.io/chaincss_react_website/](https://melcanz08.github.io/chaincss_react_website/)
+
+
 ## Performance Comparison
 
     Approach                Runtime Cost    Bundle Size         Dynamic Styles      Learning Curve

package/browser/index.js

@@ -0,0 +1,2 @@
+export * from './react-hooks.jsx';
+export { $, run, compile, chain, createTokens, responsive, tokens } from './rtt.js';

package/{react-hooks.js → browser/react-hooks.jsx}

@@ -1,5 +1,5 @@
 import { useMemo, useEffect, useRef, useState } from 'react';
-import { $, compile } from './transpiler';
+import { $, compile, chain } from './rtt';
 
 // Cache for generated styles to avoid duplication
 const styleCache = new Map();
@@ -37,7 +37,7 @@ const updateStyles = (css) => {
 };
 
 // Main hook for using ChainCSS styles in React
-export function useChainStyles(styles, options = {}) {
+export function useChainStyles(styles, deps = [], options = {}) {
   const {
     cache = true,
     namespace = 'chain',
@@ -52,10 +52,15 @@ export function useChainStyles(styles, options = {}) {
   
   // Process styles and generate CSS
   const processed = useMemo(() => {
-    if (!styles || Object.keys(styles).length === 0) return { classNames: {}, css: '' };
+    // ✅ FIRST: Resolve styles if it's a function
+    const resolvedStyles = typeof styles === 'function' ? styles() : styles;
     
-    // Check cache first
-    const cacheKey = JSON.stringify(styles);
+    if (!resolvedStyles || Object.keys(resolvedStyles).length === 0) {
+      return { classNames: {}, css: '' };
+    }
+    
+    // ✅ NOW use resolvedStyles for cache key
+    const cacheKey = JSON.stringify(resolvedStyles);
     if (cache && styleCache.has(cacheKey)) {
       return styleCache.get(cacheKey);
     }
@@ -64,7 +69,8 @@ export function useChainStyles(styles, options = {}) {
     const newClassNames = {};
     const compiledStyles = {};
     
-    Object.entries(styles).forEach(([key, styleDef]) => {
+    // ✅ Use resolvedStyles here
+    Object.entries(resolvedStyles).forEach(([key, styleDef]) => {
       // Generate a unique class name
       const className = `${namespace}-${key}-${id.current}`;
       
@@ -94,7 +100,7 @@ export function useChainStyles(styles, options = {}) {
     }
     
     return result;
-  }, [styles, namespace]);
+  }, [styles, namespace, id.current, ...deps]);
   
   // Update the style sheet when styles change
   useEffect(() => {

package/browser/rtt.js

@@ -0,0 +1,180 @@
+import { tokens, createTokens, responsive } from '../shared/tokens.mjs';
+
+let cssProperties = [];
+
+// Try to import the JSON file, fallback to fetch if it fails
+try {
+  // Dynamic import - will fail gracefully if file doesn't exist
+  const module = await import('../node/css-properties.json', { 
+    assert: { type: 'json' },
+    // This prevents the error from breaking the build
+    ignore: true 
+  });
+  cssProperties = module.default;
+} catch (e) {
+  console.log('CSS properties file not found, will fetch from CDN');
+}
+
+const chain = {
+  cssOutput: undefined,
+  catcher: {},
+  cachedValidProperties: [],
+
+  async initializeProperties() { 
+    if (cssProperties && cssProperties.length > 0) {
+      this.cachedValidProperties = cssProperties;
+      return;
+    }else{
+      try {
+        let CDNfallBackProp = [];
+        const response = await fetch('https://raw.githubusercontent.com/mdn/data/main/css/properties.json');
+        const data = await response.json();
+        const allProperties = Object.keys(data);
+        
+        // Strip vendor prefixes and remove duplicates
+        const baseProperties = new Set();
+        allProperties.forEach(prop => {
+          const baseProp = prop.replace(/^-(webkit|moz|ms|o)-/, '');
+          baseProperties.add(baseProp);
+        });
+        CDNfallBackProp = Array.from(baseProperties).sort();
+        this.cachedValidProperties = CDNfallBackProp;
+      } catch (error) {
+        console.error('Error loading from CDN:', error);
+        return [];
+      }
+    }
+  },
+
+  // Synchronous version for internal use
+  getCachedProperties() {
+    return this.cachedValidProperties;
+  }
+};
+
+// Initialize properties synchronously when module loads
+chain.initializeProperties();
+
+const resolveToken = (value, useTokens) => {
+  if (!useTokens || typeof value !== 'string' || !value.startsWith('$')) {
+    return value;
+  }
+  
+  const tokenPath = value.slice(1);
+  const tokenValue = tokens.get(tokenPath);
+  
+  if (!tokenValue) {
+    return value;
+  }
+  
+  return tokenValue;
+};
+
+function $(useTokens = true){
+  const catcher = {};
+  
+  // Use cached properties if available
+  const validProperties = chain.cachedValidProperties;
+  
+  const handler = {
+    get: (target, prop) => {
+      if (prop === 'block') {
+        return function(...args) {
+          // If no args, just return current catcher
+          if (args.length === 0) {
+            const result = { ...catcher };
+            // Clear catcher
+            Object.keys(catcher).forEach(key => delete catcher[key]);
+            return result;
+          }
+          
+          // Create result with selectors
+          const result = {
+            selectors: args,
+            ...catcher
+          };
+          
+          // Clear catcher
+          Object.keys(catcher).forEach(key => delete catcher[key]);
+          
+          return result;
+        };
+      }
+      // Convert camelCase to kebab-case for CSS property
+      const cssProperty = prop.replace(/([A-Z])/g, '-$1').toLowerCase();     
+      // Validate property exists (optional) - use cached properties
+      if (validProperties && validProperties.length > 0 && !validProperties.includes(cssProperty)) {
+        console.warn(`Warning: '${cssProperty}' may not be a valid CSS property`);
+      }
+      // Return a function that sets the value
+      return function(value) {
+        catcher[prop] = resolveToken(value, useTokens);
+        return proxy;
+      };
+    }
+  };
+  
+  // Create the proxy
+  const proxy = new Proxy({}, handler);
+  
+  return proxy;
+}
+
+const run = (...args) => {
+  let cssOutput = '';
+  
+  args.forEach((value) => {
+    if (value && value.selectors) {
+      let rule = `${value.selectors.join(', ')} {\n`;
+      
+      // Add all properties (excluding 'selectors')
+      for (let key in value) {
+        if (key !== 'selectors' && value.hasOwnProperty(key)) {
+          const kebabKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+          rule += `  ${kebabKey}: ${value[key]};\n`;
+        }
+      }
+      
+      rule += `}\n\n`;
+      cssOutput += rule;
+    }
+  });
+  
+  chain.cssOutput = cssOutput.trim();
+  return cssOutput.trim();
+};
+
+const compile = (obj) => {
+  let cssString = '';
+
+  for (const key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      const element = obj[key];
+      let selectors = element.selectors || [];
+      let elementCSS = '';
+      
+      for (let prop in element) {
+        if (element.hasOwnProperty(prop) && prop !== 'selectors') {
+          // Convert camelCase to kebab-case
+          const kebabKey = prop.replace(/([A-Z])/g, '-$1').toLowerCase();
+          elementCSS += `  ${kebabKey}: ${element[prop]};\n`;
+        }
+      }
+      
+      cssString += `${selectors.join(', ')} {\n${elementCSS}}\n`;
+    }
+  }
+
+  chain.cssOutput = cssString.trim();
+  return cssString.trim(); // Added return for consistency
+};
+
+export {
+  chain,
+  $,
+  run,
+  compile,
+  tokens,
+  createTokens,
+  responsive
+};

package/{transpiler.js → node/btt.js}

@@ -1,21 +1,19 @@
 const path = require('path');
 const fs = require('fs');
-const tokenModule = require('./tokens');
-const tokens = tokenModule.tokens;
+const https = require('https'); // Built-in, no install needed!
+const { tokens, createTokens, responsive } = require('../shared/tokens.cjs');
 
 const chain = {
   cssOutput: undefined,
   catcher: {},
   cachedValidProperties: [],
 
-  // Initialize properties synchronously
   initializeProperties() {
     try {
       const jsonPath = path.join(__dirname, 'css-properties.json');
       if (fs.existsSync(jsonPath)) {
         const data = fs.readFileSync(jsonPath, 'utf8');
         this.cachedValidProperties = JSON.parse(data);
-        
       } else {
         console.log('⚠️ CSS properties not cached, will load on first use');
       }
@@ -24,6 +22,30 @@ const chain = {
     }
   },
 
+  // Helper function to fetch with https
+  fetchWithHttps(url) {
+    return new Promise((resolve, reject) => {
+      https.get(url, (response) => {
+        let data = '';
+        
+        response.on('data', (chunk) => {
+          data += chunk;
+        });
+        
+        response.on('end', () => {
+          try {
+            const jsonData = JSON.parse(data);
+            resolve(jsonData);
+          } catch (error) {
+            reject(error);
+          }
+        });
+      }).on('error', (error) => {
+        reject(error);
+      });
+    });
+  },
+
   async getCSSProperties() {
     try {
       const jsonPath = path.join(__dirname, 'css-properties.json');
@@ -36,12 +58,12 @@ const chain = {
         this.cachedValidProperties = objProp;
         return objProp;
       } catch {
+        // Use https instead of fetch
         const url = 'https://raw.githubusercontent.com/mdn/data/main/css/properties.json';
-        const response = await fetch(url);
-        const data = await response.json();
+        const data = await this.fetchWithHttps(url);
         const allProperties = Object.keys(data);
         
-         // Strip vendor prefixes and remove duplicates
+        // Strip vendor prefixes and remove duplicates
         const baseProperties = new Set();
         
         allProperties.forEach(prop => {
@@ -65,7 +87,6 @@ const chain = {
     }
   },
 
-  // Synchronous version for internal use
   getCachedProperties() {
     return this.cachedValidProperties;
   }
@@ -98,7 +119,7 @@ function $(useTokens = true){
   const handler = {
     get: (target, prop) => {
       if (prop === 'block') {
-        return function(...args) {chain
+        return function(...args) {
           // If no args, just return current catcher
           if (args.length === 0) {
             const result = { ...catcher };
@@ -127,7 +148,7 @@ function $(useTokens = true){
       }
       // Return a function that sets the value
       return function(value) {
-        catcher[prop] = resolveToken(value, useTokens);  // ← USE IT HERE
+        catcher[prop] = resolveToken(value, useTokens);
         return proxy;
       };
     }
@@ -144,7 +165,7 @@ function $(useTokens = true){
   }
   
   return proxy;
-};
+}
 
 const run = (...args) => {
   let cssOutput = '';
@@ -199,6 +220,6 @@ module.exports = {
   $,
   run,
   compile,
-  createTokens: tokenModule.createTokens,
-  responsive: tokenModule.responsive
+  createTokens,
+  responsive
 };

package/{chaincss.js → node/chaincss.js}

@@ -9,7 +9,7 @@ const fileCache = new Map();
 const strVal = require('./strVal.js');
 const { AtomicOptimizer } = require('./atomic-optimizer');
 const { CacheManager } = require('./cache-manager');
-const { $, run, compile: originalCompile, chain } = require('./transpiler');
+const { $, run, compile: originalCompile, chain } = require('./btt');
 
 // Atomic optimizer instance (will be initialized after config)
 let atomicOptimizer = null;