chaincss 2.0.6 → 2.1.0

package/src/index.ts

@@ -0,0 +1,208 @@
+// chaincss/src/index.ts --- Main exports for ChainCSS
+
+/**
+ * ChainCSS - Zero-runtime CSS-in-JS with Atomic CSS optimization
+ * @packageDocumentation
+ */
+
+// ============================================================================
+// 🆕 NEW: Smart Chain API (Auto-detection mixed mode)
+// ============================================================================
+export { smartChain, smartChain as chainV3, buildChain, runtimeChain } from './core/smart-chain.js';
+export { autoDetector, AutoDetector, type ValueType, type Mode } from './core/auto-detector.js';
+
+// ============================================================================
+// 🆕 NEW: React Hooks with Auto-Detection
+// ============================================================================
+export { useSmartStyles, createSmartComponent, withSmartStyles } from './runtime/auto-hooks.js';
+
+// ============================================================================
+// Core Compiler (unchanged - keep for backward compatibility)
+// ============================================================================
+export { ChainCSSCompiler, compileChainCSS } from './core/compiler.js';
+
+// ============================================================================
+// Chain API - Main entry point for style definitions (unchanged)
+// ============================================================================
+export { 
+  chain, 
+  chain as $,           // Alias for convenience
+  recipe,               // Variant system
+  createTokens,         // Design token creation
+  configureAtomic,      // Atomic CSS configuration
+  tokens,               // Default token instance
+  enableDebug,          // Debug mode
+  setBreakpoints,       // Responsive breakpoints
+  enableTimeline,       // Style timeline tracking
+  getStyleHistory,      // Timeline history
+  getStyleChanges,      // Timeline changes
+  getStyleDiff,         // Timeline diff
+  exportTimeline,       // Export timeline
+  clearTimeline         // Clear timeline
+} from './compiler/btt.js';
+
+// ============================================================================
+// Atomic Optimizer (unchanged)
+// ============================================================================
+export { AtomicOptimizer } from './compiler/atomic-optimizer.js';
+
+// ============================================================================
+// CSS Prefixer (Autoprefixer alternative) (unchanged)
+// ============================================================================
+export { ChainCSSPrefixer } from './compiler/prefixer.js';
+
+// ============================================================================
+// Design Tokens System (unchanged)
+// ============================================================================
+export { DesignTokens, createTokens as createDesignTokens } from './compiler/tokens.js';
+
+// ============================================================================
+// Theme Contract System (unchanged)
+// ============================================================================
+export { 
+  createThemeContract, 
+  validateTheme, 
+  createTheme, 
+  Theme 
+} from './compiler/theme-contract.js';
+
+// ============================================================================
+// Cache Management (unchanged)
+// ============================================================================
+export { CacheManager } from './compiler/cache-manager.js';
+export { PersistentCache } from './compiler/content-addressable-cache.js';
+
+// ============================================================================
+// Shorthands & Macros (unchanged)
+// ============================================================================
+export { shorthandMap, macros, handleShorthand, isShorthand, expandShorthand, getAvailableShorthands } from './compiler/shorthands.js';
+
+// ============================================================================
+// Helpers & Utilities (unchanged)
+// ============================================================================
+export { helpers } from './compiler/helpers.js';
+export { animationPresets, createAnimation, getAnimationPreset, hasAnimationPreset, getAnimationPresetNames } from './compiler/animations.js';
+export { getSuggestion, getSuggestions, getPropertySuggestion, getShorthandSuggestion } from './compiler/suggestions.js';
+
+// ============================================================================
+// Types - Core Types (unchanged)
+// ============================================================================
+export type {
+  StyleDefinition,
+  AtRule,
+  NestedRule,
+  ThemeBlock,
+  Recipe,
+  RecipeOptions,
+  ChainObject
+} from './compiler/btt.js';
+
+// ============================================================================
+// Types - Atomic Optimizer (unchanged)
+// ============================================================================
+export type {
+  AtomicClass,
+  AtomicOptimizerOptions,
+  AtomicOptimizerStats,
+  ComponentClassMapEntry,
+  OptimizeResult
+} from './compiler/atomic-optimizer.js';
+
+// ============================================================================
+// Types - Prefixer (unchanged)
+// ============================================================================
+export type {
+  PrefixerConfig,
+  PrefixerResult
+} from './compiler/prefixer.js';
+
+// ============================================================================
+// Types - Theme Contract (unchanged)
+// ============================================================================
+export type {
+  ThemeContract,
+  ThemeTokens
+} from './compiler/theme-contract.js';
+
+export type { TokensStructure } from './compiler/tokens.js';
+
+// ============================================================================
+// Types - Configuration (unchanged)
+// ============================================================================
+export type {
+  ChainCSSConfig,
+  CompileResult,
+  ChainCSSPlugin
+} from './core/types.js';
+
+// ============================================================================
+// Types - Chain API (unchanged)
+// ============================================================================
+export type { Chain } from './compiler/Chain.js';
+
+// ============================================================================
+// Types - Animations (unchanged)
+// ============================================================================
+export type { AnimationConfig, KeyframeDefinition } from './compiler/animations.js';
+
+// ============================================================================
+// Types - Breakpoints (unchanged)
+// ============================================================================
+export type { BreakpointsMap, ResponsiveStyle } from './compiler/breakpoints.js';
+
+// ============================================================================
+// Runtime Exports (for runtime mode) - unchanged
+// ============================================================================
+export * from './runtime/index.js';
+
+// ============================================================================
+// Version - UPDATE to 3.0.0
+// ============================================================================
+export const VERSION = '3.0.0';
+
+// ============================================================================
+// Default Export - Keep original chain for backward compatibility
+// ============================================================================
+import { chain } from './compiler/Chain.js';
+export default chain;
+
+// ============================================================================
+// 🆕 NEW: Smart Chain as alternative default (optional)
+// ============================================================================
+import { smartChain } from './core/smart-chain.js';
+
+// ============================================================================
+// Initialize global defaults (non-blocking) - unchanged
+// ============================================================================
+import { chains } from './compiler/btt.js';
+
+if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'test') {
+  chains.initializeProperties().catch((err: Error) => {
+    if (process.env?.DEBUG) {
+      console.warn('[ChainCSS] Failed to load CSS properties:', err.message);
+    }
+  });
+}
+
+// ============================================================================
+// Re-export commonly used types for convenience (unchanged)
+// ============================================================================
+export type {
+  Properties as CSSProperties
+} from 'csstype';
+
+export type TokenValue<T = string> = T | `$${string}`;
+
+export type ResponsiveValue<T> = T | {
+  base?: T;
+  sm?: T;
+  md?: T;
+  lg?: T;
+  xl?: T;
+  '2xl'?: T;
+  [key: string]: T | undefined;
+};
+
+export type StyleWithTokens<T = any> = T | ((tokens: DesignTokens) => T);
+
+import { DesignTokens } from './compiler/tokens.js';

package/src/plugins/vite.d.ts

@@ -0,0 +1,316 @@
+// chaincss/src/plugins/vite.d.ts
+import { Plugin } from 'vite';
+
+/**
+ * ChainCSS Vite Plugin Options
+ */
+export interface ChainCSSPluginOptions {
+  /**
+   * Enable atomic CSS optimization
+   * @default true
+   */
+  atomic?: boolean;
+  
+  /**
+   * Enable vendor prefixing
+   * @default true
+   */
+  prefix?: boolean;
+  
+  /**
+   * Output directory for generated CSS
+   * @default 'public'
+   */
+  outputDir?: string;
+  
+  /**
+   * Generate TypeScript type definitions
+   * @default false
+   */
+  generateTypes?: boolean;
+  
+  /**
+   * Minify CSS output
+   * @default false in development, true in production
+   */
+  minify?: boolean;
+  
+  /**
+   * Enable verbose logging
+   * @default false
+   */
+  verbose?: boolean;
+  
+  /**
+   * Enable Hot Module Replacement
+   * @default true
+   */
+  hmr?: boolean;
+  
+  /**
+   * Inject global CSS automatically
+   * @default true
+   */
+  injectGlobal?: boolean;
+  
+  /**
+   * Output file for CSS (relative to outputDir)
+   * @default 'global.css'
+   */
+  cssOutput?: string;
+  
+  /**
+   * Output file for manifest (relative to outputDir)
+   * @default 'chaincss-manifest.json'
+   */
+  manifestOutput?: string;
+  
+  /**
+   * File patterns to include
+   * @default ['**\/*.chain.{js,ts}', '**\/*.tsx', '**\/*.jsx']
+   */
+  include?: string[];
+  
+  /**
+   * File patterns to exclude
+   * @default ['node_modules/**', '**\/*.test.{js,ts}']
+   */
+  exclude?: string[];
+  
+  /**
+   * Enable source maps
+   * @default false
+   */
+  sourceMap?: boolean;
+  
+  /**
+   * Custom CSS class name prefix
+   * @default 'chain'
+   */
+  classPrefix?: string;
+  
+  /**
+   * Enable style timeline tracking
+   * @default false
+   */
+  timeline?: boolean;
+  
+  /**
+   * Cache configuration
+   */
+  cache?: {
+    /**
+     * Enable caching
+     * @default true
+     */
+    enabled?: boolean;
+    
+    /**
+     * Cache directory
+     * @default './.chaincss-cache'
+     */
+    directory?: string;
+    
+    /**
+     * Max cache age in days
+     * @default 30
+     */
+    maxAge?: number;
+  };
+  
+  /**
+   * Atomic CSS optimization options
+   */
+  atomicOptions?: {
+    /**
+     * Minimum usage threshold for atomic extraction
+     * @default 2
+     */
+    threshold?: number;
+    
+    /**
+     * Class naming strategy
+     * @default 'hash'
+     */
+    naming?: 'hash' | 'readable';
+    
+    /**
+     * CSS properties that should always be atomic
+     */
+    alwaysAtomic?: string[];
+    
+    /**
+     * CSS properties that should never be atomic
+     */
+    neverAtomic?: string[];
+  };
+  
+  /**
+   * Design tokens configuration
+   */
+  tokens?: {
+    /**
+     * Enable design tokens
+     * @default true
+     */
+    enabled?: boolean;
+    
+    /**
+     * Token prefix
+     * @default 'chain'
+     */
+    prefix?: string;
+    
+    /**
+     * Custom token values
+     */
+    values?: Record<string, any>;
+  };
+  
+  /**
+   * Breakpoints configuration
+   */
+  breakpoints?: Record<string, string>;
+}
+
+/**
+ * ChainCSS Vite Plugin
+ * 
+ * Automatically handles .chain.ts files and injects styles into your entry point.
+ * Supports atomic CSS optimization, design tokens, and HMR.
+ * 
+ * @example
+ * ```ts
+ * // vite.config.ts
+ * import chaincss from 'chaincss/plugins/vite';
+ * 
+ * export default {
+ *   plugins: [
+ *     chaincss({
+ *       atomic: true,
+ *       verbose: true,
+ *       breakpoints: {
+ *         mobile: '(max-width: 768px)',
+ *         desktop: '(min-width: 1024px)'
+ *       }
+ *     })
+ *   ]
+ * };
+ * ```
+ * 
+ * @example
+ * ```ts
+ * // Minimal configuration
+ * import chaincss from 'chaincss/plugins/vite';
+ * 
+ * export default {
+ *   plugins: [chaincss()]
+ * };
+ * ```
+ */
+declare function chaincssPlugin(options?: ChainCSSPluginOptions): Plugin;
+
+// Default export
+export default chaincssPlugin;
+
+// Named export for direct import
+export { chaincssPlugin };
+
+// Re-export the Plugin type from Vite for convenience
+export type { Plugin } from 'vite';
+
+// Additional helper types for better IDE support
+export namespace ChainCSS {
+  /**
+   * Injected CSS runtime interface
+   */
+  interface Runtime {
+    /**
+     * Set the atomic class manifest
+     */
+    setManifest(manifest: Record<string, any>): void;
+    
+    /**
+     * Get an atomic class name by property-value pair
+     */
+    getAtomicClass(prop: string, value: string): string | null;
+    
+    /**
+     * Get all atomic classes
+     */
+    getAllAtomicClasses(): Array<{ className: string; prop: string; value: string }>;
+    
+    /**
+     * Update CSS dynamically
+     */
+    updateCSS(css: string): void;
+  }
+  
+  /**
+   * Style definition for chain() API
+   */
+  interface StyleDefinition {
+    selectors: string[];
+    [key: string]: any;
+  }
+  
+  /**
+   * Component style options
+   */
+  interface ComponentOptions {
+    /**
+     * Component name
+     */
+    name?: string;
+    
+    /**
+     * Framework to generate component for
+     */
+    framework?: 'react' | 'vue' | 'svelte' | 'solid' | 'auto';
+    
+    /**
+     * Props definition for the component
+     */
+    props?: Record<string, any>;
+  }
+}
+
+// Global augmentation for Vite's import.meta
+declare module 'vite' {
+  interface ImportMeta {
+    /**
+     * ChainCSS HMR API
+     */
+    hot?: {
+      /**
+       * Accept ChainCSS HMR updates
+       */
+      accept(): void;
+      
+      /**
+       * Listen to ChainCSS HMR events
+       */
+      on(event: 'chaincss:update', callback: (data: { css: string; map: Record<string, any> }) => void): void;
+      
+      /**
+       * Send ChainCSS HMR events
+       */
+      send(event: 'chaincss:update', data: any): void;
+    };
+  }
+}
+
+// Global augmentation for window object
+declare global {
+  interface Window {
+    /**
+     * ChainCSS runtime instance
+     */
+    __CHAINCSS__?: ChainCSS.Runtime;
+  }
+}
+
+// Export all types
+export type {
+  Plugin as VitePlugin
+};