chaincss 1.13.2 → 1.13.3

package/README.md

@@ -4,7 +4,7 @@
 [![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
+> ChainCSS is the JavaScript-native styling engine for the modern web
 
 > **Note:** The previous package `@melcanz85/chaincss` is no longer supported.  
 > **Please install `chaincss` instead:** `npm install chaincss`
@@ -21,7 +21,7 @@
 | **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 |
+| **Token Resolution** | `:colors.primary` → actual color value |
 | **CSS Property Validation** | Warns on invalid CSS properties |
 
 ### At-Rules (CSS Rules)
@@ -44,7 +44,6 @@
 | **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()` |
 
@@ -129,20 +128,13 @@
 | **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 |
+For complete guide, documentation, examples, and API reference see:
+
+## [Documentation](https://www.chaincss.dev/docs)
 
-## Documentation
+ 
 
-For complete guide, documentation, examples, and API reference, 
-just go to the docs section of [https://chaincss.dev](https://www.chaincss.dev)
 
 ## License
 

package/browser/index.js

@@ -1,3 +1,3 @@
 // ChainCSS Browser Entry Point
-export { $, run, compile, chain, createTokens, responsive, tokens } from './rtt.js';
+export { $, run, compile, chain, createTokens, tokens } from './rtt.js';
 export { useChainStyles, useDynamicChainStyles, useThemeChainStyles, ChainCSSGlobal, withChainStyles, cx } from './react-hooks.js';

package/browser/rtt.js

@@ -1,4 +1,4 @@
-import { tokens, createTokens, responsive } from '../shared/tokens.mjs';
+import { tokens as importedTokens, DesignTokens } from '../shared/tokens.mjs';
 
 let cachedProperties = null;
 
@@ -28,7 +28,7 @@ const loadCSSProperties = async () => {
       });
       
       cachedProperties = Array.from(baseProperties).sort();
-      console.log(`✅ Loaded ${cachedProperties.length} CSS properties from CDN`);
+      //console.log(`Loaded ${cachedProperties.length} CSS properties from CDN`);
       return cachedProperties;
     }
   } catch (error) {
@@ -303,19 +303,43 @@ function $(useTokens = true) {
 
 const run = (...args) => {
   let cssOutput = '';
+  
   args.forEach((value) => {
     if (value && value.selectors) {
-      let rule = `${value.selectors.join(', ')} {\n`;
+      let normalStyles = '';
+      let hoverStyles = '';
+      
+      // Separate normal properties from hover
       for (let key in value) {
-        if (key !== 'selectors' && value.hasOwnProperty(key)) {
+        if (key === 'selectors') continue;
+        
+        if (key === 'hover' && typeof value[key] === 'object') {
+          // Build hover styles separately
+          hoverStyles = `${value.selectors.join(', ')}:hover {\n`;
+          for (let hoverKey in value[key]) {
+            const kebabKey = hoverKey.replace(/([A-Z])/g, '-$1').toLowerCase();
+            hoverStyles += `  ${kebabKey}: ${value[key][hoverKey]};\n`;
+          }
+          hoverStyles += `}\n`;
+        } else {
+          // Build normal styles
           const kebabKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
-          rule += `  ${kebabKey}: ${value[key]};\n`;
+          normalStyles += `  ${kebabKey}: ${value[key]};\n`;
         }
       }
-      rule += `}\n\n`;
-      cssOutput += rule;
+      
+      // Output normal styles
+      if (normalStyles) {
+        cssOutput += `${value.selectors.join(', ')} {\n${normalStyles}}\n`;
+      }
+      
+      // Output hover styles
+      if (hoverStyles) {
+        cssOutput += hoverStyles;
+      }
     }
   });
+  
   chain.cssOutput = cssOutput.trim();
   return cssOutput.trim();
 };
@@ -359,12 +383,18 @@ const compile = (obj) => {
   return cssString.trim();
 };
 
+function createTokens(tokenValues) {
+  const tokenObj = new DesignTokens(tokenValues);
+  return tokenObj;
+}
+
+const tokens = importedTokens;
+
 export {
   chain,
   $,
   run,
   compile,
   tokens,
-  createTokens,
-  responsive
+  createTokens
 };

package/browser/vue-composables.js

@@ -0,0 +1,200 @@
+import { computed, inject, provide, ref, watch } from 'vue';
+
+// Symbol for providing the global ChainCSS instance
+const CHAIN_CSS_KEY = Symbol('chaincss');
+
+/**
+ * Core function to process styles and generate class names
+ */
+function processStyles(styles, atomic = true) {
+  const result = {};
+  
+  for (const [key, styleFn] of Object.entries(styles)) {
+    if (typeof styleFn === 'function') {
+      result[key] = styleFn();
+    } else if (styleFn && typeof styleFn === 'object') {
+      // If it's already processed, use it
+      result[key] = styleFn;
+    } else {
+      result[key] = styleFn;
+    }
+  }
+  
+  return result;
+}
+
+/**
+ * Main composable for using ChainCSS in Vue components
+ * @param {Object|Ref|ComputedRef} styles - Style definitions
+ * @param {Object} options - Configuration options
+ * @returns {Object} - Classes object
+ */
+export function useAtomicClasses(styles, options = {}) {
+  const { atomic = true, global = false } = options;
+  
+  // Get global ChainCSS instance if available
+  const chainCSS = inject(CHAIN_CSS_KEY, null);
+  
+  // Create reactive classes
+  const classes = computed(() => {
+    // Resolve styles if it's a ref or computed
+    const resolvedStyles = typeof styles === 'function' 
+      ? styles() 
+      : styles?.value || styles;
+    
+    // Process the styles
+    const processed = processStyles(resolvedStyles, atomic);
+    
+    // If we have a global ChainCSS instance, register styles
+    if (chainCSS && typeof chainCSS.register === 'function') {
+      chainCSS.register(processed, { atomic, global });
+    }
+    
+    return processed;
+  });
+  
+  return {
+    classes,
+    // Helper to get specific class
+    cx: (name) => classes.value[name],
+    // Helper to combine multiple classes
+    cn: (...names) => names.map(name => classes.value[name]).filter(Boolean).join(' ')
+  };
+}
+
+/**
+ * Component for injecting global styles
+ */
+export const ChainCSSGlobal = {
+  name: 'ChainCSSGlobal',
+  props: {
+    styles: {
+      type: Object,
+      required: true
+    },
+    atomic: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup(props) {
+    // Create a computed ref for styles
+    const globalStyles = computed(() => props.styles);
+    
+    // Process and inject styles
+    const processedStyles = computed(() => {
+      return processStyles(globalStyles.value, props.atomic);
+    });
+    
+    // Provide ChainCSS instance to children
+    const chainCSSInstance = {
+      register: (styles, options) => {
+        // This would integrate with your actual ChainCSS runtime
+        console.log('Registering styles:', styles, options);
+        // TODO: Connect to actual ChainCSS runtime
+      }
+    };
+    
+    provide(CHAIN_CSS_KEY, chainCSSInstance);
+    
+    // In development, log the styles
+    if (process.env.NODE_ENV === 'development') {
+      watch(processedStyles, (styles) => {
+        console.log('[ChainCSS] Global styles registered:', styles);
+      }, { immediate: true });
+    }
+    
+    // This component doesn't render anything
+    return () => null;
+  }
+};
+
+/**
+ * Create a themed component with ChainCSS styles
+ * @param {Object|Function} styles - Style definitions
+ * @param {Object} options - Component options
+ * @returns {Object} - Vue component
+ */
+export function createStyledComponent(styles, options = {}) {
+  const { name = 'StyledComponent', atomic = true } = options;
+  
+  return {
+    name,
+    props: {
+      as: {
+        type: String,
+        default: 'div'
+      },
+      className: {
+        type: String,
+        default: ''
+      },
+      ...options.props
+    },
+    setup(props, { slots, attrs }) {
+      // Resolve styles (can be a function that receives props)
+      const resolvedStyles = computed(() => {
+        if (typeof styles === 'function') {
+          return styles(props);
+        }
+        return styles;
+      });
+      
+      const { classes, cn } = useAtomicClasses(resolvedStyles, { atomic });
+      
+      // Combine classes
+      const combinedClasses = computed(() => {
+        return cn('root', props.className);
+      });
+      
+      return () => {
+        const tag = props.as;
+        const componentProps = {
+          ...attrs,
+          class: combinedClasses.value
+        };
+        
+        // Remove props that shouldn't be passed to DOM elements
+        delete componentProps.as;
+        
+        return h(tag, componentProps, slots.default?.());
+      };
+    }
+  };
+}
+
+/**
+ * Create a reactive theme system
+ * @param {Object} themes - Theme definitions
+ * @returns {Object} - Theme utilities
+ */
+export function createTheme(themes) {
+  const currentTheme = ref(Object.keys(themes)[0] || 'light');
+  
+  const themeStyles = computed(() => {
+    return themes[currentTheme.value] || {};
+  });
+  
+  const setTheme = (themeName) => {
+    if (themes[themeName]) {
+      currentTheme.value = themeName;
+    }
+  };
+  
+  const toggleTheme = () => {
+    const keys = Object.keys(themes);
+    const currentIndex = keys.indexOf(currentTheme.value);
+    const nextIndex = (currentIndex + 1) % keys.length;
+    currentTheme.value = keys[nextIndex];
+  };
+  
+  return {
+    currentTheme: readonly(currentTheme),
+    themeStyles,
+    setTheme,
+    toggleTheme
+  };
+}
+
+// Import Vue's h function for createStyledComponent
+import { h, readonly } from 'vue';