@melcanz85/chaincss 1.12.0 → 1.12.1

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2025 Rommel Caneos
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+EOF

package/node/benchmarks/compare.js

@@ -0,0 +1,17 @@
+#!/usr/bin/env node
+
+/**
+ * ChainCSS Benchmark Comparison
+ * Run with: npm run benchmark:compare
+ */
+
+console.log('📊 ChainCSS Benchmark Comparison\n');
+console.log('This will compare ChainCSS with other CSS-in-JS libraries.\n');
+console.log('To run full benchmarks: npm run benchmark');
+console.log('Check results at: https://chaincss.dev/benchmarks\n');
+
+// Simple version info
+const { version } = require('../../package.json');
+console.log(`ChainCSS v${version} is ready for benchmarking!\n`);
+console.log('For detailed benchmarks, please visit our documentation site.');
+EOF

package/node/benchmarks/run.js

@@ -0,0 +1,299 @@
+// benchmarks/run.js
+const { execSync } = require('child_process');
+const fs = require('fs');
+const path = require('path');
+const os = require('os');
+
+const libraries = [
+  {
+    name: 'ChainCSS (Build)',
+    setup: () => {
+      const content = `
+        const button = $()
+          .backgroundColor('blue')
+          .color('white')
+          .padding('8px 16px')
+          .borderRadius('4px')
+          .hover().backgroundColor('darkblue').end()
+          .block('.btn');
+        module.exports = { button };
+      `;
+      fs.writeFileSync('./test.jcss', content);
+    },
+    build: () => {
+      execSync('npx @melcanz85/chaincss ./test.jcss ./dist --atomic', { stdio: 'pipe' });
+    },
+    cleanup: () => {
+      fs.unlinkSync('./test.jcss');
+      if (fs.existsSync('./dist')) {
+        fs.rmSync('./dist', { recursive: true });
+      }
+    }
+  },
+  {
+    name: 'ChainCSS (Runtime)',
+    setup: () => {
+      const content = `
+        import { $ } from '@melcanz85/chaincss';
+        const button = $()
+          .backgroundColor('blue')
+          .color('white')
+          .padding('8px 16px')
+          .borderRadius('4px')
+          .hover().backgroundColor('darkblue').end()
+          .block('.btn');
+        export default button;
+      `;
+      fs.writeFileSync('./test.js', content);
+    },
+    build: () => {
+      // No build step for runtime
+    },
+    cleanup: () => {
+      fs.unlinkSync('./test.js');
+    }
+  },
+  {
+    name: 'CSS Modules',
+    setup: () => {
+      const content = `
+        .btn {
+          background-color: blue;
+          color: white;
+          padding: 8px 16px;
+          border-radius: 4px;
+        }
+        .btn:hover {
+          background-color: darkblue;
+        }
+      `;
+      fs.writeFileSync('./test.module.css', content);
+    },
+    build: () => {
+      // CSS Modules are handled by webpack
+    },
+    cleanup: () => {
+      fs.unlinkSync('./test.module.css');
+    }
+  },
+  {
+    name: 'Vanilla Extract',
+    setup: () => {
+      const content = `
+        import { style } from '@vanilla-extract/css';
+        export const button = style({
+          backgroundColor: 'blue',
+          color: 'white',
+          padding: '8px 16px',
+          borderRadius: '4px',
+          ':hover': {
+            backgroundColor: 'darkblue'
+          }
+        });
+      `;
+      fs.writeFileSync('./test.css.ts', content);
+    },
+    build: () => {
+      execSync('npx esbuild ./test.css.ts --bundle --outfile=./dist/test.js', { stdio: 'pipe' });
+    },
+    cleanup: () => {
+      fs.unlinkSync('./test.css.ts');
+      if (fs.existsSync('./dist')) {
+        fs.rmSync('./dist', { recursive: true });
+      }
+    }
+  },
+  {
+    name: 'Styled Components',
+    setup: () => {
+      const content = `
+        import styled from 'styled-components';
+        export const Button = styled.button\`
+          background-color: blue;
+          color: white;
+          padding: 8px 16px;
+          border-radius: 4px;
+          &:hover {
+            background-color: darkblue;
+          }
+        \`;
+      `;
+      fs.writeFileSync('./test.jsx', content);
+    },
+    build: () => {
+      execSync('npx esbuild ./test.jsx --bundle --outfile=./dist/test.js', { stdio: 'pipe' });
+    },
+    cleanup: () => {
+      fs.unlinkSync('./test.jsx');
+      if (fs.existsSync('./dist')) {
+        fs.rmSync('./dist', { recursive: true });
+      }
+    }
+  }
+];
+
+async function runBenchmarks() {
+  console.log('\n🚀 Running ChainCSS Performance Benchmarks\n');
+  console.log('═'.repeat(60));
+  
+  const results = [];
+  
+  for (const lib of libraries) {
+    console.log(`\n📊 Testing ${lib.name}...`);
+    
+    // Setup
+    lib.setup();
+    
+    // Measure build time
+    const start = performance.now();
+    try {
+      await lib.build();
+    } catch (err) {
+      console.error(`  ❌ Failed: ${err.message}`);
+      lib.cleanup();
+      continue;
+    }
+    const buildTime = performance.now() - start;
+    
+    // Measure bundle size
+    let bundleSize = 0;
+    let cssSize = 0;
+    
+    if (lib.name === 'ChainCSS (Build)') {
+      if (fs.existsSync('./dist/global.css')) {
+        cssSize = fs.statSync('./dist/global.css').size;
+      }
+    } else if (lib.name === 'ChainCSS (Runtime)') {
+      const bundle = fs.readFileSync('./test.js', 'utf8');
+      bundleSize = bundle.length;
+    } else if (lib.name === 'CSS Modules') {
+      // CSS Modules size is just the CSS file
+      cssSize = fs.statSync('./test.module.css').size;
+    } else if (fs.existsSync('./dist/test.js')) {
+      bundleSize = fs.statSync('./dist/test.js').size;
+      if (fs.existsSync('./dist/test.css')) {
+        cssSize = fs.statSync('./dist/test.css').size;
+      }
+    }
+    
+    results.push({
+      name: lib.name,
+      buildTime: buildTime.toFixed(2),
+      bundleSize: formatBytes(bundleSize),
+      cssSize: formatBytes(cssSize),
+      totalSize: formatBytes(bundleSize + cssSize)
+    });
+    
+    // Cleanup
+    lib.cleanup();
+    
+    console.log(`  ✅ Build: ${buildTime.toFixed(2)}ms`);
+    console.log(`  📦 Bundle: ${formatBytes(bundleSize)}`);
+    console.log(`  🎨 CSS: ${formatBytes(cssSize)}`);
+  }
+  
+  // Generate report
+  generateReport(results);
+  generateChart(results);
+}
+
+function formatBytes(bytes) {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+
+function generateReport(results) {
+  const markdown = `# ChainCSS Performance Benchmarks
+
+## Test Environment
+- **OS**: ${os.type()} ${os.release()}
+- **CPU**: ${os.cpus()[0].model}
+- **RAM**: ${formatBytes(os.totalmem())}
+- **Node**: ${process.version}
+- **Date**: ${new Date().toISOString()}
+
+## Results
+
+| Library | Build Time | Bundle Size | CSS Size | Total Size |
+|---------|------------|-------------|----------|------------|
+${results.map(r => `| ${r.name} | ${r.buildTime}ms | ${r.bundleSize} | ${r.cssSize} | ${r.totalSize} |`).join('\n')}
+
+## Key Findings
+
+${generateInsights(results)}
+
+## Recommendations
+
+${generateRecommendations(results)}
+`;
+  
+  fs.writeFileSync('./benchmarks/results.md', markdown);
+  console.log('\n✅ Report saved to benchmarks/results.md');
+}
+
+function generateInsights(results) {
+  const chaincssBuild = results.find(r => r.name === 'ChainCSS (Build)');
+  const chaincssRuntime = results.find(r => r.name === 'ChainCSS (Runtime)');
+  const cssModules = results.find(r => r.name === 'CSS Modules');
+  const vanillaExtract = results.find(r => r.name === 'Vanilla Extract');
+  const styledComponents = results.find(r => r.name === 'Styled Components');
+  
+  let insights = [];
+  
+  if (chaincssBuild && cssModules) {
+    insights.push(`- **ChainCSS (Build)** is ${((parseFloat(cssModules.buildTime) - parseFloat(chaincssBuild.buildTime)) / parseFloat(cssModules.buildTime) * 100).toFixed(0)}% faster than CSS Modules`);
+  }
+  
+  if (chaincssBuild && vanillaExtract) {
+    insights.push(`- **ChainCSS (Build)** is ${((parseFloat(vanillaExtract.buildTime) - parseFloat(chaincssBuild.buildTime)) / parseFloat(vanillaExtract.buildTime) * 100).toFixed(0)}% faster than Vanilla Extract`);
+  }
+  
+  if (chaincssRuntime && styledComponents) {
+    insights.push(`- **ChainCSS (Runtime)** is ${((parseFloat(styledComponents.bundleSize) - parseFloat(chaincssRuntime.bundleSize)) / parseFloat(styledComponents.bundleSize) * 100).toFixed(0)}% smaller than Styled Components`);
+  }
+  
+  return insights.join('\n');
+}
+
+function generateRecommendations(results) {
+  return `
+### For Static Sites
+**Use ChainCSS (Build Mode)** - ${results.find(r => r.name === 'ChainCSS (Build)')?.buildTime}ms build time, zero runtime
+
+### For Dynamic Apps
+**Use ChainCSS (Runtime Mode)** - ${results.find(r => r.name === 'ChainCSS (Runtime)')?.bundleSize} bundle size, full dynamic capability
+
+### For Best Performance
+**Use ChainCSS with Atomic CSS** - Automatic optimization with ${results.find(r => r.name === 'ChainCSS (Build)')?.cssSize} CSS output
+
+### For Component Libraries
+**Use ChainCSS Recipe System** - Built-in variants, compound styles, zero config
+`;
+}
+
+function generateChart(results) {
+  const chartData = {
+    labels: results.map(r => r.name),
+    datasets: [
+      {
+        label: 'Build Time (ms)',
+        data: results.map(r => parseFloat(r.buildTime)),
+        backgroundColor: 'rgba(102, 126, 234, 0.5)'
+      },
+      {
+        label: 'Bundle Size (KB)',
+        data: results.map(r => parseFloat(r.bundleSize)),
+        backgroundColor: 'rgba(118, 75, 162, 0.5)'
+      }
+    ]
+  };
+  
+  fs.writeFileSync('./benchmarks/chart-data.json', JSON.stringify(chartData, null, 2));
+  console.log('📊 Chart data saved to benchmarks/chart-data.json');
+}
+
+// Run benchmarks
+runBenchmarks().catch(console.error);

package/node/loaders/chaincss-loader.js

@@ -0,0 +1,62 @@
+// node/loaders/chaincss-loader.js
+const path = require('path');
+const { execSync } = require('child_process');
+const fs = require('fs');
+
+module.exports = function(source) {
+  const callback = this.async();
+  const options = this.getOptions() || {};
+  
+  const mode = options.mode || (process.env.NODE_ENV === 'production' ? 'build' : 'runtime');
+  
+  if (mode === 'runtime') {
+    const code = `
+      import { $, compile } from '@melcanz85/chaincss';
+      const styles = (() => {
+        ${source}
+        return { ${extractStyleNames(source)} };
+      })();
+      export default styles;
+    `;
+    callback(null, code);
+    return;
+  }
+  
+  try {
+    const tempFile = path.join(this.context, '.temp.jcss');
+    fs.writeFileSync(tempFile, source);
+    
+    const outputDir = path.join(process.cwd(), '.chaincss-cache');
+    if (!fs.existsSync(outputDir)) {
+      fs.mkdirSync(outputDir, { recursive: true });
+    }
+    
+    const cmd = `node ${path.join(__dirname, '../chaincss.js')} ${tempFile} ${outputDir} ${options.atomic ? '--atomic' : ''}`;
+    execSync(cmd, { stdio: 'pipe' });
+    
+    const cssPath = path.join(outputDir, 'global.css');
+    const css = fs.readFileSync(cssPath, 'utf8');
+    
+    fs.unlinkSync(tempFile);
+    
+    const code = `
+      const css = ${JSON.stringify(css)};
+      if (typeof document !== 'undefined') {
+        const style = document.createElement('style');
+        style.setAttribute('data-chaincss', ${JSON.stringify(this.resourcePath)});
+        style.textContent = css;
+        document.head.appendChild(style);
+      }
+      export default {};
+    `;
+    callback(null, code);
+  } catch (err) {
+    callback(err);
+  }
+};
+
+function extractStyleNames(source) {
+  const matches = source.match(/const\s+(\w+)\s*=\s*\$\(\)/g);
+  if (!matches) return '';
+  return matches.map(m => m.match(/const\s+(\w+)/)[1]).join(', ');
+}

package/node/plugins/next-plugin.js

@@ -0,0 +1,29 @@
+// node/plugins/next-plugin.js
+const path = require('path');
+
+module.exports = function withChainCSS(nextConfig = {}) {
+  return {
+    ...nextConfig,
+    webpack(config, options) {
+      config.module.rules.push({
+        test: /\.jcss$/,
+        use: [
+          options.defaultLoaders.babel,
+          {
+            loader: path.resolve(__dirname, '../loaders/chaincss-loader.js'),
+            options: {
+              mode: process.env.NODE_ENV === 'production' ? 'build' : 'runtime',
+              atomic: process.env.NODE_ENV === 'production'
+            }
+          }
+        ]
+      });
+
+      if (typeof nextConfig.webpack === 'function') {
+        return nextConfig.webpack(config, options);
+      }
+      return config;
+    },
+    pageExtensions: [...(nextConfig.pageExtensions || []), 'jcss']
+  };
+};

package/node/plugins/vite-plugin.js

@@ -0,0 +1,215 @@
+// node/plugins/vite-plugin.js
+import path from 'node:path';
+import fs from 'node:fs';
+import { createRequire } from 'node:module';
+import CleanCSS from 'clean-css';
+import { $, run, compile as originalCompile, chain } from '../btt.js';
+
+const require = createRequire(import.meta.url);
+
+// Optional: Try to load prefixer
+let prefixer;
+try {
+  const ChainCSSPrefixer = (await import('../prefixer.js')).default;
+  prefixer = new ChainCSSPrefixer({ enabled: true });
+} catch (err) {
+  console.warn('ChainCSS: Prefixer not available, autoprefixing disabled');
+  prefixer = { process: async (css) => ({ css }) };
+}
+
+// Cache for processed files
+const fileCache = new Map();
+const compiledCache = new Map();
+
+// Helper to compile script without temp files
+const compileScript = (scriptBlock, filename, get) => {
+  const dirname = path.dirname(filename);
+  
+  // Reset CSS output
+  chain.cssOutput = '';
+  
+  // Create a function from the script - no temp files!
+  const fn = new Function(
+    '$',
+    'run',
+    'compile',
+    'chain',
+    'get',
+    '__filename',
+    '__dirname',
+    scriptBlock
+  );
+  
+  // Execute with helpers
+  fn($, run, originalCompile, chain, get, filename, dirname);
+  
+  return chain.cssOutput || '';
+};
+
+const processJavascriptBlocks = (content, filename, get) => {
+  const blocks = content.split(/<@([\s\S]*?)@>/gm);
+  let output = '';
+  
+  for (let i = 0; i < blocks.length; i++) {
+    if (i % 2 === 0) {
+      // Static content
+      output += blocks[i];
+    } else {
+      // JavaScript block
+      const css = compileScript(blocks[i], filename, get);
+      if (css && typeof css === 'string') {
+        output += css;
+      }
+    }
+  }
+  
+  return output.trim();
+};
+
+const processJCSSFile = (filePath) => {
+  const abs = path.resolve(filePath);
+  
+  // Return cached result if available
+  if (fileCache.has(abs)) return fileCache.get(abs);
+  
+  // Check if file exists
+  if (!fs.existsSync(abs)) {
+    throw new Error(`ChainCSS: File not found: ${abs}`);
+  }
+  
+  const content = fs.readFileSync(abs, 'utf8');
+  const dirname = path.dirname(abs);
+  
+  // Create get function for this file
+  const get = (relativePath) => {
+    const targetPath = path.resolve(dirname, relativePath);
+    return processJCSSFile(targetPath);
+  };
+  
+  // Process the file
+  const result = processJavascriptBlocks(content, abs, get);
+  
+  // Cache the result
+  fileCache.set(abs, result);
+  return result;
+};
+
+// Minify and prefix CSS
+const processCSS = async (css, filepath, options = {}) => {
+  const { minify = true, prefix = true } = options;
+  let processed = css;
+  
+  // Add prefixing
+  if (prefix && prefixer) {
+    try {
+      const result = await prefixer.process(css, { from: filepath });
+      processed = result.css;
+    } catch (err) {
+      console.warn(`ChainCSS prefixer error in ${filepath}:`, err.message);
+    }
+  }
+  
+  // Minify
+  if (minify) {
+    const minified = new CleanCSS({ level: 2 }).minify(processed);
+    if (minified.errors.length) {
+      console.warn(`ChainCSS minification errors in ${filepath}:`, minified.errors);
+    }
+    return minified.styles;
+  }
+  
+  return processed;
+};
+
+export default function chaincssVite(opts = {}) {
+  const {
+    extension = '.jcss',
+    minify = process.env.NODE_ENV === 'production',
+    prefix = true,
+    hmr = true
+  } = opts;
+  
+  return {
+    name: 'vite-plugin-chaincss',
+    enforce: 'pre',
+    
+    // Transform .jcss files
+    async transform(code, id) {
+      if (!id.endsWith(extension)) return null;
+      
+      try {
+        // Create get function for root file
+        const dirname = path.dirname(id);
+        const get = (relativePath) => {
+          const targetPath = path.resolve(dirname, relativePath);
+          return processJCSSFile(targetPath);
+        };
+        
+        // Process the file
+        let css = processJavascriptBlocks(code, id, get);
+        
+        // Process CSS (prefix + minify)
+        css = await processCSS(css, id, { minify, prefix });
+        
+        // In development, inject CSS for HMR
+        if (process.env.NODE_ENV !== 'production') {
+          return {
+            code: `
+              // ChainCSS HMR
+              const id = ${JSON.stringify(id)};
+              const css = ${JSON.stringify(css)};
+              
+              // Add style to head
+              let style = document.querySelector(\`style[data-chaincss="\${id}"]\`);
+              if (!style) {
+                style = document.createElement('style');
+                style.setAttribute('data-chaincss', id);
+                document.head.appendChild(style);
+              }
+              style.textContent = css;
+              
+              // HMR handling
+              if (import.meta.hot) {
+                import.meta.hot.accept((newModule) => {
+                  if (newModule?.default) {
+                    style.textContent = newModule.default;
+                  }
+                });
+                
+                import.meta.hot.dispose(() => {
+                  style.remove();
+                });
+              }
+              
+              export default css;
+            `,
+            map: null
+          };
+        }
+        
+        // Production: just export CSS
+        return {
+          code: `export default ${JSON.stringify(css)};`,
+          map: null
+        };
+        
+      } catch (err) {
+        this.error(`ChainCSS error in ${id}: ${err.message}`);
+        return null;
+      }
+    },
+    
+    // Handle HMR updates
+    handleHotUpdate({ file, server }) {
+      if (file.endsWith(extension)) {
+        // Invalidate cache for changed file
+        fileCache.delete(file);
+        // Trigger reload
+        server.ws.send({
+          type: 'full-reload',
+          path: '*'
+        });
+      }
+    }
+  };
+}

package/node/plugins/webpack-plugin.js

@@ -0,0 +1,41 @@
+// node/plugins/webpack-plugin.js
+const path = require('path');
+const { execSync } = require('child_process');
+const fs = require('fs');
+
+class ChainCSSWebpackPlugin {
+  constructor(options = {}) {
+    this.options = {
+      atomic: process.env.NODE_ENV === 'production',
+      input: './src/styles/main.jcss',
+      output: './dist',
+      ...options
+    };
+  }
+
+  apply(compiler) {
+    compiler.hooks.beforeCompile.tapAsync('ChainCSSPlugin', async (params, callback) => {
+      try {
+        const inputPath = path.resolve(process.cwd(), this.options.input);
+        const outputPath = path.resolve(process.cwd(), this.options.output);
+        
+        if (!fs.existsSync(inputPath)) {
+          console.warn('ChainCSS: No main.jcss file found, skipping...');
+          callback();
+          return;
+        }
+        
+        const cmd = `node ${path.join(__dirname, '../chaincss.js')} ${inputPath} ${outputPath} ${this.options.atomic ? '--atomic' : ''}`;
+        execSync(cmd, { stdio: 'inherit' });
+        
+        console.log('ChainCSS compiled successfully');
+        callback();
+      } catch (err) {
+        console.error('ChainCSS compilation failed:', err.message);
+        callback(err);
+      }
+    });
+  }
+}
+
+module.exports = ChainCSSWebpackPlugin;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@melcanz85/chaincss",
-  "version": "1.12.0",
+  "version": "1.12.1",
   "description": "Chainable CSS-in-JS with build-time compilation, atomic CSS, and zero-runtime options",
   "keywords": [
     "css",