npm - @melcanz85/chaincss - Versions diffs - 1.11.0 → 1.11.2 - Mend

@melcanz85/chaincss 1.11.0 → 1.11.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/README.md CHANGED Viewed

@@ -6,9 +6,7 @@
 [![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:
+**Write CSS with JavaScript. Lets you CHOOSE your runtime cost. DUAL MODE**
 **Build-time compilation** → Pure CSS, zero JavaScript in browser
@@ -16,11 +14,56 @@ ChainCSS is a revolutionary CSS-in-JS solution that gives you **two powerful mod
 ## Installation
+* Install [nodejs.](https://nodejs.org/en/download)
 ```bash
     npm install @melcanz85/chaincss
 ```
+* In your html add a link tag with an href value of style/global.css this serves as the
+stylesheet for your entire webpage. You dont need to touch this css file.
+```html
+  <!-- index.html -->
+  <!DOCTYPE html>
+  <html>
+  <head>
+    <title>chaincss</title>
+    <link rel="stylesheet" type="text/css" href="style/global.css">
+  </head>
+  <body>
+    <p>Hello World</p>
+  </body>
+  </html>
+```
+## Syntax
+```javascript
+// main.jcss
+<@
+  const text = $().color('blue').textAlign('center').block('p');
+  //text.fontSize = '2rem';
+  run(text);
+@>
+```
+* To apply this styles run this in your terminal / command prompt.
+```bash
+  npx chaincss ./src/main.jcss ./style --watch
+````
+* Open your index.html in the browser.
+* To make changes uncomment styles between text variable declaration and run() method.
+* Thats how you add or modify the style block you treat them as a regular javascript object.
 ### File Structure
 ```text
@@ -54,6 +97,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');
@@ -66,45 +110,68 @@ ChainCSS is a revolutionary CSS-in-JS solution that gives you **two powerful mod
   npx chaincss ./src/main.jcss ./style --watch
   # ./style/global.css generated!
 ````
-OR with vanilla nodejs project
-```bash
-  npx chaincss ./src/main.jcss ./style --watch & node server.js
-  # ./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
         customize your build!.
 ### Mode 2: Runtime (React Hooks)
 **Perfect for:** Dynamic styles that respond to props, state, or themes.
 ```jsx
-    // components/DynamicButton.jsx
-    import { useChainStyles } from '@melcanz85/chaincss';
-    function DynamicButton({ variant = 'primary', children }) {
-      const styles = useChainStyles({
-        button: () => $()
-          .backgroundColor(variant === 'primary' ? '#667eea' : '#48bb78')
-          .color('white')
-          .padding('0.5rem 1rem')
-          .borderRadius('4px')
-          .hover()
-            .transform('translateY(-2px)')
-            .boxShadow('0 4px 6px rgba(0,0,0,0.1)')
-          .block()
-      });
-      return <button className={styles.button}>{children}</button>;
-    }
-    //  Styles injected at runtime
-    //  Automatic cleanup on unmount
-    //  Fully dynamic based on props
+    // src/components/Counter.jsx
+  import { useState } from 'react';
+  import { useChainStyles, $ } from '@melcanz85/chaincss/react';
+  export default function Counter() {
+    const [count, setCount] = useState(0);
+    const styles = useChainStyles(() => {
+      const container = $()
+        .display('flex')
+        .flexDirection('column')
+        .alignItems('center')
+        .justifyContent('center')
+        .gap('3rem')
+        .padding('4rem 2.5rem')
+        .backgroundColor('rgba(255, 255, 255, 0.92)')
+        .borderRadius('2rem')
+        .boxShadow('0 25px 50px -12px rgba(0, 0, 0, 0.25)')
+        .backdropFilter('blur(12px)')
+        .maxWidth('420px')
+        .width('90%')
+        .block();
+      const numberBase = $()
+        .fontSize('6rem')
+        .fontWeight('800')
+        .letterSpacing('-0.05em')
+        .transition('color 0.5s ease, transform 0.3s ease')
+        .transform(count === 0 ? 'scale(1)' : 'scale(1.1)')
+        .animation(count > 0 ? 'pulse 1.8s infinite ease-in-out' : 'none')
+        .block();
+    const numberColor = $()
+        .color(
+          count === 0 ? '#4a5568' : `hsl(${ (count * 40) % 360 }, 80%, 60%)`
+        )
+        .block();
+    return { container, numberBase, numberColor };
+    }, [count]);
+    return (
+      <div className={styles.container}>
+        <div className={`${styles.numberBase} ${styles.numberColor}`}>
+          {count}
+        </div>
+        <button className="increment-btn" onClick={() => setCount(prev => prev + 1)}>
+          Tap to Count Up
+        </button>
+      </div>
+    );
+  }
 ```
 ## Use BOTH in the Same Project!
@@ -119,8 +186,8 @@ OR with vanilla nodejs project
     // components/Card.jsx (runtime)
     function Card({ isHighlighted }) {
-      const styles = useChainStyles({
-        card: () => $()
+      const styles = useChainStyles(() => {
+        const card = $()
           .backgroundColor(isHighlighted ? '#fffacd' : 'white')
           .padding('1rem')
           .block()
@@ -230,9 +297,9 @@ OR with vanilla nodejs project
     // chaincss.config.js
     module.exports = {
       atomic: {
-        enabled: true,      // Enable 90% CSS size reduction
-        threshold: 3,        // Styles used 3+ times become atomic
-        naming: 'hash'       // Smallest class names
+        enabled: true,
+        threshold: 3,
+        naming: 'hash'
       }
     };
 ```
@@ -279,8 +346,8 @@ compile({ hello });" > chaincss/main.jcss
     import { useChainStyles } from '@melcanz85/chaincss';
     export function Button({ variant = 'primary', children }) {
-      const styles = useChainStyles({
-        button: () => $()
+      const styles = useChainStyles(() => {
+        const button = $()
           .backgroundColor(variant === 'primary' ? '#667eea' : '#48bb78')
           .color('white')
           .padding('0.5rem 1rem')
@@ -289,13 +356,15 @@ compile({ hello });" > chaincss/main.jcss
             .transform('translateY(-2px)')
             .boxShadow('0 4px 6px rgba(0,0,0,0.1)')
           .block()
+          return { button };
       });
       return <button className={styles.button}>{children}</button>;
     }
 ```
-See ChainCSS in action! Visit our interactive demo site - [https://melcanz08.github.io/chaincss_react_website/]](https://melcanz08.github.io/chaincss_react_website/)
+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
@@ -313,7 +382,7 @@ See ChainCSS in action! Visit our interactive demo site - [https://melcanz08.git
     CSS Modules             Zero            Just CSS            None                Low
-**ChainCSS is the ONLY library that gives you DUAL options**
+**ChainCSS a "DUAL MODE optioned" css-in-js library**
 ## API Reference
@@ -390,9 +459,9 @@ Please see CONTRIBUTING.md for guidelines.
 ## License
-MIT © [Rommel Caneos]('https://github.com/melcanz08')
+MIT © [Rommel Caneos](https://github.com/melcanz08)
 ## Star Us on GitHub!
-If ChainCSS helps you, please [give it a star!]('https://github.com/melcanz08/chaincss') It helps others discover it.
+If ChainCSS helps you, please [give it a star!](https://github.com/melcanz08/chaincss) It helps others discover it.

package/browser/index.js CHANGED Viewed

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

package/browser/react-hooks.jsx CHANGED Viewed

@@ -1,129 +1,81 @@
 import { useMemo, useEffect, useRef, useState } from 'react';
 import { $, compile, chain } from './rtt';
-// Cache for generated styles to avoid duplication
 const styleCache = new Map();
 let styleSheet = null;
-// Initialize style sheet (add to document head)
 const initStyleSheet = () => {
-  if (typeof document === 'undefined') return null; // SSR safety
+  if (typeof document === 'undefined') return null;
   if (!styleSheet) {
-    // Check if already exists
     const existing = document.getElementById('chaincss-styles');
     if (existing) {
       styleSheet = existing;
       return styleSheet;
     }
-    // Create new style element
     const style = document.createElement('style');
     style.id = 'chaincss-styles';
     style.setAttribute('data-chaincss', 'true');
     document.head.appendChild(style);
     styleSheet = style;
   }
   return styleSheet;
 };
-// Update styles in the style sheet
 const updateStyles = (css) => {
   const sheet = initStyleSheet();
   if (sheet) {
     sheet.textContent = css;
   }
 };
-// Main hook for using ChainCSS styles in React
 export function useChainStyles(styles, deps = [], options = {}) {
   const {
     cache = true,
     namespace = 'chain',
     watch = false
   } = options;
-  // Generate a unique ID for this component instance
   const id = useRef(`chain-${Math.random().toString(36).substr(2, 9)}`);
-  // Store the generated class names
   const [classNames, setClassNames] = useState({});
-  // Process styles and generate CSS
   const processed = useMemo(() => {
-    // ✅ FIRST: Resolve styles if it's a function
     const resolvedStyles = typeof styles === 'function' ? styles() : 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);
     }
-    // Generate unique class names for each style
     const newClassNames = {};
     const compiledStyles = {};
-    // ✅ Use resolvedStyles here
     Object.entries(resolvedStyles).forEach(([key, styleDef]) => {
-      // Generate a unique class name
       const className = `${namespace}-${key}-${id.current}`;
-      // Create a style definition with the unique class
       const styleObj = typeof styleDef === 'function'
         ? styleDef()
         : styleDef;
-      // Store the class name mapping
       newClassNames[key] = className;
-      // Create the style rule
       compiledStyles[`${key}_${id.current}`] = {
         selectors: [`.${className}`],
         ...styleObj
       };
     });
-    // Compile to CSS
     compile(compiledStyles);
     const css = chain.cssOutput;
     const result = { classNames: newClassNames, css };
     if (cache) {
       styleCache.set(cacheKey, result);
     }
     return result;
   }, [styles, namespace, id.current, ...deps]);
-  // Update the style sheet when styles change
   useEffect(() => {
     if (processed.css) {
-      // For simple apps, just append
       if (!watch) {
         const sheet = initStyleSheet();
         if (sheet) {
-          // Remove old styles for this component
           const existingStyles = sheet.textContent || '';
           const styleRegex = new RegExp(`\\.[\\w-]*${id.current}[\\s\\S]*?}`, 'g');
           const cleanedStyles = existingStyles.replace(styleRegex, '');
-          // Add new styles
           sheet.textContent = cleanedStyles + processed.css;
         }
       } else {
-        // For watch mode, update everything
         updateStyles(processed.css);
       }
     }
-    // Cleanup on unmount
     return () => {
       if (!watch && styleSheet) {
         const existingStyles = styleSheet.textContent || '';
@@ -132,20 +84,14 @@ export function useChainStyles(styles, deps = [], options = {}) {
       }
     };
   }, [processed.css, watch]);
   return processed.classNames;
 }
-// Hook for dynamic styles that depend on props/state
 export function useDynamicChainStyles(styleFactory, deps = [], options = {}) {
   const styles = useMemo(() => {
     return styleFactory();
   }, deps);
   return useChainStyles(styles, options);
 }
-// Hook for theme-aware styles
 export function useThemeChainStyles(styles, theme, options = {}) {
   const themedStyles = useMemo(() => {
     if (typeof styles === 'function') {
@@ -153,29 +99,21 @@ export function useThemeChainStyles(styles, theme, options = {}) {
     }
     return styles;
   }, [styles, theme]);
   return useChainStyles(themedStyles, options);
 }
-// Component for injecting global ChainCSS styles
 export function ChainCSSGlobal({ styles }) {
   useChainStyles(styles, { watch: true });
   return null;
 }
-// HOC for adding ChainCSS styles to components
 export function withChainStyles(styles, options = {}) {
   return function WrappedComponent(props) {
     const classNames = useChainStyles(
       typeof styles === 'function' ? styles(props) : styles,
       options
     );
     return <WrappedComponent {...props} chainStyles={classNames} />;
   };
 }
-// Utility to combine multiple class names
 export function cx(...classes) {
   return classes.filter(Boolean).join(' ');
 }

package/browser/rtt.js CHANGED Viewed

@@ -2,171 +2,150 @@ 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');
-}
+// Instead of using dynamic import with unsupported options
+// Use a try-catch with proper dynamic import syntax
+const loadCSSProperties = async () => {
+  try {
+    // Remove the unsupported 'ignore' option
+    const module = await import('../node/css-properties.json', {
+      assert: { type: 'json' }
+    });
+    return module.default;
+  } catch (e) {
+    // If the file doesn't exist in the package, fallback to CDN
+    console.log('CSS properties file not found in package, will fetch from CDN');
+    return null;
+  }
+};
+// Initialize asynchronously
 const chain = {
   cssOutput: undefined,
   catcher: {},
   cachedValidProperties: [],
-  async initializeProperties() {
-    if (cssProperties && cssProperties.length > 0) {
-      this.cachedValidProperties = cssProperties;
+  async initializeProperties() {
+    if (this.cachedValidProperties.length > 0) {
+      return;
+    }
+    // Try to load from local file first
+    const localProperties = await loadCSSProperties();
+    if (localProperties && localProperties.length > 0) {
+      this.cachedValidProperties = localProperties;
       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 [];
-      }
+    }
+    // Fallback to CDN
+    try {
+      console.log('Loading CSS properties from CDN...');
+      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);
+      });
+      this.cachedValidProperties = Array.from(baseProperties).sort();
+    } catch (error) {
+      console.error('Error loading from CDN:', error);
+      this.cachedValidProperties = [];
     }
   },
-  // Synchronous version for internal use
   getCachedProperties() {
     return this.cachedValidProperties;
   }
 };
-// Initialize properties synchronously when module loads
+// Start initialization but don't await (non-blocking)
 chain.initializeProperties();
+// Rest of your code remains the same...
 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
+  return cssString.trim();
 };
 export {