@melcanz85/chaincss 1.8.0 → 1.9.2

package/react-hooks.js

@@ -0,0 +1,175 @@
+import { useMemo, useEffect, useRef, useState } from 'react';
+import { $, compile } from './transpiler';
+
+// 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 (!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, 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(() => {
+    if (!styles || Object.keys(styles).length === 0) return { classNames: {}, css: '' };
+    
+    // Check cache first
+    const cacheKey = JSON.stringify(styles);
+    if (cache && styleCache.has(cacheKey)) {
+      return styleCache.get(cacheKey);
+    }
+    
+    // Generate unique class names for each style
+    const newClassNames = {};
+    const compiledStyles = {};
+    
+    Object.entries(styles).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]);
+  
+  // 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 || '';
+        const styleRegex = new RegExp(`\\.[\\w-]*${id.current}[\\s\\S]*?}`, 'g');
+        styleSheet.textContent = existingStyles.replace(styleRegex, '');
+      }
+    };
+  }, [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') {
+      return styles(theme);
+    }
+    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/tokens.js

@@ -0,0 +1,256 @@
+class DesignTokens {
+  constructor(tokens = {}) {
+    this.tokens = this.deepFreeze({
+      colors: {},
+      spacing: {},
+      typography: {},
+      breakpoints: {},
+      zIndex: {},
+      shadows: {},
+      borderRadius: {},
+      ...tokens
+    });
+    
+    this.flattened = this.flattenTokens(this.tokens);
+  }
+
+  // Deep freeze to prevent accidental modifications
+  deepFreeze(obj) {
+    Object.keys(obj).forEach(key => {
+      if (typeof obj[key] === 'object' && obj[key] !== null) {
+        this.deepFreeze(obj[key]);
+      }
+    });
+    return Object.freeze(obj);
+  }
+
+  // Flatten nested tokens for easy access
+  flattenTokens(obj, prefix = '') {
+    return Object.keys(obj).reduce((acc, key) => {
+      const prefixed = prefix ? `${prefix}.${key}` : key;
+      
+      if (typeof obj[key] === 'object' && obj[key] !== null) {
+        Object.assign(acc, this.flattenTokens(obj[key], prefixed));
+      } else {
+        acc[prefixed] = obj[key];
+      }
+      
+      return acc;
+    }, {});
+  }
+
+  // Get token value by path (e.g., 'colors.primary')
+  get(path, defaultValue = '') {
+    return this.flattened[path] || defaultValue;
+  }
+
+  // Generate CSS variables from tokens
+  toCSSVariables(prefix = 'chain') {
+    let css = ':root {\n';
+    
+    Object.entries(this.flattened).forEach(([key, value]) => {
+      const varName = `--${prefix}-${key.replace(/\./g, '-')}`;
+      css += `  ${varName}: ${value};\n`;
+    });
+    
+    css += '}\n';
+    return css;
+  }
+
+  // Create a theme variant
+  createTheme(name, overrides) {
+    const themeTokens = { ...this.flattened };
+    
+    Object.entries(overrides).forEach(([key, value]) => {
+      if (themeTokens[key]) {
+        themeTokens[key] = value;
+      }
+    });
+    
+    return new DesignTokens(this.expandTokens(themeTokens));
+  }
+
+  // Expand flattened tokens back to nested structure
+  expandTokens(flattened) {
+    const result = {};
+    
+    Object.entries(flattened).forEach(([key, value]) => {
+      const parts = key.split('.');
+      let current = result;
+      
+      for (let i = 0; i < parts.length - 1; i++) {
+        current[parts[i]] = current[parts[i]] || {};
+        current = current[parts[i]];
+      }
+      
+      current[parts[parts.length - 1]] = value;
+    });
+    
+    return result;
+  }
+}
+
+// Default tokens
+const defaultTokens = {
+  colors: {
+    primary: '#667eea',
+    secondary: '#764ba2',
+    success: '#48bb78',
+    danger: '#f56565',
+    warning: '#ed8936',
+    info: '#4299e1',
+    light: '#f7fafc',
+    dark: '#1a202c',
+    white: '#ffffff',
+    black: '#000000',
+    gray: {
+      100: '#f7fafc',
+      200: '#edf2f7',
+      300: '#e2e8f0',
+      400: '#cbd5e0',
+      500: '#a0aec0',
+      600: '#718096',
+      700: '#4a5568',
+      800: '#2d3748',
+      900: '#1a202c'
+    }
+  },
+  
+  spacing: {
+    0: '0',
+    1: '0.25rem',
+    2: '0.5rem',
+    3: '0.75rem',
+    4: '1rem',
+    5: '1.25rem',
+    6: '1.5rem',
+    8: '2rem',
+    10: '2.5rem',
+    12: '3rem',
+    16: '4rem',
+    20: '5rem',
+    24: '6rem',
+    32: '8rem',
+    40: '10rem',
+    48: '12rem',
+    56: '14rem',
+    64: '16rem',
+    xs: '0.5rem',
+    sm: '1rem',
+    md: '1.5rem',
+    lg: '2rem',
+    xl: '3rem',
+    '2xl': '4rem',
+    '3xl': '6rem'
+  },
+  
+  typography: {
+    fontFamily: {
+      sans: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+      serif: 'Georgia, Cambria, "Times New Roman", Times, serif',
+      mono: 'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
+    },
+    fontSize: {
+      xs: '0.75rem',
+      sm: '0.875rem',
+      base: '1rem',
+      lg: '1.125rem',
+      xl: '1.25rem',
+      '2xl': '1.5rem',
+      '3xl': '1.875rem',
+      '4xl': '2.25rem',
+      '5xl': '3rem'
+    },
+    fontWeight: {
+      hairline: '100',
+      thin: '200',
+      light: '300',
+      normal: '400',
+      medium: '500',
+      semibold: '600',
+      bold: '700',
+      extrabold: '800',
+      black: '900'
+    },
+    lineHeight: {
+      none: '1',
+      tight: '1.25',
+      snug: '1.375',
+      normal: '1.5',
+      relaxed: '1.625',
+      loose: '2'
+    }
+  },
+  
+  breakpoints: {
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+    '2xl': '1536px'
+  },
+  
+  zIndex: {
+    0: '0',
+    10: '10',
+    20: '20',
+    30: '30',
+    40: '40',
+    50: '50',
+    auto: 'auto',
+    dropdown: '1000',
+    sticky: '1020',
+    fixed: '1030',
+    modal: '1040',
+    popover: '1050',
+    tooltip: '1060'
+  },
+  
+  shadows: {
+    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+    base: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+    xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+    '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+    inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
+    none: 'none'
+  },
+  
+  borderRadius: {
+    none: '0',
+    sm: '0.125rem',
+    base: '0.25rem',
+    md: '0.375rem',
+    lg: '0.5rem',
+    xl: '0.75rem',
+    '2xl': '1rem',
+    '3xl': '1.5rem',
+    full: '9999px'
+  }
+};
+
+// Create and export tokens instance
+const tokens = new DesignTokens(defaultTokens);
+
+// Token utility functions
+const createTokens = (customTokens) => {
+  return new DesignTokens(customTokens);
+};
+
+// Generate responsive values
+const responsive = (values) => {
+  if (typeof values === 'string') return values;
+  
+  return Object.entries(values).map(([breakpoint, value]) => {
+    if (breakpoint === 'base') return value;
+    return `@media (min-width: ${tokens.get(`breakpoints.${breakpoint}`)}) { ${value} }`;
+  }).join(' ');
+};
+
+module.exports = {
+  tokens,
+  createTokens,
+  responsive,
+  DesignTokens
+};

package/transpiler.js

@@ -1,5 +1,7 @@
 const path = require('path');
 const fs = require('fs');
+const tokenModule = require('./tokens');
+const tokens = tokenModule.tokens;
 
 const chain = {
   cssOutput: undefined,
@@ -72,7 +74,22 @@ const chain = {
 // Initialize properties synchronously when module loads
 chain.initializeProperties();
 
-function $(){
+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
@@ -102,19 +119,16 @@ function $(){
           return result;
         };
       }
-      
       // Convert camelCase to kebab-case for CSS property
-      const cssProperty = prop.replace(/([A-Z])/g, '-$1').toLowerCase();
-      
+      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`);
+        console.warn(`Warning: '${cssProperty}' may not be a valid CSS property`);
       }
-      
       // Return a function that sets the value
       return function(value) {
-        catcher[prop] = value;
-        return proxy; // Return proxy for chaining
+        catcher[prop] = resolveToken(value, useTokens);  // ← USE IT HERE
+        return proxy;
       };
     }
   };
@@ -178,38 +192,13 @@ const compile = (obj) => {
   }
 
   chain.cssOutput = cssString.trim();
-  return cssString.trim();
 };
 
-const get = (filename) => {
-  const fileExt = path.extname(filename).toLowerCase();
-  if (fileExt !== '.jcss') {
-    throw new Error(`Import error: ${filename} must have .jcss extension`);
-  }
-  
-  // Try to resolve the path
-  const resolvedPath = path.resolve(process.cwd(), filename);
-  
-  // Check if file exists
-  if (!fs.existsSync(resolvedPath)) {
-    throw new Error(`File not found: ${filename} (resolved to: ${resolvedPath})`);
-  }
-  
-  return require(resolvedPath);
-};
-
-// Make chaincss available globally
-if (typeof global !== 'undefined') {
-  global.chain = chain;
-  global.run = run;
-  global.compile = compile;
-  global.$ = $;
-}
-
 module.exports = {
   chain,
   $,
   run,
   compile,
-  get
+  createTokens: tokenModule.createTokens,
+  responsive: tokenModule.responsive
 };

package/types.d.ts

@@ -0,0 +1,148 @@
+/// <reference types="react" />
+
+declare module '@melcanz85/chaincss' {
+  // Style definition returned by .block()
+  export interface StyleDefinition {
+    selectors: string[];
+    [cssProperty: string]: any;
+  }
+
+  // Base interface for CSS properties (dynamic)
+  export interface CSSPropertyBuilder {
+    [key: string]: (value: string | number) => ChainBuilder;
+  }
+
+  // Special methods interface
+  export interface SpecialMethods {
+    block(...selectors: string[]): StyleDefinition;
+    token?(path: string): ChainBuilder;
+  }
+
+  // ChainBuilder is the intersection of both
+  export type ChainBuilder = CSSPropertyBuilder & SpecialMethods;
+
+  // The main $ function
+  export function $(): ChainBuilder;
+
+  // Run function for inline styles
+  export function run(...styles: StyleDefinition[]): string;
+
+  // Compile function for objects
+  export function compile(styles: Record<string, StyleDefinition>): void;
+
+  // Get function for importing (VM-safe version)
+  export function get(filename: string): any;
+
+  // Chain object (internal state)
+  export const chain: {
+    cssOutput: string;
+    catcher: any;
+    cachedValidProperties: string[];
+  };
+
+  // Processor function
+  export function processor(inputFile: string, outputFile: string): Promise<void>;
+
+  // Watch function
+  export function watch(inputFile: string, outputFile: string): void;
+
+  // Atomic optimizer configuration
+  export interface AtomicConfig {
+    enabled?: boolean;
+    threshold?: number;
+    naming?: 'hash' | 'readable' | 'short';
+    cache?: boolean;
+    cachePath?: string;
+    minify?: boolean;
+  }
+
+  // Prefixer configuration
+  export interface PrefixerConfig {
+    mode?: 'auto' | 'full';
+    browsers?: string[];
+    enabled?: boolean;
+    sourceMap?: boolean;
+    sourceMapInline?: boolean;
+  }
+
+  // ChainCSS configuration
+  export interface ChainCSSConfig {
+    atomic?: AtomicConfig;
+    prefixer?: PrefixerConfig;
+    sourceMaps?: boolean;
+  }
+
+  // Function to configure ChainCSS
+  export function configure(config: ChainCSSConfig): void;
+
+  // Atomic optimizer instance
+  export const atomicOptimizer: {
+    optimize(styles: Record<string, StyleDefinition>): string;
+    getStats(): {
+      totalStyles: number;
+      atomicStyles: number;
+      uniqueProperties: number;
+      savings?: string;
+    };
+  };
+
+  // Token system types
+  export interface Tokens {
+    colors: Record<string, string | Record<string, string>>;
+    spacing: Record<string, string>;
+    typography: {
+      fontFamily: Record<string, string>;
+      fontSize: Record<string, string>;
+      fontWeight: Record<string, string>;
+      lineHeight: Record<string, string>;
+    };
+    breakpoints: Record<string, string>;
+    zIndex: Record<string, string>;
+    shadows: Record<string, string>;
+    borderRadius: Record<string, string>;
+  }
+
+  export class DesignTokens {
+    constructor(tokens: Partial<Tokens>);
+    get(path: string, defaultValue?: string): string;
+    toCSSVariables(prefix?: string): string;
+    createTheme(name: string, overrides: Record<string, any>): DesignTokens;
+  }
+
+  export const tokens: DesignTokens;
+  export function createTokens(customTokens: Partial<Tokens>): DesignTokens;
+  export function responsive(values: Record<string, string> | string): string;
+
+  // React hooks types (add to your existing declare module)
+  export interface UseChainStylesOptions {
+    cache?: boolean;
+    namespace?: string;
+    watch?: boolean;
+  }
+
+  export function useChainStyles(
+    styles: Record<string, any> | (() => Record<string, any>),
+    options?: UseChainStylesOptions
+  ): Record<string, string>;
+
+  export function useDynamicChainStyles(
+    styleFactory: () => Record<string, any>,
+    deps?: any[],
+    options?: UseChainStylesOptions
+  ): Record<string, string>;
+
+  export function useThemeChainStyles(
+    styles: Record<string, any> | ((theme: any) => Record<string, any>),
+    theme: any,
+    options?: UseChainStylesOptions
+  ): Record<string, string>;
+
+  export const ChainCSSGlobal: React.FC<{ styles: Record<string, any> }>;
+
+  export function withChainStyles(
+    styles: Record<string, any> | ((props: any) => Record<string, any>),
+    options?: UseChainStylesOptions
+  ): <P extends object>(Component: React.ComponentType<P>) => React.FC<P & { chainStyles?: Record<string, string> }>;
+
+  export function cx(...classes: (string | undefined | null | false)[]): string;
+}

package/.github/workflows/publish.yml

@@ -1,22 +0,0 @@
-name: Publish Package
-
-on:
-  push:
-    tags:
-      - 'v*'
-
-permissions:
-  id-token: write
-  contents: read
-
-jobs:
-  publish:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: '24'
-          registry-url: 'https://registry.npmjs.org'
-      - run: npm ci
-      - run: npm publish

package/publish.sh

@@ -1,7 +0,0 @@
-#!/bin/bash
-npm version patch
-git push --tags
-git checkout main
-git merge master
-git push origin main
-git checkout master