chaincss 2.1.30 → 2.1.31

package/src/compiler/component-generator.ts

@@ -0,0 +1,87 @@
+// src/compiler/component-generator.ts
+// Auto-generates React/Vue/Svelte/Solid components from style definitions
+
+interface ComponentInfo {
+  name: string;
+  selector: string;
+  styles: Record<string, any>;
+  propsDefinition?: Record<string, any>;
+  framework: 'react' | 'vue' | 'svelte' | 'solid' | 'auto';
+}
+
+export function detectFramework(): 'react' | 'vue' | 'svelte' | 'solid' {
+  try { require.resolve('react/package.json'); return 'react'; } catch {}
+  try { require.resolve('vue/package.json'); return 'vue'; } catch {}
+  try { require.resolve('svelte/package.json'); return 'svelte'; } catch {}
+  try { require.resolve('solid-js/package.json'); return 'solid'; } catch {}
+  return 'react';
+}
+
+export function generateComponentCode(info: ComponentInfo): string {
+  const framework = info.framework === 'auto' ? detectFramework() : info.framework;
+  const cleanSelector = info.selector.replace(/^\./, '');
+  
+  switch (framework) {
+    case 'react': {
+      const props = info.propsDefinition
+        ? Object.entries(info.propsDefinition).map(([k, t]) => `  ${k}?: ${t};`).join('\n')
+        : '  [key: string]: any;';
+      return `// Auto-generated by ChainCSS
+import React from 'react';
+import styles from './${info.name}.class.js';
+import './${info.name}.css';
+
+export interface ${info.name}Props {
+  className?: string;
+  children?: React.ReactNode;
+${props}
+}
+
+export const ${info.name}: React.FC<${info.name}Props> = ({ className, children, ...props }) => {
+  const cn = [styles.${cleanSelector}, className].filter(Boolean).join(' ');
+  return <div className={cn} {...props}>{children}</div>;
+};
+${info.name}.displayName = 'ChainCSS${info.name}';
+export default ${info.name};
+`;
+    }
+    case 'vue':
+      return `<!-- Auto-generated by ChainCSS -->
+<template>
+  <component :is="tag" :class="combinedClass" v-bind="$attrs"><slot /></component>
+</template>
+<script>
+import styles from './${info.name}.class.js';
+import './${info.name}.css';
+export default {
+  name: 'ChainCSS${info.name}',
+  props: { tag: { type: String, default: 'div' }, className: { type: String, default: '' } },
+  computed: { combinedClass() { return [styles.${cleanSelector}, this.className].filter(Boolean).join(' '); } }
+};
+</script>`;
+    case 'svelte':
+      return `<!-- Auto-generated by ChainCSS -->
+<script>
+  import styles from './${info.name}.class.js';
+  import './${info.name}.css';
+  export let className = '';
+  export let tag = 'div';
+  $: combinedClass = [styles.${cleanSelector}, className].filter(Boolean).join(' ');
+</script>
+<svelte:element this={tag} class={combinedClass}><slot /></svelte:element>`;
+    case 'solid':
+      return `// Auto-generated by ChainCSS
+import { splitProps } from 'solid-js';
+import styles from './${info.name}.class.js';
+import './${info.name}.css';
+export function ${info.name}(props: any) {
+  const [local, others] = splitProps(props, ['class', 'children']);
+  const cn = () => [styles.${cleanSelector}, local.class].filter(Boolean).join(' ');
+  return <div class={cn()} {...others}>{local.children}</div>;
+}`;
+    default:
+      return generateComponentCode({ ...info, framework: 'react' });
+  }
+}
+
+export type { ComponentInfo };

package/src/compiler/recipe.ts

@@ -0,0 +1,145 @@
+// src/compiler/recipe.ts
+/**
+ * Recipe System - Type-safe component variants
+ */
+import { chain } from './Chain.js';
+// Local type to avoid circular import with btt.ts
+interface StyleDefinition {
+  selectors: string[];
+  hover?: Record<string, string | number>;
+  [key: string]: any;
+}
+import { run } from './btt.js';
+
+export interface RecipeOptions<TVariants extends Record<string, Record<string, any>>> {
+  base?: StyleDefinition | (() => StyleDefinition);
+  variants?: TVariants;
+  defaultVariants?: Partial<{ [K in keyof TVariants]: keyof TVariants[K] }>;
+  compoundVariants?: Array<{
+    variants: Partial<{ [K in keyof TVariants]: keyof TVariants[K] }>;
+    style: StyleDefinition | (() => StyleDefinition);
+  }>;
+}
+
+export type Recipe<TVariants extends Record<string, Record<string, any>>> = {
+  (selection?: Partial<{ [K in keyof TVariants]: keyof TVariants[K] }>): StyleDefinition;
+  variants: TVariants;
+  defaultVariants: Partial<{ [K in keyof TVariants]: keyof TVariants[K] }>;
+  base: StyleDefinition;
+  getAllVariants: () => Array<Partial<{ [K in keyof TVariants]: keyof TVariants[K] }>>;
+  compileAll: () => string;
+  getVariantClassNames: () => Record<string, string>;
+};
+
+export function recipe<TVariants extends Record<string, Record<string, any>>>(
+  options: RecipeOptions<TVariants>
+): Recipe<TVariants> {
+  const { base, variants = {} as TVariants, defaultVariants = {}, compoundVariants = [] } = options;
+
+  const baseStyle = typeof base === 'function' ? (base as () => StyleDefinition)() : base;
+  const variantStyles: Record<string, Record<string, StyleDefinition>> = {};
+
+  for (const [variantName, variantMap] of Object.entries(variants)) {
+    variantStyles[variantName] = {};
+    for (const [variantKey, variantStyle] of Object.entries(variantMap as Record<string, any>)) {
+      variantStyles[variantName][variantKey] = typeof variantStyle === 'function'
+        ? (variantStyle as () => StyleDefinition)()
+        : variantStyle;
+    }
+  }
+
+  const compoundStyles = compoundVariants.map(cv => ({
+    condition: cv.variants || cv,
+    style: typeof cv.style === 'function' ? (cv.style as () => StyleDefinition)() : cv.style
+  }));
+
+  function mergeStyles(...styles: (StyleDefinition | undefined)[]): StyleDefinition {
+    const merged: StyleDefinition = { selectors: [] } as StyleDefinition;
+    for (const style of styles) {
+      if (!style) continue;
+      for (const [key, value] of Object.entries(style)) {
+        if (key === 'selectors') {
+          const newSelectors = Array.isArray(value) ? value : [value];
+          merged.selectors = [...new Set([...(merged.selectors || []), ...newSelectors])];
+        } else if (key === 'hover' && typeof value === 'object') {
+          if (!merged.hover) merged.hover = {};
+          Object.assign(merged.hover, value);
+        } else if (key !== 'selectors') {
+          (merged as any)[key] = value;
+        }
+      }
+    }
+    return merged;
+  }
+
+  function pick(variantSelection: Partial<Record<keyof TVariants, any>> = {}): StyleDefinition {
+    const selected = { ...defaultVariants, ...variantSelection } as Record<string, any>;
+    const stylesToMerge: StyleDefinition[] = [];
+
+    if (baseStyle) stylesToMerge.push(baseStyle);
+    for (const [variantName, variantValue] of Object.entries(selected)) {
+      const variantStyle = variantStyles[variantName]?.[variantValue];
+      if (variantStyle) stylesToMerge.push(variantStyle);
+    }
+    for (const cv of compoundStyles) {
+      if (Object.entries(cv.condition).every(([key, value]) => selected[key] === value) && cv.style) {
+        stylesToMerge.push(cv.style);
+      }
+    }
+
+    const merged = mergeStyles(...stylesToMerge);
+    let styleBuilder: any = chain();
+
+    for (const [prop, value] of Object.entries(merged)) {
+      if (prop === 'selectors' || prop === 'hover') continue;
+      if (styleBuilder[prop]) styleBuilder = styleBuilder[prop](value);
+    }
+    if (merged.hover) {
+      styleBuilder = styleBuilder.hover();
+      for (const [hoverProp, hoverValue] of Object.entries(merged.hover)) {
+        if (styleBuilder[hoverProp]) styleBuilder = styleBuilder[hoverProp](hoverValue);
+      }
+      styleBuilder = styleBuilder.end();
+    }
+
+    return styleBuilder.$el(...(merged.selectors || []));
+  }
+
+  (pick as any).variants = variants;
+  (pick as any).defaultVariants = defaultVariants;
+  (pick as any).base = baseStyle;
+
+  (pick as any).getAllVariants = () => {
+    const result: Array<Partial<Record<keyof TVariants, any>>> = [];
+    const variantKeys = Object.keys(variants) as (keyof TVariants)[];
+    function generate(current: Partial<Record<keyof TVariants, any>>, index: number): void {
+      if (index === variantKeys.length) { result.push({ ...current }); return; }
+      for (const v of Object.keys(variants[variantKeys[index]] as Record<string, any>)) {
+        current[variantKeys[index]] = v as any;
+        generate(current, index + 1);
+      }
+    }
+    generate({}, 0);
+    return result;
+  };
+
+  (pick as any).getVariantClassNames = () => {
+    const classNames: Record<string, string> = {};
+    for (const variant of (pick as any).getAllVariants()) {
+      const key = Object.entries(variant).map(([k, v]) => `${k}-${v}`).join('_');
+      const def = pick(variant);
+      if (def.selectors?.[0]) classNames[key] = def.selectors[0].replace(/^\./, '');
+    }
+    return classNames;
+  };
+
+  (pick as any).compileAll = () => {
+    const all = (pick as any).getAllVariants();
+    const styles: StyleDefinition[] = [];
+    if (baseStyle?.selectors) styles.push(baseStyle);
+    for (const v of all) { const d = pick(v); if (d?.selectors) styles.push(d); }
+    return run(...styles);
+  };
+
+  return pick as Recipe<TVariants>;
+}

package/src/compiler/scanner.ts

@@ -0,0 +1,46 @@
+// src/compiler/scanner.ts
+/**
+ * Content Scanner - Extracts ChainCSS calls from source files
+ */
+import fs from 'fs';
+import chalk from 'chalk';
+
+export const scanContent = (text: string): string[] => {
+  const regex = /(?:chain|smartChain|\$t?)\(((?:[^()]|\([^()]*\))*)\)(?:\s*\.\s*[a-zA-Z0-9]+\s*\([^)]*\))*/g;
+  const matches = text.match(regex) || [];
+  return matches.map(m => m.replace(/\s+/g, ''));
+};
+
+export function scanFileForStyles(
+  filePath: string,
+  optimizer: any,
+  source: string | null = null
+): { foundCount: number; errors: Error[] } {
+  const errors: Error[] = [];
+  let foundCount = 0;
+
+  try {
+    const content = source !== null ? source : fs.readFileSync(filePath, 'utf8');
+    if (!content || content.trim().length === 0) return { foundCount: 0, errors };
+
+    const styleRegex = /(?:chain|smartChain|\$)\(((?:[^()]|\([^()]*\))*)\)/g;
+    let match;
+
+    while ((match = styleRegex.exec(content)) !== null) {
+      try {
+        const styleBody = match[1].trim();
+        const cleanBody = styleBody.replace(/^['"\`]|['"\`]$/g, '');
+        if (cleanBody && optimizer && typeof optimizer.trackStyles === 'function') {
+          optimizer.trackStyles([{ selectors: { '&': cleanBody } }]);
+          foundCount++;
+        }
+      } catch (parseError) {
+        errors.push(parseError as Error);
+      }
+    }
+  } catch (err) {
+    errors.push(err as Error);
+  }
+
+  return { foundCount, errors };
+}

package/src/compiler/timeline.ts

@@ -0,0 +1,128 @@
+// src/compiler/timeline.ts
+/**
+ * Style Timeline & Diff Viewer
+ * Tracks every style change, lets you diff versions
+ */
+
+export interface StyleSnapshot {
+  id: string;
+  timestamp: number;
+  selector: string;
+  styles: Record<string, any>;
+  source: string;
+  hash: string;
+}
+
+export interface StyleChange {
+  id: string;
+  timestamp: number;
+  selector: string;
+  property: string;
+  oldValue: any;
+  newValue: any;
+  type: 'add' | 'remove' | 'modify';
+}
+
+let styleHistory: StyleSnapshot[] = [];
+let styleChanges: StyleChange[] = [];
+let timelineEnabled = false;
+let currentSnapshotId = 0;
+
+export function enableTimeline(enable: boolean = true): void {
+  timelineEnabled = enable;
+  if (!enable) {
+    styleHistory = [];
+    styleChanges = [];
+  }
+}
+
+export function getStyleHistory(): StyleSnapshot[] {
+  return [...styleHistory];
+}
+
+export function getStyleChanges(): StyleChange[] {
+  return [...styleChanges];
+}
+
+export function getStyleDiff(snapshotId1: string, snapshotId2: string): Record<string, any> {
+  const snapshot1 = styleHistory.find(s => s.id === snapshotId1);
+  const snapshot2 = styleHistory.find(s => s.id === snapshotId2);
+  
+  if (!snapshot1 || !snapshot2) {
+    return { error: 'Snapshot not found' };
+  }
+  
+  const diff: Record<string, any> = { added: {}, removed: {}, modified: {} };
+  
+  for (const [key, value] of Object.entries(snapshot2.styles)) {
+    if (!(key in snapshot1.styles)) {
+      diff.added[key] = value;
+    } else if (JSON.stringify(snapshot1.styles[key]) !== JSON.stringify(value)) {
+      diff.modified[key] = { old: snapshot1.styles[key], new: value };
+    }
+  }
+  
+  for (const [key, value] of Object.entries(snapshot1.styles)) {
+    if (!(key in snapshot2.styles)) {
+      diff.removed[key] = value;
+    }
+  }
+  
+  return diff;
+}
+
+export function takeSnapshot(selector: string, styles: Record<string, any>, source: string): string {
+  if (!timelineEnabled) return '';
+  
+  const hash = JSON.stringify(styles);
+  const existing = styleHistory.find(s => s.selector === selector && s.hash === hash);
+  if (existing) return existing.id;
+  
+  const id = `snapshot_${currentSnapshotId++}`;
+  styleHistory.push({ id, timestamp: Date.now(), selector, styles: { ...styles }, source, hash });
+  
+  // Track changes from previous snapshot
+  const previous = styleHistory[styleHistory.length - 2];
+  if (previous && previous.selector === selector) {
+    for (const [key, value] of Object.entries(styles)) {
+      if (!(key in previous.styles)) {
+        styleChanges.push({
+          id: `change_${Date.now()}_${Math.random().toString(36).slice(2)}`,
+          timestamp: Date.now(), selector, property: key,
+          oldValue: undefined, newValue: value, type: 'add'
+        });
+      } else if (JSON.stringify(previous.styles[key]) !== JSON.stringify(value)) {
+        styleChanges.push({
+          id: `change_${Date.now()}_${Math.random().toString(36).slice(2)}`,
+          timestamp: Date.now(), selector, property: key,
+          oldValue: previous.styles[key], newValue: value, type: 'modify'
+        });
+      }
+    }
+    for (const [key] of Object.entries(previous.styles)) {
+      if (!(key in styles)) {
+        styleChanges.push({
+          id: `change_${Date.now()}_${Math.random().toString(36).slice(2)}`,
+          timestamp: Date.now(), selector, property: key,
+          oldValue: previous.styles[key], newValue: undefined, type: 'remove'
+        });
+      }
+    }
+  }
+  
+  return id;
+}
+
+export function exportTimeline(): string {
+  return JSON.stringify({ history: styleHistory, changes: styleChanges, exportedAt: Date.now() }, null, 2);
+}
+
+export function clearTimeline(): void {
+  styleHistory = [];
+  styleChanges = [];
+  currentSnapshotId = 0;
+}
+
+export function isTimelineEnabled(): boolean {
+  return timelineEnabled;
+}