chaincss 1.12.8

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2025 Rommel Caneos
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+EOF

package/README.md

@@ -0,0 +1,148 @@
+# ChainCSS
+
+![npm downloads](https://img.shields.io/npm/dm/@melcanz85/chaincss)
+[![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://chaincss.dev)
+
+> Chainable CSS-in-JS with build-time compilation, atomic CSS, and zero-runtime options
+
+##  Features
+
+### Core Styling Features
+
+| Feature | Description |
+|---------|-------------|
+| **Chainable API** | `$().color('red').padding('10px').block()` |
+| **CSS Properties** | All standard CSS properties (camelCase) |
+| **Multiple Selectors** | `.block('.btn', '.button', '[type="button"]')` |
+| **Hover States** | `.hover().backgroundColor('blue').end()` |
+| **Hover Exit** | `.end()` method to exit hover mode |
+| **Nested Selectors** | `.select('.parent .child')` |
+| **Token Resolution** | `$colors.primary` → actual color value |
+| **CSS Property Validation** | Warns on invalid CSS properties |
+
+### At-Rules (CSS Rules)
+
+| At-Rule | Method | Example |
+|---------|--------|---------|
+| **Media Queries** | `.media()` | `.media('(max-width: 768px)', (css) => {...})` |
+| **Keyframes** | `.keyframes()` | `.keyframes('slide', (kf) => {...})` |
+| **Font Face** | `.fontFace()` | `.fontFace((css) => {...})` |
+| **Supports** | `.supports()` | `.supports('display: grid', (css) => {...})` |
+| **Container Queries** | `.container()` | `.container('(min-width: 400px)', (css) => {...})` |
+| **CSS Layers** | `.layer()` | `.layer('components', (css) => {...})` |
+| **Counter Styles** | `.counterStyle()` | `.counterStyle('circled', (css) => {...})` |
+| **Custom Properties** | `.property()` | `.property('--my-color', (css) => {...})` |
+
+### Design System
+
+| Feature | Description |
+|---------|-------------|
+| **Design Tokens** | `createTokens()` with colors, spacing, typography |
+| **Token Getter** | `tokens.get('colors.primary')` |
+| **Token Resolution in Styles** | `$colors.primary` syntax |
+| **Responsive Values** | `responsive({ base: '16px', sm: '14px', lg: '18px' })` |
+| **Theme Switching** | Dynamic token updates at runtime |
+| **CSS Variables Output** | `tokens.toCSSVariables()` |
+
+### Component System
+
+| Feature | Description |
+|---------|-------------|
+| **Framework Agnostic** | React, Next.js, Vite, Webpack |
+| **Recipe System** | `recipe()` for variant-based components |
+| **Base Styles** | `recipe({ base: $().padding('8px').block() })` |
+| **Variants** | `variants: { color: { primary: $().bg('blue').block() } }` |
+| **Default Variants** | `defaultVariants: { color: 'primary' }` |
+| **Compound Variants** | `compoundVariants: [{ variants: { color: 'primary', size: 'lg' }, style: ... }]` |
+| **Variant Combination** | `button({ color: 'primary', size: 'lg' })` |
+| **Compile All Variants** | `button.compileAll()` |
+
+### Build-Time Features (CLI)
+
+| Feature | Command/Flag |
+|---------|--------------|
+| **CSS Compilation** | `chaincss input.jcss output/dir` |
+| **Watch Mode** | `--watch` flag |
+| **Atomic CSS Optimization** | `--atomic` flag |
+| **Source Maps** | `--source-map` flag |
+| **Minification** | Via CleanCSS (built-in) |
+| **Autoprefixer** | `--prefixer-mode auto` |
+| **Class Map Generation** | `.map.json` output |
+| **JS Module Export** | `.classes.js` output |
+| **TypeScript Definitions** | `.classes.d.ts` output |
+| **Build Manifest** | `chaincss-manifest.json` |
+| **CSS Property Cache** | Local cache for faster builds |
+
+### React Runtime Features
+
+| Feature | Description |
+|---------|-------------|
+| **useChainStyles** | Main React hook for styles |
+| **useDynamicChainStyles** | For dynamic styles with dependencies |
+| **useThemeChainStyles** | For theme-aware styles |
+| **ChainCSSGlobal** | Global style injection component |
+| **withChainStyles** | HOC for class components |
+| **cx** | Class name utility (like clsx) |
+
+### Plugin Ecosystem
+
+| Plugin | Description |
+|--------|-------------|
+| **Vite Plugin** | `.jcss` support with HMR |
+| **Webpack Plugin** | Build-time compilation |
+| **Next.js Plugin** | SSR support |
+| **Webpack Loader** | ChainCSS loader for webpack |
+
+### Development Tools
+
+| Feature | Description |
+|---------|-------------|
+| **TypeScript Support** | Full type definitions (`types.d.ts`) |
+| **Configuration File** | `chaincss.config.cjs` for customization |
+| **Cache Management** | Atomic optimizer cache |
+| **Cache Cleanup** | Auto cleanup of old cache files |
+| **Atomic Optimizer Stats** | `atomicOptimizer.getStats()` |
+| **configureAtomic** | Programmatic atomic config |
+
+### CSS Output Features
+
+| Feature | Description |
+|---------|-------------|
+| **Pure CSS Output** | `global.css` generation |
+| **Atomic CSS Output** | Reusable atomic classes |
+| **Source Maps** | `.map` files for debugging |
+| **Class Mapping** | Selector → atomic class map |
+| **Minified Output** | Via CleanCSS |
+| **Vendor Prefixing** | Via Autoprefixer |
+
+### Performance Features
+
+| Feature | Description |
+|---------|-------------|
+| **Zero Runtime Option** | Build mode = 0KB runtime |
+| **Small Runtime** | Runtime mode = ~3.2KB |
+| **Tree Shaking** | `sideEffects: false` |
+| **Atomic CSS Optimization** | Eliminates duplicate styles |
+| **Cache Strategy** | File + compiled function cache |
+
+### Security & Compatibility
+
+| Feature | Description |
+|---------|-------------|
+| **No eval()** | Uses `new Function()` with parameters |
+| **No vm2** | Native Node.js module system |
+| **Node.js 14+** | Minimum version requirement |
+| **ESM/CJS Support** | Dual module format |
+| **Browser Support** | Modern browsers via autoprefixer |
+
+## Documentation
+
+For complete guide, documentation, examples, and API reference, 
+just go to the docs section of [https://chaincss.dev](https://www.chaincss.dev)
+
+## License
+
+MIT © [Rommel Caneos](https://github.com/melcanz08)

package/browser/index.js

@@ -0,0 +1,3 @@
+// 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/browser/react-hooks.js

@@ -0,0 +1,138 @@
+import React, { useMemo, useEffect, useRef, useState } from 'react';
+import { $, compile, chain } from './rtt';
+
+const styleCache = new Map();
+let styleSheet = null;
+
+const initStyleSheet = () => {
+  if (typeof document === 'undefined') return null;
+  if (!styleSheet) {
+    const existing = document.getElementById('chaincss-styles');
+    if (existing) {
+      styleSheet = existing;
+      return styleSheet;
+    }
+    const style = document.createElement('style');
+    style.id = 'chaincss-styles';
+    style.setAttribute('data-chaincss', 'true');
+    document.head.appendChild(style);
+    styleSheet = style;
+  }
+  return styleSheet;
+};
+
+const updateStyles = (css) => {
+  const sheet = initStyleSheet();
+  if (sheet) {
+    sheet.textContent = css;
+  }
+};
+
+export function useChainStyles(styles, deps = [], options = {}) {
+  const {
+    cache = true,
+    namespace = 'chain',
+    watch = false
+  } = options;
+  
+  const id = useRef(`chain-${Math.random().toString(36).substr(2, 9)}`);
+  const [classNames, setClassNames] = useState({});
+  
+  const processed = useMemo(() => {
+    const resolvedStyles = typeof styles === 'function' ? styles() : styles;
+    if (!resolvedStyles || Object.keys(resolvedStyles).length === 0) {
+      return { classNames: {}, css: '' };
+    }
+    
+    const cacheKey = JSON.stringify(resolvedStyles);
+    if (cache && styleCache.has(cacheKey)) {
+      return styleCache.get(cacheKey);
+    }
+    
+    const newClassNames = {};
+    const compiledStyles = {};
+    
+    Object.entries(resolvedStyles).forEach(([key, styleDef]) => {
+      const className = `${namespace}-${key}-${id.current}`;
+      const styleObj = typeof styleDef === 'function' 
+        ? styleDef() 
+        : styleDef;
+      newClassNames[key] = className;
+      compiledStyles[`${key}_${id.current}`] = {
+        selectors: [`.${className}`],
+        ...styleObj
+      };
+    });
+    
+    compile(compiledStyles);
+    const css = chain.cssOutput;
+    const result = { classNames: newClassNames, css };
+    
+    if (cache) {
+      styleCache.set(cacheKey, result);
+    }
+    return result;
+  }, [styles, namespace, id.current, ...deps]);
+  
+  useEffect(() => {
+    if (processed.css) {
+      if (!watch) {
+        const sheet = initStyleSheet();
+        if (sheet) {
+          const existingStyles = sheet.textContent || '';
+          const styleRegex = new RegExp(`\\.[\\w-]*${id.current}[\\s\\S]*?}`, 'g');
+          const cleanedStyles = existingStyles.replace(styleRegex, '');
+          sheet.textContent = cleanedStyles + processed.css;
+        }
+      } else {
+        updateStyles(processed.css);
+      }
+    }
+    
+    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;
+}
+
+export function useDynamicChainStyles(styleFactory, deps = [], options = {}) {
+  const styles = useMemo(() => {
+    return styleFactory();
+  }, deps);
+  return useChainStyles(styles, options);
+}
+
+export function useThemeChainStyles(styles, theme, options = {}) {
+  const themedStyles = useMemo(() => {
+    if (typeof styles === 'function') {
+      return styles(theme);
+    }
+    return styles;
+  }, [styles, theme]);
+  return useChainStyles(themedStyles, options);
+}
+
+export function ChainCSSGlobal({ styles }) {
+  useChainStyles(styles, { watch: true });
+  return null;
+}
+
+export function withChainStyles(styles, options = {}) {
+  return function WrappedComponent(props) {
+    const classNames = useChainStyles(
+      typeof styles === 'function' ? styles(props) : styles,
+      options
+    );
+    return React.createElement(WrappedComponent, { ...props, chainStyles: classNames });
+  };
+}
+
+export function cx(...classes) {
+  return classes.filter(Boolean).join(' ');
+}

package/browser/rtt.js

@@ -0,0 +1,212 @@
+import { tokens, createTokens, responsive } from '../shared/tokens.mjs';
+
+let cssProperties = [];
+
+const loadCSSProperties = async () => {
+  try {
+    const module = await import('../node/css-properties.json', { 
+      assert: { type: 'json' }
+    });
+    return module.default;
+  } catch (e) {
+    console.log('CSS properties file not found in package, will fetch from CDN');
+    return null;
+  }
+};
+
+const chain = {
+  cssOutput: undefined,
+  catcher: {},
+  cachedValidProperties: [],
+  async initializeProperties() {
+    if (this.cachedValidProperties.length > 0) {
+      return;
+    }
+    
+    const localProperties = await loadCSSProperties();
+    if (localProperties && localProperties.length > 0) {
+      this.cachedValidProperties = localProperties;
+      return;
+    }
+    
+    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);
+      
+      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 = [];
+    }
+  },
+  getCachedProperties() {
+    return this.cachedValidProperties;
+  }
+};
+
+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 regularStyles = {};
+  const hoverStyles = {};
+  let isBuildingHover = false;
+  
+  const validProperties = chain.cachedValidProperties;
+  
+  // Create the main proxy
+  const createProxy = () => {
+    const handler = {
+      get: (target, prop) => {
+        // Handle .block()
+        if (prop === 'block') {
+          return (...args) => {
+            const result = { ...regularStyles };
+            
+            // Add hover styles if any exist
+            if (Object.keys(hoverStyles).length > 0) {
+              result.hover = { ...hoverStyles };
+            }
+            
+            if (args.length > 0) {
+              result.selectors = args;
+            }
+            
+            // Clear for next use
+            Object.keys(regularStyles).forEach(key => delete regularStyles[key]);
+            Object.keys(hoverStyles).forEach(key => delete hoverStyles[key]);
+            isBuildingHover = false;
+            
+            return result;
+          };
+        }
+        
+        // Handle .hover()
+        if (prop === 'hover') {
+          return () => {
+            isBuildingHover = true;
+            return proxy; // Return the same proxy, just with hover mode on
+          };
+        }
+
+        if(prop==='end'){
+          return () => {
+            isBuildingHover = false;
+            return proxy; // Return the same proxy, but end of hover mode
+          };
+        }
+        
+        // Handle regular CSS properties
+        const cssProperty = prop.replace(/([A-Z])/g, '-$1').toLowerCase();
+        if (validProperties && validProperties.length > 0 && !validProperties.includes(cssProperty)) {
+          console.warn(`Warning: '${cssProperty}' may not be a valid CSS property`);
+        }
+        
+        return (value) => {
+          if (isBuildingHover) {
+            hoverStyles[prop] = resolveToken(value, useTokens);
+          } else {
+            regularStyles[prop] = resolveToken(value, useTokens);
+          }
+          return proxy;
+        };
+      }
+    };
+    
+    return new Proxy({}, handler);
+  };
+  
+  const proxy = createProxy();
+  return proxy;
+}
+
+const run = (...args) => {
+  let cssOutput = '';
+  args.forEach((value) => {
+    if (value && value.selectors) {
+      let rule = `${value.selectors.join(', ')} {\n`;
+      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 || [];
+      
+      // Generate normal styles
+      let normalCSS = '';
+      let hoverCSS = '';
+      
+      for (let prop in element) {
+        if (element.hasOwnProperty(prop) && prop !== 'selectors' && prop !== 'hover') {
+          const kebabKey = prop.replace(/([A-Z])/g, '-$1').toLowerCase();
+          normalCSS += `  ${kebabKey}: ${element[prop]};\n`;
+        }
+      }
+      
+      // Generate hover styles if present
+      if (element.hover && typeof element.hover === 'object') {
+        for (let prop in element.hover) {
+          if (element.hover.hasOwnProperty(prop)) {
+            const kebabKey = prop.replace(/([A-Z])/g, '-$1').toLowerCase();
+            hoverCSS += `  ${kebabKey}: ${element.hover[prop]};\n`;
+          }
+        }
+      }
+      
+      // Add normal styles
+      if (normalCSS) {
+        cssString += `${selectors.join(', ')} {\n${normalCSS}}\n`;
+      }
+      
+      // Add hover styles as separate rule
+      if (hoverCSS) {
+        const hoverSelectors = selectors.map(s => `${s}:hover`);
+        cssString += `${hoverSelectors.join(', ')} {\n${hoverCSS}}\n`;
+      }
+    }
+  }
+  chain.cssOutput = cssString.trim();
+  return cssString.trim();
+};
+
+export {
+  chain,
+  $,
+  run,
+  compile,
+  tokens,
+  createTokens,
+  responsive
+};