chaincss 2.0.7 → 2.1.0

package/dist/plugins/webpack.d.ts

@@ -29,12 +29,36 @@ export interface ChainCSSLoaderOptions {
      * @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';
 }
 interface LoaderContext {
     async: () => (err: Error | null, code?: string) => void;
     getOptions: () => ChainCSSLoaderOptions;
     resourcePath: string;
     context: string;
+    cacheable: (flag: boolean) => void;
+    addDependency: (file: string) => void;
+    emitFile: (name: string, content: string, sourceMap?: any) => void;
+    emitWarning: (warning: Error) => void;
+    emitError: (error: Error) => void;
 }
 /**
  * Webpack loader for ChainCSS
@@ -42,4 +66,3 @@ interface LoaderContext {
  */
 export default function chaincssLoader(this: LoaderContext, source: string): void;
 export {};
-//# sourceMappingURL=webpack.d.ts.map

package/dist/plugins/webpack.js

@@ -1,106 +1,243 @@
 // src/plugins/webpack.ts
 import path from "path";
-import { execSync } from "child_process";
+import { spawn } from "child_process";
 import fs from "fs";
 import { fileURLToPath } from "url";
+import crypto from "crypto";
 var __filename = fileURLToPath(import.meta.url);
 var __dirname = path.dirname(__filename);
-function chaincssLoader(source) {
-  const callback = this.async();
-  const options = this.getOptions() || {};
-  const mode = options.mode || (process.env.NODE_ENV === "production" ? "build" : "runtime");
-  if (mode === "runtime") {
-    if (options.verbose) {
-      console.log(`[chaincss-loader] Runtime mode for ${this.resourcePath}`);
+function generateHash(content) {
+  return crypto.createHash("md5").update(content).digest("hex").slice(0, 8);
+}
+function extractStyleExports(source) {
+  const exports = [];
+  const constRegex = /const\s+(\w+)\s*=\s*(?:chain|\$)\(\s*\)\s*(?:\.\w+\([^)]*\)\s*)*\.\$el\(['"`]([^'"`]+)['"`]\)/g;
+  let match;
+  while ((match = constRegex.exec(source)) !== null) {
+    exports.push({
+      name: match[1],
+      className: match[2]
+    });
+  }
+  const exportRegex = /export\s+const\s+(\w+)\s*=\s*(?:chain|\$)\(\s*\)\s*(?:\.\w+\([^)]*\)\s*)*\.\$el\(['"`]([^'"`]+)['"`]\)/g;
+  while ((match = exportRegex.exec(source)) !== null) {
+    exports.push({
+      name: match[1],
+      className: match[2]
+    });
+  }
+  return exports;
+}
+function generateRuntimeCode(source, styleExports, resourcePath, options) {
+  const styleNames = styleExports.map((e) => e.name).join(", ");
+  const hmrEnabled = options.hmr !== false && process.env.NODE_ENV !== "production";
+  const classMapping = styleExports.map((exp) => `  ${exp.name}: '${exp.className}'`).join(",\n");
+  return `
+    // Generated by ChainCSS Webpack Loader (Runtime Mode)
+    // Source: ${path.basename(resourcePath)}
+    
+    import { chain, enableDebug } from 'chaincss/runtime';
+    
+    ${hmrEnabled ? `// Enable debug in development
+    if (process.env.NODE_ENV !== 'production') {
+      enableDebug(${options.verbose || false});
+    }` : ""}
+    
+    // Original source for reference
+    ${source}
+    
+    // Compiled style exports
+    export const styles = {
+    ${classMapping}
+    };
+    
+    export default styles;
+    
+    ${hmrEnabled ? `
+    // HMR Support
+    if (module.hot) {
+      module.hot.accept();
+      module.hot.dispose(() => {
+        // Cleanup on reload
+        const styleId = 'chaincss-${generateHash(resourcePath)}';
+        const style = document.getElementById(styleId);
+        if (style) style.remove();
+      });
     }
-    const styleNames = extractStyleNames(source);
-    const code = `
-      import { $, compile } from 'chaincss/runtime';
-      const styles = (() => {
-        ${source}
-        return { ${styleNames} };
-      })();
+    ` : ""}
+  `;
+}
+function generateProductionCode(css, styleExports, resourcePath, options) {
+  const styleNames = styleExports.map((e) => e.name).join(", ");
+  const classMapping = styleExports.map((exp) => `  ${exp.name}: '${exp.className}'`).join(",\n");
+  const escapedCSS = css.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$/g, "\\$");
+  if (options.extractCSS) {
+    return `
+      // Generated by ChainCSS Webpack Loader (Build Mode - Extracted)
+      // Source: ${path.basename(resourcePath)}
+      
+      export const styles = {
+      ${classMapping}
+      };
+      
+      export default styles;
+    `;
+  } else {
+    return `
+      // Generated by ChainCSS Webpack Loader (Build Mode - Injected)
+      // Source: ${path.basename(resourcePath)}
+      
+      export const styles = {
+      ${classMapping}
+      };
+      
+      // Inject CSS
+      const css = \`${escapedCSS}\`;
+      if (typeof document !== 'undefined' && css && css.trim()) {
+        const styleId = 'chaincss-${generateHash(resourcePath)}';
+        let style = document.getElementById(styleId);
+        if (!style) {
+          style = document.createElement('style');
+          style.id = styleId;
+          style.setAttribute('data-chaincss', 'true');
+          style.setAttribute('data-source', ${JSON.stringify(path.basename(resourcePath))});
+          document.head.appendChild(style);
+        }
+        style.textContent = css;
+      }
+      
       export default styles;
     `;
-    callback(null, code);
-    return;
   }
+}
+async function compileChainCSS(source, filePath, options, context) {
+  const tempFile = path.join(context.context, `.temp.${generateHash(source)}.chain.js`);
+  const outputDir = options.outputDir || path.join(process.cwd(), ".chaincss-cache");
+  const baseName = path.basename(filePath, path.extname(filePath));
   try {
-    if (options.verbose) {
-      console.log(`[chaincss-loader] Build mode for ${this.resourcePath}`);
-    }
-    const tempFile = path.join(this.context, `.temp.${Date.now()}.chain.js`);
-    const outputDir = options.outputDir || path.join(process.cwd(), ".chaincss-cache");
-    if (!fs.existsSync(path.dirname(tempFile))) {
-      fs.mkdirSync(path.dirname(tempFile), { recursive: true });
+    const tempDir = path.dirname(tempFile);
+    if (!fs.existsSync(tempDir)) {
+      fs.mkdirSync(tempDir, { recursive: true });
     }
     fs.writeFileSync(tempFile, source, "utf8");
+    context.addDependency(tempFile);
     if (!fs.existsSync(outputDir)) {
       fs.mkdirSync(outputDir, { recursive: true });
     }
     const chaincssCli = path.join(__dirname, "../cli/index.js");
-    let cmd = `node ${chaincssCli} compile "${tempFile}" "${outputDir}"`;
-    if (options.atomic) {
-      cmd += " --atomic";
+    if (!fs.existsSync(chaincssCli)) {
+      throw new Error(`ChainCSS CLI not found at ${chaincssCli}. Please ensure chaincss is built.`);
     }
-    if (options.minify) {
-      cmd += " --minify";
+    const args = [
+      chaincssCli,
+      "compile",
+      tempFile,
+      outputDir,
+      "--framework",
+      options.framework || "auto"
+    ];
+    if (options.atomic) args.push("--atomic");
+    if (options.minify) args.push("--minify");
+    if (options.sourceMap) args.push("--source-map");
+    if (options.verbose) args.push("--verbose");
+    if (options.verbose) {
+      console.log(`[chaincss-loader] Executing: node ${args.join(" ")}`);
     }
-    if (options.sourceMap) {
-      cmd += " --source-map";
+    const result = await new Promise((resolve, reject) => {
+      const proc = spawn("node", args, {
+        cwd: process.cwd(),
+        timeout: 3e4
+      });
+      let stdout = "";
+      let stderr = "";
+      proc.stdout.on("data", (data) => {
+        stdout += data.toString();
+      });
+      proc.stderr.on("data", (data) => {
+        stderr += data.toString();
+      });
+      proc.on("close", (code) => {
+        if (code === 0) {
+          resolve({ stdout, stderr });
+        } else {
+          reject(new Error(`Compilation failed with code ${code}: ${stderr}`));
+        }
+      });
+      proc.on("error", reject);
+    });
+    if (options.verbose && result.stdout) {
+      console.log(result.stdout);
     }
-    if (options.verbose) {
-      console.log(`[chaincss-loader] Executing: ${cmd}`);
+    if (result.stderr) {
+      context.emitWarning(new Error(result.stderr));
     }
-    execSync(cmd, { stdio: options.verbose ? "inherit" : "pipe" });
-    const baseName = path.basename(this.resourcePath, path.extname(this.resourcePath));
     const cssPath = path.join(outputDir, `${baseName}.css`);
-    const jsPath = path.join(outputDir, `${baseName}.js`);
     let css = "";
     if (fs.existsSync(cssPath)) {
       css = fs.readFileSync(cssPath, "utf8");
+      if (options.verbose) {
+        console.log(`[chaincss-loader] Read CSS: ${css.length} bytes from ${cssPath}`);
+      }
     }
-    let classExports = "";
-    if (fs.existsSync(jsPath)) {
-      classExports = fs.readFileSync(jsPath, "utf8");
+    const classMapPath = path.join(outputDir, `${baseName}.class.js`);
+    let classMap = {};
+    if (fs.existsSync(classMapPath)) {
+      const classMapContent = fs.readFileSync(classMapPath, "utf8");
+      const exportMatch = classMapContent.match(/export const (\w+) = '([^']+)'/g);
+      if (exportMatch) {
+        exportMatch.forEach((line) => {
+          const match = line.match(/export const (\w+) = '([^']+)'/);
+          if (match) {
+            classMap[match[1]] = match[2];
+          }
+        });
+      }
     }
-    fs.unlinkSync(tempFile);
-    const code = `
-      // Generated by ChainCSS Webpack Loader (Build Mode)
-      // Zero-runtime CSS injection
-      
-      ${classExports}
-      
-      const css = ${JSON.stringify(css)};
-      if (typeof document !== 'undefined') {
-        const styleId = 'chaincss-${baseName}';
-        let style = document.getElementById(styleId);
-        if (!style) {
-          style = document.createElement('style');
-          style.id = styleId;
-          style.setAttribute('data-chaincss', ${JSON.stringify(this.resourcePath)});
-          document.head.appendChild(style);
-        }
-        style.textContent = css;
+    return { css, classMap };
+  } finally {
+    try {
+      if (fs.existsSync(tempFile)) {
+        fs.unlinkSync(tempFile);
       }
-      
-      export default { ${extractStyleNames(source)} };
-    `;
+    } catch (e) {
+    }
+  }
+}
+function chaincssLoader(source) {
+  const callback = this.async();
+  const options = this.getOptions() || {};
+  this.cacheable(true);
+  const mode = options.mode || (process.env.NODE_ENV === "production" ? "build" : "runtime");
+  const styleExports = extractStyleExports(source);
+  if (options.verbose) {
+    console.log(`[chaincss-loader] Processing ${path.basename(this.resourcePath)} in ${mode} mode`);
+    console.log(`[chaincss-loader] Found exports: ${styleExports.map((e) => e.name).join(", ")}`);
+  }
+  if (mode === "runtime") {
+    const code = generateRuntimeCode(source, styleExports, this.resourcePath, options);
+    callback(null, code);
+    return;
+  }
+  compileChainCSS(source, this.resourcePath, options, this).then(({ css, classMap }) => {
+    if (options.extractCSS && css) {
+      const cssFileName = `${path.basename(this.resourcePath, path.extname(this.resourcePath))}.css`;
+      this.emitFile(cssFileName, css);
+      if (options.verbose) {
+        console.log(`[chaincss-loader] Emitted CSS: ${cssFileName} (${css.length} bytes)`);
+      }
+    }
+    const code = generateProductionCode(css, styleExports, this.resourcePath, options);
+    if (options.verbose) {
+      console.log(`[chaincss-loader] \u2713 Compiled ${path.basename(this.resourcePath)}`);
+      console.log(`[chaincss-loader]   CSS size: ${css.length} bytes`);
+      console.log(`[chaincss-loader]   Exports: ${styleExports.length}`);
+    }
     callback(null, code);
-  } catch (err) {
+  }).catch((err) => {
     console.error(`[chaincss-loader] Error compiling ${this.resourcePath}:`, err.message);
+    this.emitError(err);
     callback(err);
-  }
-}
-function extractStyleNames(source) {
-  const matches = source.match(/const\s+(\w+)\s*=\s*\$\(/g);
-  if (!matches)
-    return "";
-  const names = matches.map((m) => {
-    const match = m.match(/const\s+(\w+)/);
-    return match ? match[1] : "";
-  }).filter(Boolean);
-  return names.join(", ");
+  });
 }
 export {
   chaincssLoader as default

package/dist/runtime/Chain.d.ts

@@ -0,0 +1,32 @@
+export declare function enableDebug(enabled?: boolean): void;
+export declare const setManifest: (manifest: any) => void;
+export declare const setTokens: (tokens: any) => void;
+export declare class RuntimeChain {
+    private useTokens;
+    private catcher;
+    private componentName;
+    proxy: any;
+    constructor(useTokens?: boolean);
+    use(plugin: any): any;
+    hover(): any;
+    /**
+     * Set the component name for class generation
+     */
+    $name(name: string): this;
+    /**
+     * Finalizes the chain. Returns the style object and resets the catcher.
+     */
+    $el(name?: string): Record<string, any>;
+    end(name?: string): Record<string, any>;
+    /**
+     * Get the current catcher (for debugging)
+     */
+    getCatcher(): Record<string, any>;
+}
+/**
+ * --- EXPORTS ---
+ */
+export declare const $: () => any;
+export declare const $t: () => any;
+export declare const chain: (useTokens?: boolean) => any;
+export default chain;

package/dist/runtime/auto-hooks.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface UseSmartStylesOptions {
+    debug?: boolean;
+    ssr?: boolean;
+    moduleId?: string;
+}
+export declare function useSmartStyles<T extends Record<string, any>>(styleBuilder: (chain: any) => any, deps?: any[], options?: UseSmartStylesOptions): Record<string, string>;
+export declare function createSmartComponent<P extends Record<string, any>>(Component: React.ComponentType<P>, baseStyles?: (chain: any) => any): React.FC<P & {
+    className?: string;
+}>;
+export declare function withSmartStyles<P extends Record<string, any>>(WrappedComponent: React.ComponentType<P>, styles: (chain: any) => any): React.FC<P>;

package/dist/runtime/hmr.d.ts

@@ -1,3 +1,23 @@
 export declare function setupHMR(): void;
-export declare function registerForHMR(moduleId: string, styles: Record<string, any>): void;
-//# sourceMappingURL=hmr.d.ts.map
+/**
+ * Register a module for HMR updates
+ * @param moduleId - Unique identifier for the module
+ * @param styles - Current styles object (optional)
+ * @param callback - Callback when module updates (optional)
+ */
+export declare function registerForHMR(moduleId: string, styles?: Record<string, any>, callback?: (newStyles: Record<string, any>) => void): void;
+/**
+ * Get HMR status
+ */
+export declare function isHMRSupported(): boolean;
+/**
+ * Get current HMR environment
+ */
+export declare function getHMRType(): string;
+declare const _default: {
+    setupHMR: typeof setupHMR;
+    registerForHMR: typeof registerForHMR;
+    isHMRSupported: typeof isHMRSupported;
+    getHMRType: typeof getHMRType;
+};
+export default _default;

package/dist/runtime/index.d.ts

@@ -4,12 +4,13 @@
  * WARNING: Importing from this module adds ~3.2KB to your bundle.
  * For production, use build-time compilation with chaincss/plugin/vite instead.
  */
-export { $, compileRuntime as compile, runRuntime as run, styleInjector } from './injector.js';
+export { compileRuntime as compile, runRuntime as run, styleInjector } from './injector.js';
+export { $, $t, chain, setManifest } from './Chain.js';
 export { useChainStyles, useDynamicChainStyles, useThemeChainStyles, ChainCSSGlobal, cx, withChainStyles, enableChainCSSDebug, disableChainCSSDebug, isDebugEnabled, createStyledComponent, useComputedStyles } from './react.js';
 export { useAtomicClasses, ChainCSSGlobal as ChainCSSGlobalVue, createStyledComponent as createStyledVueComponent, // This is fine - it renames
 createStyledComponents as createStyledVueComponents, useComputedStyles as useComputedStylesVue, // This renames useComputedStyles
 provideStyleContext, injectStyleContext } from './vue.js';
+export { useAtomicClasses as useAtomicClassesSvelte, cx as cxSvelte, ChainCSSGlobal as ChainCSSGlobalSvelte, createStyledComponent as createStyledSvelteComponent, createStyledComponents as createStyledSvelteComponents, useComputedStyles as useComputedStylesSvelte, provideStyleContext as provideStyleContextSvelte, injectStyleContext as injectStyleContextSvelte, chainStyles } from './svelte.js';
 export { setupHMR, registerForHMR } from './hmr.js';
 export { generateStyleId, hashString, kebabCase, isBrowser, isDevelopment, isProduction, debounce, memoize, cn as cnUtils, devWarn, devLog, logError, createDebugger } from './utils.js';
 export type { RuntimeStyleDefinition, UseChainStylesOptions, RuntimeCompiledResult, StyleInjector, UseAtomicClassesReturn, HMRPayload, ChainCSSDebugger } from './types.js';
-//# sourceMappingURL=index.d.ts.map