chaincss 2.0.7 → 2.1.0

package/src/runtime/injector.ts

@@ -0,0 +1,273 @@
+// src/runtime/injector.ts (fixed version)
+
+import { shorthandMap, macros } from '../compiler/shorthands.js';
+import { processStyleObject } from '../core/common-utils.js';
+
+const TOKEN_V2_KEY = '__CHAINCSS_V2_TOKENS__';
+
+export interface StyleDefinition {
+  selectors?: string[];
+  hover?: Record<string, string | number>;
+  [key: string]: any;
+}
+
+export interface TokenStore {
+  colors?: Record<string, string>;
+  spacing?: Record<string, string>;
+  typography?: Record<string, any>;
+  [key: string]: any;
+}
+
+class StyleInjector {
+  private styleElement: HTMLStyleElement | null = null;
+  private injectedHashes = new Set<string>();
+  private moduleMap = new Map<string, Set<string>>();
+  private debugMode = false;
+  
+  private get tokenStore(): TokenStore {
+    // Handle non-browser environments (SSR)
+    if (typeof window === 'undefined') {
+      return (this as any)._internalFallbackStore || {};
+    }
+
+    // Defensive initialization
+    if (!(window as any)[TOKEN_V2_KEY]) {
+      Object.defineProperty(window, TOKEN_V2_KEY, {
+        value: {},
+        writable: true,
+        enumerable: false,
+        configurable: true
+      });
+    }
+
+    return (window as any)[TOKEN_V2_KEY];
+  }
+
+  constructor() {
+    if (typeof document !== 'undefined') {
+      const existing = document.getElementById('chaincss-runtime-styles');
+      if (existing) {
+        this.styleElement = existing as HTMLStyleElement;
+      } else {
+        const style = document.createElement('style');
+        style.id = 'chaincss-runtime-styles';
+        style.setAttribute('data-chaincss', 'runtime');
+        document.head.appendChild(style);
+        this.styleElement = style;
+      }
+    }
+  }
+
+  /**
+   * Enable debug logging
+   */
+  enableDebug(enable: boolean = true): void {
+    this.debugMode = enable;
+  }
+
+  /**
+   * Set global tokens (e.g., brand colors, spacing scales)
+   */
+  setTokens(tokens: TokenStore): void {
+    if (this.debugMode) {
+      console.log('[ChainCSS] Tokens set:', Object.keys(tokens));
+    }
+    Object.assign(this.tokenStore, tokens);
+  }
+
+  /**
+   * Get a token value by path
+   */
+  getToken(path: string): any {
+    const parts = path.split('.');
+    let current: any = this.tokenStore;
+    for (const part of parts) {
+      if (current && current[part] !== undefined) {
+        current = current[part];
+      } else {
+        return undefined;
+      }
+    }
+    return current;
+  }
+
+  /**
+   * Resolves $variables within a string using the tokenStore
+   */
+  resolveToken(value: any): any {
+    if (typeof value !== 'string') return value;
+
+    // Exact match: "$colors.primary"
+    if (value.startsWith('$')) {
+      const tokenValue = this.getToken(value.slice(1));
+      return tokenValue !== undefined ? tokenValue : value;
+    }
+
+    // Partial match: "1px solid $colors.primary"
+    return value.replace(/\$([a-zA-Z0-9.-]+)/g, (match, path) => {
+      const tokenValue = this.getToken(path);
+      return tokenValue !== undefined ? String(tokenValue) : match;
+    });
+  }
+
+  private generateCSS(style: StyleDefinition, className: string): string {
+    let css = '';
+    const selector = `.${className}`;
+
+    // Process style object (handles shorthands and tokens)
+    const mainBody = processStyleObject(style, this.tokenStore, { useTokens: true, debug: false });
+    if (mainBody && Object.keys(mainBody).length > 0) {
+      let rules = '';
+      for (const [prop, val] of Object.entries(mainBody)) {
+        rules += `  ${prop}: ${val};\n`;
+      }
+      css += `${selector} {\n${rules}}\n`;
+    }
+
+    // Handle Hover
+    if (style.hover) {
+      const hoverBody = processStyleObject(style.hover, this.tokenStore, { useTokens: true, debug: false });
+      if (hoverBody && Object.keys(hoverBody).length > 0) {
+        let rules = '';
+        for (const [prop, val] of Object.entries(hoverBody)) {
+          rules += `  ${prop}: ${val};\n`;
+        }
+        css += `${selector}:hover {\n${rules}}\n`;
+      }
+    }
+
+    return css;
+  }
+
+  injectMultiple(styles: Record<string, StyleDefinition>, moduleId?: string): Record<string, string> {
+    const result: Record<string, string> = {};
+    let newCSS = '';
+    const moduleClasses = new Set<string>();
+
+    for (const [name, style] of Object.entries(styles)) {
+      const className = name;
+      result[name] = className;
+
+      if (!this.injectedHashes.has(className)) {
+        const generatedCSS = this.generateCSS(style, className);
+        if (generatedCSS) {
+          newCSS += generatedCSS;
+          this.injectedHashes.add(className);
+        }
+      }
+      moduleClasses.add(className);
+    }
+
+    if (moduleId && moduleClasses.size > 0) {
+      this.moduleMap.set(moduleId, moduleClasses);
+    }
+    
+    if (newCSS) {
+      this.writeToDOM(newCSS);
+      if (this.debugMode) {
+        console.log(`[ChainCSS] Injected ${newCSS.length} bytes of CSS (${moduleId || 'anonymous'})`);
+      }
+    }
+    
+    return result;
+  }
+
+  writeToDOM(css: string): void {
+    if (css && this.styleElement) {
+      this.styleElement.textContent += css;
+    }
+  }
+
+  removeModule(moduleId: string): void {
+    const classes = this.moduleMap.get(moduleId);
+    if (!classes || !this.styleElement?.sheet) return;
+
+    const sheet = this.styleElement.sheet;
+    let removedCount = 0;
+    
+    for (let i = sheet.cssRules.length - 1; i >= 0; i--) {
+      const rule = sheet.cssRules[i] as CSSStyleRule;
+      if (rule.selectorText) {
+        const match = rule.selectorText.match(/\.([a-zA-Z0-9_-]+)/);
+        if (match && classes.has(match[1])) {
+          sheet.deleteRule(i);
+          this.injectedHashes.delete(match[1]);
+          removedCount++;
+        }
+      }
+    }
+    
+    this.moduleMap.delete(moduleId);
+    
+    if (this.debugMode) {
+      console.log(`[ChainCSS] Removed ${removedCount} rules for module ${moduleId}`);
+    }
+  }
+
+  removeAll(): void {
+    if (this.styleElement) {
+      this.styleElement.textContent = '';
+      this.injectedHashes.clear();
+      this.moduleMap.clear();
+      
+      if (this.debugMode) {
+        console.log('[ChainCSS] All runtime styles removed');
+      }
+    }
+  }
+
+  getStyleElement(): HTMLStyleElement | null {
+    return this.styleElement;
+  }
+  
+  getStats(): { injectedStyles: number; modules: number } {
+    return {
+      injectedStyles: this.injectedHashes.size,
+      modules: this.moduleMap.size
+    };
+  }
+}
+
+// --- SINGLETON INSTANCE ---
+export const styleInjector = new StyleInjector();
+
+// --- PUBLIC API ---
+export const setTokens = (t: TokenStore) => styleInjector.setTokens(t);
+export const compileRuntime = (s: Record<string, StyleDefinition>, moduleId?: string) =>
+  styleInjector.injectMultiple(s, moduleId);
+export const removeRuntimeModule = (moduleId: string) => styleInjector.removeModule(moduleId);
+export const clearRuntimeStyles = () => styleInjector.removeAll();
+export const enableRuntimeDebug = (enabled: boolean) => styleInjector.enableDebug(enabled);
+
+export function runRuntime(...styles: StyleDefinition[]): string {
+  let css = '';
+  for (const style of styles) {
+    if (style.selectors && style.selectors.length > 0) {
+      const combinedSelector = style.selectors.join(', ');
+      
+      // Use styleInjector directly instead of 'this'
+      const mainBody = processStyleObject(style, styleInjector['tokenStore'], { useTokens: true, debug: false });
+      
+      if (mainBody && Object.keys(mainBody).length > 0) {
+        let rules = '';
+        for (const [prop, val] of Object.entries(mainBody)) {
+          rules += `  ${prop}: ${val};\n`;
+        }
+        css += `${combinedSelector} {\n${rules}}\n`;
+      }
+      
+      if (style.hover) {
+        const hoverBody = processStyleObject(style.hover, styleInjector['tokenStore'], { useTokens: true, debug: false });
+        if (hoverBody && Object.keys(hoverBody).length > 0) {
+          let rules = '';
+          for (const [prop, val] of Object.entries(hoverBody)) {
+            rules += `  ${prop}: ${val};\n`;
+          }
+          css += `${combinedSelector}:hover {\n${rules}}\n`;
+        }
+      }
+    }
+  }
+  styleInjector.writeToDOM(css);
+  return css;
+}

package/src/runtime/react.tsx

@@ -0,0 +1,269 @@
+// src/runtime/react.tsx (fixed version)
+
+import React, { useMemo, useRef, useState, useEffect } from 'react';
+import { compileRuntime, setTokens as setGlobalTokens, removeRuntimeModule } from './injector.js';
+import { RuntimeChain } from './Chain.js';
+
+export interface UseChainStylesOptions {
+  cache?: boolean;
+  namespace?: string;
+  watch?: boolean;
+  debug?: boolean;
+  ssr?: boolean;
+}
+
+// Better hash function with lower collision risk
+function hashStyleObject(obj: Record<string, any>): string {
+  const str = JSON.stringify(obj);
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = ((hash << 5) - hash) + char;
+    hash = hash & hash; // Convert to 32-bit integer
+  }
+  return Math.abs(hash).toString(36);
+}
+
+/**
+ * React hook for ChainCSS runtime styles
+ */
+export function useChainStyles(
+  styles: Record<string, any>,
+  deps: any[] = [],
+  options: UseChainStylesOptions = {}
+): Record<string, string> {
+  const { namespace = 'c', debug = false, ssr = false } = options;
+  const instanceId = useRef(Math.random().toString(36).substring(2, 7));
+  const moduleId = useRef(`chaincss-module-${instanceId.current}`);
+  const [forceUpdate, setForceUpdate] = useState(0);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (!ssr && moduleId.current) {
+        removeRuntimeModule(moduleId.current);
+        if (debug) {
+          console.log(`[ChainCSS] Cleaned up module: ${moduleId.current}`);
+        }
+      }
+    };
+  }, [ssr]);
+
+  return useMemo(() => {
+    const finalClassMap: Record<string, string> = {};
+    const injectionBundle: Record<string, any> = {};
+
+    for (const [key, styleDef] of Object.entries(styles)) {
+      let styleObject: Record<string, any> = {};
+      
+      if (styleDef && typeof (styleDef as any).$el === 'function') {
+        styleObject = (styleDef as any).$el();
+        if (debug) {
+          console.log(`[ChainCSS] Processing style: ${key}`, styleObject);
+        }
+      } else if (styleDef && typeof styleDef === 'object') {
+        styleObject = { ...styleDef };
+      }
+
+      // Remove internal keys
+      const staticClasses = Array.isArray(styleObject._classes) ? styleObject._classes : [];
+      const internalKeys = ['catcher', 'proxy', 'useTokens', 'componentName', '_isChain', '_classes', '_name'];
+      internalKeys.forEach(k => delete styleObject[k]);
+
+      // Generate stable hash
+      const hash = hashStyleObject(styleObject);
+      const dynamicClassName = `${namespace}-${key}-${hash}`;
+
+      // Check if there are actual styles
+      const hasStyles = Object.keys(styleObject).length > 0;
+      
+      if (!ssr && hasStyles) {
+        injectionBundle[dynamicClassName] = styleObject;
+      }
+
+      // Combine static and dynamic classes
+      const classParts = [...staticClasses];
+      if (hasStyles) {
+        classParts.push(dynamicClassName);
+      }
+      finalClassMap[key] = classParts.join(' ').trim();
+    }
+
+    // Inject all styles at once
+    if (!ssr && Object.keys(injectionBundle).length > 0) {
+      compileRuntime(injectionBundle, moduleId.current);
+      if (debug) {
+        console.log(`[ChainCSS] Injected ${Object.keys(injectionBundle).length} styles for module ${moduleId.current}`);
+      }
+    }
+
+    return finalClassMap;
+  }, [forceUpdate, ...deps]);
+}
+
+/**
+ * Dynamic styles hook - re-runs when deps change
+ */
+export function useDynamicChainStyles(
+  styleFactory: () => Record<string, any>,
+  deps: any[] = [],
+  options?: UseChainStylesOptions
+): Record<string, string> {
+  const styles = useMemo(() => styleFactory(), deps);
+  return useChainStyles(styles, deps, options);
+}
+
+/**
+ * Theme-aware styles hook
+ */
+export function useThemeChainStyles(
+  styles: Record<string, any> | ((theme: any) => Record<string, any>),
+  theme: any,
+  options?: UseChainStylesOptions
+): Record<string, string> {
+  const themedStyles = useMemo(() => {
+    if (typeof styles === 'function') return styles(theme);
+    return styles;
+  }, [styles, theme]);
+  return useChainStyles(themedStyles, [theme], options);
+}
+
+/**
+ * Global style injection component
+ */
+export function ChainCSSGlobal({ styles, tokens, children }: { 
+  styles?: Record<string, any>; 
+  tokens?: any;
+  children?: React.ReactNode;
+}) {
+  if (tokens) {
+    setGlobalTokens(tokens);
+  }
+  
+  if (styles) {
+    useChainStyles(styles, [], { watch: true });
+  }
+  
+  return <>{children}</>;
+}
+
+/**
+ * Class name utility (like clsx)
+ */
+export function cx(...classes: (string | undefined | null | false | Record<string, boolean>)[]): string {
+  const result: string[] = [];
+  
+  for (const cls of classes) {
+    if (!cls) continue;
+    if (typeof cls === 'string') {
+      result.push(cls);
+    } else if (typeof cls === 'object') {
+      for (const [key, value] of Object.entries(cls)) {
+        if (value) result.push(key);
+      }
+    }
+  }
+  
+  return result.join(' ');
+}
+
+/**
+ * HOC for class components
+ */
+export function withChainStyles<P extends object>(
+  styles: Record<string, any> | ((props: P) => Record<string, any>),
+  options?: UseChainStylesOptions
+) {
+  return function WrappedComponent(props: P & { chainStyles?: Record<string, string> }) {
+    const styleProps = typeof styles === 'function' ? styles(props) : styles;
+    const classNames = useChainStyles(styleProps, [], options);
+    const Component = (props as any).component || (props as any).wrappedComponent;
+    return <Component {...props} chainStyles={classNames} />;
+  };
+}
+
+/**
+ * Create a styled component (React)
+ */
+export function createStyledComponent<T extends keyof React.JSX.IntrinsicElements = "div">(
+  elementType: T,
+  styles: Record<string, any> | (() => Record<string, any>),
+  options?: UseChainStylesOptions
+): React.FC<React.ComponentProps<T> & { className?: string }> {
+  const StyledComponent: React.FC<any> = (props) => {
+    const { className: additionalClassName, ...rest } = props;
+    const styleDef = typeof styles === 'function' ? styles() : styles;
+    const classNames = useChainStyles({ root: styleDef }, [], options);
+    
+    const combinedClassName = cx(classNames.root, additionalClassName);
+    
+    return React.createElement(elementType, {
+      ...rest,
+      className: combinedClassName
+    });
+  };
+  
+  const displayName = typeof elementType === 'string' ? elementType : (elementType as any).displayName || 'Component';
+  StyledComponent.displayName = `ChainCSS.${displayName}`;
+  
+  return StyledComponent;
+}
+
+/**
+ * Create multiple styled components at once
+ */
+export function createStyledComponents(components: Record<string, any>): Record<string, React.FC> {
+  const result: Record<string, React.FC> = {};
+  
+  for (const [name, config] of Object.entries(components)) {
+    const { element = 'div', styles, options } = config as any;
+    result[name] = createStyledComponent(element, styles, options);
+  }
+  
+  return result;
+}
+
+/**
+ * CSS-in-JS hook with computed styles
+ */
+export function useComputedStyles<T extends Record<string, any>>(
+  styles: (props: T) => Record<string, any>,
+  props: T,
+  deps: any[] = [],
+  options?: UseChainStylesOptions
+): Record<string, string> {
+  const computedStyles = useMemo(() => styles(props), [props, ...deps]);
+  return useChainStyles(computedStyles, deps, options);
+}
+
+/**
+ * Set global tokens from React
+ */
+export function setTokens(tokens: any): void {
+  setGlobalTokens(tokens);
+}
+
+/**
+ * Debug utilities
+ */
+let debugEnabled = false;
+
+export function enableChainCSSDebug(): void {
+  debugEnabled = true;
+  if (typeof window !== 'undefined') {
+    (window as any).__CHAINCSS_DEBUG__ = true;
+    console.log('🔍 ChainCSS Debug Mode Enabled');
+  }
+}
+
+export function disableChainCSSDebug(): void {
+  debugEnabled = false;
+  if (typeof window !== 'undefined') {
+    (window as any).__CHAINCSS_DEBUG__ = false;
+    console.log('🔍 ChainCSS Debug Mode Disabled');
+  }
+}
+
+export function isDebugEnabled(): boolean {
+  return debugEnabled || (typeof window !== 'undefined' && (window as any).__CHAINCSS_DEBUG__);
+}

package/src/runtime/svelte.ts

@@ -0,0 +1,15 @@
+// Svelte integration — optional peer dependency
+// @ts-nocheck
+import { onDestroy, getContext, setContext } from 'svelte';
+import { writable, derived, type Writable, type Readable, get } from 'svelte/store';
+import { compileRuntime, styleInjector, removeRuntimeModule } from './injector.js';
+
+export function useAtomicClasses() { return { subscribe: () => {}, get: () => ({}) }; }
+export function cx(...args: any[]) { return args.filter(Boolean).join(' '); }
+export function ChainCSSGlobal() { return null; }
+export function createStyledComponent() { return () => null; }
+export function createStyledComponents() { return {}; }
+export function useComputedStyles() { return { subscribe: () => {}, get: () => '' }; }
+export function provideStyleContext() {}
+export function injectStyleContext() { return {}; }
+export function chainStyles() { return {}; }