@melcanz85/chaincss 1.9.4 → 1.10.0

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:
@@ -47,13 +49,13 @@ ChainCSS is a revolutionary CSS-in-JS solution that gives you **two powerful mod
       .borderRadius('4px')
       .block('.btn');
 
-    module.exports = { button };
+    module.exports =  button;
 ````
 **in your main.jcss**
 
 ```javascript
   <@
-    const button = get('./button.js');
+    const button = get('./button.jcss');
 
     compile(button);
   @>
@@ -71,9 +73,10 @@ OR with vanilla nodejs project
   # ./style/global.css generated!
 ````
 * Note: running `npx chaincss ./src/main.jcss ./style --watch ` for the first time will
-        generate chaincss.config.js with default values. You can edit this to 
+        generate ./chaincss.config.js with default values. You can edit this to 
         customize your build!.
 
+
 ### Mode 2: Runtime (React Hooks)
 
 **Perfect for:** Dynamic styles that respond to props, state, or themes.
@@ -97,9 +100,9 @@ OR with vanilla nodejs project
       
       return <button className={styles.button}>{children}</button>;
     }
-    // ✅ Styles injected at runtime
-    // ✅ Automatic cleanup on unmount
-    // ✅ Fully dynamic based on props
+    //  Styles injected at runtime
+    //  Automatic cleanup on unmount
+    //  Fully dynamic based on props
 
 
 ```
@@ -145,8 +148,6 @@ OR with vanilla nodejs project
 
     Watch Mode          ✅          Instant recompilation
 
-    VM Security         ✅          Safe code execution
-
 
 ## The ChainCSS API
 
@@ -155,7 +156,7 @@ OR with vanilla nodejs project
 ```javascript
     // jQuery-like fluent API
     const style = $()
-      .propertyName('value')      // camelCase → kebab-case
+      .propertyName('value')      
       .anotherProperty('value')
       .block('.selector');         // End the chain with selector(s)
 
@@ -184,13 +185,13 @@ OR with vanilla nodejs project
       .fontWeight('600')
       .block('.btn');
 
-    module.exports = { button };
+    module.exports = button;
 ```
 **chaincss/main.jcss**
 
 ```javascript
     <@
-      const { button } = get('./button.jcss');
+      const button  = get('./button.jcss');
       compile({ button });
     @>
 ````
@@ -238,6 +239,7 @@ OR with vanilla nodejs project
 **Before (standard CSS):** 4,823 chars
 **After (atomic CSS):** 499 chars → **90% smaller!**
 
+
 ## Quick Start Guides
 
 ### With Node.js (Vanilla)
@@ -293,14 +295,15 @@ 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
 
-    **ChainCSS (Build)**    **Zero**        **Just CSS**        Build-time          Low
+    ChainCSS (Build)        Zero            Just CSS            Build-time          Low
 
-    **ChainCSS (Runtime)**  Minimal         Small runtime       Full                Low
+    ChainCSS (Runtime)      Minimal         Small runtime       Full                Low
 
     Styled Components       5-10KB runtime  CSS + runtime       Full                Medium
 
@@ -310,7 +313,7 @@ compile({ hello });" > chaincss/main.jcss
 
     CSS Modules             Zero            Just CSS            None                Low
 
-**ChainCSS is the ONLY library that gives you BOTH worlds!**
+**ChainCSS is the ONLY library that gives you DUAL options**
 
 ## API Reference
 
@@ -370,23 +373,6 @@ compile({ hello });" > chaincss/main.jcss
     au BufRead,BufNewFile `*.jcss` setfiletype javascript
 ```
 
-## Roadmap
-
-* Zero-runtime compilation
-
-* React hooks
-
-* Atomic CSS optimization
-
-* Design tokens
-
-* TypeScript support
-
-* Vue/Svelte integrations (coming soon)
-
-* Plugin system (coming soon)
-
-
 ## Contributing
 
 Contributions are welcome! Whether it's:

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;