chaincss 2.0.7 → 2.1.0

package/src/plugins/vite.ts

@@ -0,0 +1,424 @@
+// chaincss/src/plugins/vite.ts
+
+import { Plugin, HmrContext, ViteDevServer } from 'vite';
+import { ChainCSSCompiler } from '../core/compiler.js';
+import path from 'path';
+import fs from 'fs';
+
+export interface ChainCSSPluginOptions {
+  atomic?: boolean;
+  minify?: boolean;
+  verbose?: boolean;
+  hmr?: boolean;
+  injectGlobal?: boolean;
+  cssOutput?: string;
+  manifestOutput?: string;
+  include?: string[];
+  exclude?: string[];
+}
+
+export default function chaincssPlugin(options: ChainCSSPluginOptions = {}): Plugin {
+  const compiler = new ChainCSSCompiler({
+    atomic: { enabled: options.atomic !== false },
+    output: { minify: options.minify || false },
+    verbose: options.verbose || false
+  });
+  
+  const virtualCssId = 'virtual:chaincss.css';
+  const resolvedCssId = '\0' + virtualCssId;
+  
+  const virtualManifestId = 'virtual:chaincss-manifest';
+  const resolvedManifestId = '\0' + virtualManifestId;
+
+  // Store generated data
+  let generatedCSS = '';
+  let generatedManifest: Record<string, any> = {};
+  let processedFiles = new Set<string>();
+  let lastHmrUpdate = 0;
+  let hmrTimeout: NodeJS.Timeout | null = null;
+  let server: ViteDevServer | null = null;
+
+  // Helper for verbose logging
+  function log(message: string, level: 'info' | 'warn' | 'error' = 'info') {
+    if (!options.verbose && level === 'info') return;
+    const prefix = '[ChainCSS]';
+    switch (level) {
+      case 'warn':
+        console.warn(`${prefix} ⚠️ ${message}`);
+        break;
+      case 'error':
+        console.error(`${prefix} ❌ ${message}`);
+        break;
+      default:
+        console.log(`${prefix} ${message}`);
+    }
+  }
+
+  // Helper to check if file should be processed
+  function shouldProcess(id: string): boolean {
+    if (id.startsWith('\0') || id.includes('virtual:')) return false;
+    if (id.includes('node_modules')) return false;
+    
+    // Check exclude patterns
+    if (options.exclude) {
+      for (const pattern of options.exclude) {
+        if (id.includes(pattern)) return false;
+      }
+    }
+    
+    // Check include patterns
+    if (options.include) {
+      for (const pattern of options.include) {
+        if (id.includes(pattern)) return true;
+      }
+      return false;
+    }
+    
+    // Default: process source files
+    const isUserFile = id.includes('/src/') || id.includes('/components/');
+    const isComponent = /\.(t|j)sx?$/.test(id);
+    
+    return isUserFile && isComponent;
+  }
+
+  // Get CSS from compiler safely
+  function updateCSS(): string {
+    try {
+      const freshCSS = compiler.getCombinedCSS();
+      if (freshCSS && freshCSS !== generatedCSS) {
+        generatedCSS = freshCSS;
+        if (options.verbose) {
+          log(`CSS updated: ${generatedCSS.length} bytes`);
+        }
+      }
+      return generatedCSS;
+    } catch (error) {
+      log(`Failed to get CSS: ${(error as Error).message}`, 'error');
+      return generatedCSS;
+    }
+  }
+
+  // Get manifest from compiler
+  function updateManifest(): Record<string, any> {
+    try {
+      const freshManifest = compiler.getAtomicMap();
+      if (JSON.stringify(freshManifest) !== JSON.stringify(generatedManifest)) {
+        generatedManifest = freshManifest;
+        if (options.verbose) {
+          log(`Manifest updated: ${Object.keys(generatedManifest).length} entries`);
+        }
+      }
+      return generatedManifest;
+    } catch (error) {
+      log(`Failed to get manifest: ${(error as Error).message}`, 'error');
+      return generatedManifest;
+    }
+  }
+
+  // Send HMR update
+  function sendHMRUpdate() {
+    if (!server || !options.hmr !== false) return;
+    
+    // Debounce HMR updates
+    if (hmrTimeout) clearTimeout(hmrTimeout);
+    hmrTimeout = setTimeout(() => {
+      const now = Date.now();
+      if (now - lastHmrUpdate < 100) return;
+      lastHmrUpdate = now;
+      
+      const css = updateCSS();
+      const manifest = updateManifest();
+      
+      server!.ws.send({
+        type: 'custom',
+        event: 'chaincss:update',
+        data: { 
+          css, 
+          map: manifest,
+          timestamp: now
+        }
+      });
+      
+      if (options.verbose) {
+        log(`HMR update sent: ${css.length} bytes`);
+      }
+      
+      hmrTimeout = null;
+    }, 50);
+  }
+
+  // Generate bootstrap code with proper CSS injection
+  function generateBootstrapCode(css: string): string {
+    const shouldInjectGlobal = options.injectGlobal !== false;
+    
+    if (!shouldInjectGlobal) {
+      return `
+        // ChainCSS Runtime Bootstrap (No CSS Injection)
+        import manifest from "virtual:chaincss-manifest";
+        import { setManifest } from "chaincss/runtime";
+        
+        try {
+          setManifest(manifest);
+          console.log("[ChainCSS] ✅ Runtime initialized");
+        } catch (err) {
+          console.error("[ChainCSS] Failed to initialize:", err);
+        }
+      `;
+    }
+    
+    // Escape CSS for injection
+    const escapedCSS = css
+      .replace(/\\/g, '\\\\')
+      .replace(/`/g, '\\`')
+      .replace(/\$/g, '\\$');
+    
+    return `
+      // ChainCSS Runtime Bootstrap
+      import manifest from "virtual:chaincss-manifest";
+      import { setManifest } from "chaincss/runtime";
+      
+      // Initialize ChainCSS
+      try {
+        setManifest(manifest);
+        console.log("[ChainCSS] ✅ Runtime initialized");
+      } catch (err) {
+        console.error("[ChainCSS] Failed to initialize:", err);
+      }
+      
+      // Inject CSS
+      (function() {
+        const css = \`${escapedCSS}\`;
+        const styleId = 'chaincss-injected-styles';
+        
+        if (css && css.trim()) {
+          let styleTag = document.getElementById(styleId);
+          if (!styleTag) {
+            styleTag = document.createElement('style');
+            styleTag.id = styleId;
+            styleTag.setAttribute('data-chaincss', 'true');
+            document.head.appendChild(styleTag);
+          }
+          styleTag.textContent = css;
+          console.log("[ChainCSS] ✅ Injected", css.length, "bytes of CSS");
+        } else if (document.getElementById(styleId)) {
+          // Remove empty style tag
+          const existing = document.getElementById(styleId);
+          if (existing) existing.remove();
+        }
+      })();
+      
+      // HMR Support
+      if (import.meta.hot) {
+        import.meta.hot.on('chaincss:update', (data) => {
+          if (data.map) setManifest({ atomicMap: data.map });
+          if (data.css) {
+            const styleTag = document.getElementById('chaincss-injected-styles');
+            if (styleTag) {
+              styleTag.textContent = data.css;
+              console.log("[ChainCSS] 🔄 HMR update:", data.css.length, "bytes");
+            }
+          }
+        });
+        
+        // Accept self for HMR
+        import.meta.hot.accept();
+      }
+    `;
+  }
+
+  return {
+    name: 'chaincss',
+    enforce: 'pre' as const,
+
+    configureServer(_server: ViteDevServer) {
+      server = _server;
+      log('Vite plugin initialized');
+      
+      // Watch for config changes
+      _server.watcher.on('change', (filePath) => {
+        if (filePath.includes('chaincss.config')) {
+          log('Config changed, clearing cache...');
+          compiler.clearCSS();
+          processedFiles.clear();
+          updateCSS();
+          updateManifest();
+          sendHMRUpdate();
+        }
+      });
+    },
+
+    resolveId(id: string) {
+      if (id === virtualCssId) return resolvedCssId;
+      if (id === virtualManifestId) return resolvedManifestId;
+      return null;
+    },
+
+    load(id: string) {
+      if (id === resolvedManifestId) {
+        const manifest = updateManifest();
+        const manifestData = {
+          atomicMap: manifest,
+          version: '2.0.0',
+          timestamp: Date.now()
+        };
+        return `export default ${JSON.stringify(manifestData)};`;
+      }
+      
+      if (id === resolvedCssId) {
+        const css = updateCSS();
+        return css || '/* ChainCSS: No styles */';
+      }
+      
+      return null;
+    },
+
+    async transform(source: string, id: string) {
+      if (!shouldProcess(id)) return null;
+      
+      const fileName = path.basename(id);
+      
+      try {
+        // Skip if already processed (with cache)
+        if (processedFiles.has(id) && !source.includes('chain(')) {
+          return null;
+        }
+        
+        log(`Processing: ${fileName}`);
+        processedFiles.add(id);
+        
+        // Compile the source
+        await compiler.compileSource(source, id);
+        
+        // Update stored data
+        updateCSS();
+        updateManifest();
+        
+        // Send HMR update if needed
+        if (server && options.hmr !== false) {
+          sendHMRUpdate();
+        }
+        
+        // Check if this is an entry file
+        const isEntryFile = /(main|index|App|entry)\.(t|j)sx?$/.test(id);
+        
+        if (isEntryFile && !source.includes('virtual:chaincss.css')) {
+          const bootstrapCode = generateBootstrapCode(generatedCSS);
+          log(`Bootstrapping entry file: ${fileName} (${generatedCSS.length} bytes)`);
+          
+          return {
+            code: `${bootstrapCode}\n${source}`,
+            map: null
+          };
+        }
+        
+        return null;
+      } catch (error) {
+        log(`Failed to process ${fileName}: ${(error as Error).message}`, 'error');
+        return null;
+      }
+    },
+    
+    handleHotUpdate({ file, server: hotServer, modules }: HmrContext) {
+      if (!shouldProcess(file)) return modules;
+      
+      log(`HMR update: ${path.basename(file)}`);
+      
+      // Clear processed flag to force reprocessing
+      processedFiles.delete(file);
+      
+      // Clear compiler cache for this file
+      compiler.clearCSS();
+      
+      // Update data
+      const css = updateCSS();
+      const manifest = updateManifest();
+      
+      // Send HMR update
+      if (options.hmr !== false) {
+        hotServer.ws.send({
+          type: 'custom',
+          event: 'chaincss:update',
+          data: { 
+            css, 
+            map: manifest,
+            file: path.basename(file),
+            timestamp: Date.now()
+          }
+        });
+      }
+      
+      // Return modules to invalidate
+      const cssModule = [...modules].find(m => m.id === resolvedCssId);
+      if (cssModule) {
+        return [...modules, cssModule];
+      }
+      
+      return modules;
+    },
+    
+    buildStart() {
+      log('Build started');
+      processedFiles.clear();
+      generatedCSS = '';
+      generatedManifest = {};
+      compiler.clearCSS();
+    },
+    
+    buildEnd() {
+      const finalCSS = updateCSS();
+      log(`Build complete - Final CSS: ${finalCSS.length} bytes`);
+      
+      // Write CSS to file if output specified
+      if (options.cssOutput) {
+        try {
+          const outputPath = path.resolve(process.cwd(), options.cssOutput);
+          const outputDir = path.dirname(outputPath);
+          if (!fs.existsSync(outputDir)) {
+            fs.mkdirSync(outputDir, { recursive: true });
+          }
+          fs.writeFileSync(outputPath, finalCSS, 'utf8');
+          log(`CSS written to: ${outputPath}`);
+        } catch (error) {
+          log(`Failed to write CSS: ${(error as Error).message}`, 'error');
+        }
+      }
+      
+      // Write manifest if output specified
+      if (options.manifestOutput) {
+        try {
+          const manifestPath = path.resolve(process.cwd(), options.manifestOutput);
+          const manifestDir = path.dirname(manifestPath);
+          if (!fs.existsSync(manifestDir)) {
+            fs.mkdirSync(manifestDir, { recursive: true });
+          }
+          fs.writeFileSync(manifestPath, JSON.stringify(generatedManifest, null, 2), 'utf8');
+          log(`Manifest written to: ${manifestPath}`);
+        } catch (error) {
+          log(`Failed to write manifest: ${(error as Error).message}`, 'error');
+        }
+      }
+    },
+    
+    generateBundle(_options, bundle) {
+      // Ensure CSS is included in the bundle
+      for (const [fileName, chunk] of Object.entries(bundle)) {
+        if (fileName.endsWith('.css') && generatedCSS) {
+          // @ts-ignore
+          if (!chunk.source || (chunk.source && chunk.source.length === 0)) {
+            // @ts-ignore
+            chunk.source = generatedCSS;
+            log(`Wrote ${generatedCSS.length} bytes to ${fileName}`);
+          }
+        }
+      }
+    },
+    
+    // Clean up on close
+    closeBundle() {
+      if (hmrTimeout) {
+        clearTimeout(hmrTimeout);
+      }
+      log('Plugin closed');
+    }
+  };
+}

package/src/plugins/webpack.d.ts

@@ -0,0 +1,289 @@
+// chaincss/src/plugins/webpack.d.ts
+
+import { LoaderDefinition } from 'webpack';
+
+/**
+ * ChainCSS Webpack Loader Options
+ */
+export interface ChainCSSLoaderOptions {
+  /**
+   * Mode: 'build' for production (zero-runtime), 'runtime' for development
+   * @default process.env.NODE_ENV === 'production' ? 'build' : 'runtime'
+   */
+  mode?: 'build' | 'runtime';
+  
+  /**
+   * Enable atomic CSS optimization
+   * @default false
+   */
+  atomic?: boolean;
+  
+  /**
+   * Enable CSS minification
+   * @default process.env.NODE_ENV === 'production'
+   */
+  minify?: boolean;
+  
+  /**
+   * Enable source maps
+   * @default false
+   */
+  sourceMap?: boolean;
+  
+  /**
+   * Output directory for compiled CSS
+   * @default '.chaincss-cache'
+   */
+  outputDir?: string;
+  
+  /**
+   * Verbose logging
+   * @default false
+   */
+  verbose?: boolean;
+  
+  /**
+   * Enable CSS extraction to separate file
+   * @default false
+   */
+  extractCSS?: boolean;
+  
+  /**
+   * Enable Hot Module Replacement
+   * @default true in development
+   */
+  hmr?: boolean;
+  
+  /**
+   * Custom cache key for compilation
+   */
+  cacheKey?: string;
+  
+  /**
+   * Framework to generate components for
+   * @default 'auto'
+   */
+  framework?: 'react' | 'vue' | 'svelte' | 'solid' | 'auto';
+  
+  /**
+   * Generate TypeScript type definitions
+   * @default false
+   */
+  generateTypes?: boolean;
+  
+  /**
+   * Enable design tokens
+   * @default true
+   */
+  tokens?: boolean;
+  
+  /**
+   * Custom breakpoint definitions
+   */
+  breakpoints?: Record<string, string>;
+  
+  /**
+   * CSS class name prefix
+   * @default 'chain'
+   */
+  classPrefix?: string;
+  
+  /**
+   * Enable style timeline tracking
+   * @default false
+   */
+  timeline?: boolean;
+}
+
+/**
+ * ChainCSS Webpack Loader
+ * 
+ * A webpack loader that processes ChainCSS files (.chain.js/.chain.ts)
+ * and converts them to static CSS at build time.
+ * 
+ * @example
+ * ```js
+ * // webpack.config.js
+ * module.exports = {
+ *   module: {
+ *     rules: [
+ *       {
+ *         test: /\.chain\.(js|ts)$/,
+ *         use: [
+ *           'babel-loader',
+ *           {
+ *             loader: 'chaincss/plugin/webpack',
+ *             options: {
+ *               mode: process.env.NODE_ENV === 'production' ? 'build' : 'runtime',
+ *               atomic: true,
+ *               minify: process.env.NODE_ENV === 'production',
+ *               verbose: process.env.NODE_ENV === 'development'
+ *             }
+ *           }
+ *         ]
+ *       }
+ *     ]
+ *   }
+ * };
+ * ```
+ * 
+ * @example
+ * ```js
+ * // With custom output directory
+ * {
+ *   loader: 'chaincss/plugin/webpack',
+ *   options: {
+ *     outputDir: 'dist/styles',
+ *     extractCSS: true,
+ *     framework: 'react'
+ *   }
+ * }
+ * ```
+ */
+declare const loader: LoaderDefinition<ChainCSSLoaderOptions>;
+
+// Default export
+export default loader;
+
+// Named export for direct import
+export { loader as chaincssLoader };
+
+// Re-export LoaderDefinition for convenience
+export type { LoaderDefinition } from 'webpack';
+
+/**
+ * ChainCSS Runtime API for webpack
+ */
+export namespace ChainCSSWebpack {
+  /**
+   * Generated styles interface
+   */
+  interface Styles {
+    [key: string]: string;
+  }
+  
+  /**
+   * CSS extraction plugin options
+   */
+  interface ExtractCSSPluginOptions {
+    /**
+     * Output filename for extracted CSS
+     * @default '[name].css'
+     */
+    filename?: string;
+    
+    /**
+     * Enable chunk CSS extraction
+     * @default true
+     */
+    chunkFilename?: string;
+    
+    /**
+     * Enable source maps
+     * @default false
+     */
+    sourceMap?: boolean;
+    
+    /**
+     * Ignore order warnings
+     * @default false
+     */
+    ignoreOrder?: boolean;
+  }
+  
+  /**
+   * ChainCSS Webpack Plugin (for full builds)
+   */
+  interface ChainCSSWebpackPlugin {
+    /**
+     * Apply the plugin to webpack compiler
+     */
+    apply(compiler: any): void;
+  }
+  
+  /**
+   * Create a ChainCSS webpack plugin
+   */
+  function createPlugin(options?: {
+    /**
+     * Enable atomic CSS
+     * @default true
+     */
+    atomic?: boolean;
+    
+    /**
+     * Output directory for CSS files
+     * @default 'dist/css'
+     */
+    outputDir?: string;
+    
+    /**
+     * Enable CSS minification
+     * @default process.env.NODE_ENV === 'production'
+     */
+    minify?: boolean;
+    
+    /**
+     * Generate TypeScript types
+     * @default false
+     */
+    generateTypes?: boolean;
+  }): ChainCSSWebpackPlugin;
+}
+
+// Augment webpack module types
+declare module 'webpack' {
+  interface Configuration {
+    /**
+     * ChainCSS specific configuration
+     */
+    chaincss?: {
+      /**
+       * Enable ChainCSS processing
+       */
+      enabled?: boolean;
+      
+      /**
+       * ChainCSS loader options
+       */
+      loaderOptions?: ChainCSSLoaderOptions;
+      
+      /**
+       * Files to include
+       */
+      include?: RegExp | RegExp[];
+      
+      /**
+       * Files to exclude
+       */
+      exclude?: RegExp | RegExp[];
+    };
+  }
+  
+  interface LoaderContext {
+    /**
+     * ChainCSS specific properties
+     */
+    chaincss?: {
+      /**
+       * Whether the file has been processed
+       */
+      processed: boolean;
+      
+      /**
+       * Compiled CSS content
+       */
+      css?: string;
+      
+      /**
+       * Compiled class map
+       */
+      classMap?: Record<string, string>;
+    };
+  }
+}
+
+// Export all types
+export type {
+  LoaderDefinition as WebpackLoaderDefinition
+};