chaincss 1.13.3 → 2.0.0

package/browser/rtt.js

@@ -1,400 +0,0 @@
-import { tokens as importedTokens, DesignTokens } from '../shared/tokens.mjs';
-
-let cachedProperties = null;
-
-const loadCSSProperties = async () => {
-  // Return cached if already loaded
-  if (cachedProperties !== null) {
-    return cachedProperties;
-  }
-  // Try CDN first (only once)
-  try {
-    const controller = new AbortController();
-    const timeoutId = setTimeout(() => controller.abort(), 3000); // 3 second timeout
-    
-    const response = await fetch('https://raw.githubusercontent.com/mdn/data/main/css/properties.json', {
-      signal: controller.signal
-    });
-    clearTimeout(timeoutId);
-    
-    if (response.ok) {
-      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);
-      });
-      
-      cachedProperties = Array.from(baseProperties).sort();
-      //console.log(`Loaded ${cachedProperties.length} CSS properties from CDN`);
-      return cachedProperties;
-    }
-  } catch (error) {
-    console.log('CDN failed, using fallback CSS property list');
-    // Use hardcoded fallback (always works)
-    const { COMMON_CSS_PROPERTIES } = await import('./commonProps.js');
-    cachedProperties = COMMON_CSS_PROPERTIES;
-    return cachedProperties;
-  }
-};
-
-const chain = {
-  cssOutput: undefined,
-  catcher: {},
-  cachedValidProperties: [],
-  async initializeProperties() {
-    if (this.cachedValidProperties.length > 0) {
-      return;
-    }
-    
-    const properties = await loadCSSProperties();
-    this.cachedValidProperties = properties;
-  },
-  getCachedProperties() {
-    return this.cachedValidProperties;
-  }
-};
-
-// Start initialization (non-blocking)
-chain.initializeProperties().catch(err => {
-  console.error('Failed to load CSS properties:', err.message);
-});
-
-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 = {};
-  const validProperties = chain.cachedValidProperties;
-  
-  const handler = {
-    get: (target, prop) => {
-      if (prop === 'block') {
-        return function(...args) {
-          if (args.length === 0) {
-            const result = { ...catcher };
-            Object.keys(catcher).forEach(key => delete catcher[key]);
-            return result;
-          }
-          const result = {
-            selectors: args,
-            ...catcher
-          };
-          Object.keys(catcher).forEach(key => delete catcher[key]);
-          return result;
-        };
-      }
-
-      if (prop === 'hover') {
-        return () => {
-          const hoverCatcher = {};
-          const hoverHandler = {
-            get: (hoverTarget, hoverProp) => {
-              if (hoverProp === 'end') {
-                return () => {
-                  catcher.hover = { ...hoverCatcher };
-                  Object.keys(hoverCatcher).forEach(key => delete hoverCatcher[key]);
-                  return proxy;
-                };
-              }
-              const cssProperty = hoverProp.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) => {
-                hoverCatcher[hoverProp] = resolveToken(value, useTokens);
-                return hoverProxy;
-              };
-            }
-          };
-          const hoverProxy = new Proxy({}, hoverHandler);
-          return hoverProxy;
-        };
-      }
-
-      if (prop === 'end') {
-        return () => {
-          return proxy;
-        };
-      }
-
-      if (prop === 'select') {
-        return function(selector) {
-          const props = {};
-          const selectorProxy = new Proxy({}, {
-            get: (target, methodProp) => {
-              if (methodProp === 'block') {
-                return function() {
-                  return {
-                    selectors: [selector],
-                    ...props
-                  };
-                };
-              }
-              return function(value) {
-                props[methodProp] = resolveToken(value, useTokens);
-                return selectorProxy;
-              };
-            }
-          });
-          return selectorProxy;
-        };
-      }
-
-      // At-Rules
-      if (prop === 'media') {
-        return function(query, callback) {
-          const subChain = $(useTokens);
-          const result = callback(subChain);
-          if (!catcher.atRules) catcher.atRules = [];
-          catcher.atRules.push({
-            type: 'media',
-            query: query,
-            styles: result
-          });
-          return proxy;
-        };
-      }
-
-      if (prop === 'keyframes') {
-        return function(name, callback) {
-          const keyframeContext = { _keyframeSteps: {} };
-          const keyframeProxy = new Proxy(keyframeContext, {
-            get: (target, stepProp) => {
-              if (stepProp === 'from' || stepProp === 'to') {
-                return function(stepCallback) {
-                  const subChain = $(useTokens);
-                  const properties = stepCallback(subChain).block();
-                  target._keyframeSteps[stepProp] = properties;
-                  return keyframeProxy;
-                };
-              }
-              if (stepProp === 'percent') {
-                return function(value, stepCallback) {
-                  const subChain = $(useTokens);
-                  const properties = stepCallback(subChain).block();
-                  target._keyframeSteps[`${value}%`] = properties;
-                  return keyframeProxy;
-                };
-              }
-              return undefined;
-            }
-          });
-          callback(keyframeProxy);
-          if (!catcher.atRules) catcher.atRules = [];
-          catcher.atRules.push({
-            type: 'keyframes',
-            name: name,
-            steps: keyframeContext._keyframeSteps
-          });
-          return proxy;
-        };
-      }
-
-      if (prop === 'fontFace') {
-        return function(callback) {
-          const subChain = $(useTokens);
-          const fontProps = callback(subChain).block();
-          if (!catcher.atRules) catcher.atRules = [];
-          catcher.atRules.push({
-            type: 'font-face',
-            properties: fontProps
-          });
-          return proxy;
-        };
-      }
-
-      if (prop === 'supports') {
-        return function(condition, callback) {
-          const subChain = $(useTokens);
-          const styles = callback(subChain);
-          if (!catcher.atRules) catcher.atRules = [];
-          catcher.atRules.push({
-            type: 'supports',
-            condition: condition,
-            styles: styles
-          });
-          return proxy;
-        };
-      }
-
-      if (prop === 'container') {
-        return function(condition, callback) {
-          const subChain = $(useTokens);
-          const styles = callback(subChain);
-          if (!catcher.atRules) catcher.atRules = [];
-          catcher.atRules.push({
-            type: 'container',
-            condition: condition,
-            styles: styles
-          });
-          return proxy;
-        };
-      }
-
-      if (prop === 'layer') {
-        return function(name, callback) {
-          const subChain = $(useTokens);
-          const styles = callback(subChain);
-          if (!catcher.atRules) catcher.atRules = [];
-          catcher.atRules.push({
-            type: 'layer',
-            name: name,
-            styles: styles
-          });
-          return proxy;
-        };
-      }
-
-      if (prop === 'counterStyle') {
-        return function(name, callback) {
-          const subChain = $(useTokens);
-          const properties = callback(subChain).block();
-          if (!catcher.atRules) catcher.atRules = [];
-          catcher.atRules.push({
-            type: 'counter-style',
-            name: name,
-            properties: properties
-          });
-          return proxy;
-        };
-      }
-
-      if (prop === 'property') {
-        return function(name, callback) {
-          const subChain = $(useTokens);
-          const descriptors = callback(subChain).block();
-          if (!catcher.atRules) catcher.atRules = [];
-          catcher.atRules.push({
-            type: 'property',
-            name: name,
-            descriptors: descriptors
-          });
-          return proxy;
-        };
-      }
-
-      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 function(value) {
-        catcher[prop] = resolveToken(value, useTokens);
-        return proxy;
-      };
-    }
-  };
-  
-  const proxy = new Proxy({}, handler);
-  return proxy;
-}
-
-const run = (...args) => {
-  let cssOutput = '';
-  
-  args.forEach((value) => {
-    if (value && value.selectors) {
-      let normalStyles = '';
-      let hoverStyles = '';
-      
-      // Separate normal properties from hover
-      for (let key in value) {
-        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();
-          normalStyles += `  ${kebabKey}: ${value[key]};\n`;
-        }
-      }
-      
-      // 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();
-};
-
-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 = '';
-      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`;
-        }
-      }
-      if (normalCSS) {
-        cssString += `${selectors.join(', ')} {\n${normalCSS}}\n`;
-      }
-      
-      // Generate hover styles
-      if (element.hover && typeof element.hover === 'object') {
-        let hoverCSS = '';
-        for (let prop in element.hover) {
-          if (element.hover.hasOwnProperty(prop) && prop !== 'selectors') {
-            const kebabKey = prop.replace(/([A-Z])/g, '-$1').toLowerCase();
-            hoverCSS += `  ${kebabKey}: ${element.hover[prop]};\n`;
-          }
-        }
-        if (hoverCSS) {
-          const hoverSelectors = selectors.map(s => `${s}:hover`);
-          cssString += `${hoverSelectors.join(', ')} {\n${hoverCSS}}\n`;
-        }
-      }
-    }
-  }
-  chain.cssOutput = cssString.trim();
-  return cssString.trim();
-};
-
-function createTokens(tokenValues) {
-  const tokenObj = new DesignTokens(tokenValues);
-  return tokenObj;
-}
-
-const tokens = importedTokens;
-
-export {
-  chain,
-  $,
-  run,
-  compile,
-  tokens,
-  createTokens
-};

package/browser/vue-composables.js

@@ -1,200 +0,0 @@
-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';