@melcanz85/chaincss 1.7.3 → 1.9.0

package/atomic-optimizer.js

@@ -0,0 +1,275 @@
+const path = require('path');
+const fs = require('fs');
+
+class AtomicOptimizer {
+  constructor(options = {}) {
+    this.options = {
+      enabled: true,
+      threshold: 3,
+      naming: 'hash',
+      cache: true,
+      cachePath: './.chaincss-cache',
+      minify: true,
+      ...options
+    };
+    
+    this.usageCount = new Map();
+    this.atomicClasses = new Map();
+    this.stats = {
+      totalStyles: 0,
+      atomicStyles: 0,
+      standardStyles: 0,
+      uniqueProperties: 0
+    };
+    
+    this.cache = null;
+    if (this.options.cache) {
+      this.loadCache();
+    }
+  }
+
+  loadCache() {
+    try {
+      if (fs.existsSync(this.options.cachePath)) {
+        const data = fs.readFileSync(this.options.cachePath, 'utf8');
+        const cache = JSON.parse(data);
+        
+        // Check version compatibility
+        if (cache.version === '1.0.0') {
+          this.atomicClasses = new Map(cache.atomicClasses || []);
+          this.stats = cache.stats || this.stats;
+          
+          const cacheTime = new Date(cache.timestamp).toLocaleString();
+          console.log(`Loaded ${this.atomicClasses.size} atomic classes from cache (${cacheTime})`);
+          
+          // Verify config matches
+          if (cache.config) {
+            if (cache.config.threshold !== this.options.threshold) {
+              console.log(`Cache threshold (${cache.config.threshold}) differs from current (${this.options.threshold})`);
+            }
+          }
+        } else {
+          console.log('Cache version mismatch, creating new cache');
+        }
+      }
+    } catch (err) {
+      console.log('Could not load cache:', err.message);
+    }
+  }
+
+  saveCache() {
+    try {
+      const cache = {
+        version: '1.0.0',
+        timestamp: Date.now(),
+        atomicClasses: Array.from(this.atomicClasses.entries()),
+        stats: this.stats
+      };
+      
+      // Keep only last 5 cache files for rollback
+      const cacheDir = path.dirname(this.options.cachePath);
+      if (fs.existsSync(cacheDir)) {
+        const files = fs.readdirSync(cacheDir)
+          .filter(f => f.startsWith('.chaincss-cache'))
+          .map(f => ({
+            name: f,
+            time: fs.statSync(path.join(cacheDir, f)).mtime.getTime()
+          }))
+          .sort((a, b) => b.time - a.time);
+        
+        files.slice(4).forEach(f => {
+          fs.unlinkSync(path.join(cacheDir, f.name));
+        });
+      }
+      
+      fs.writeFileSync(this.options.cachePath, JSON.stringify(cache, null, 2), 'utf8');
+      
+    } catch (err) {
+      console.log('Could not save cache:', err.message);
+    }
+  }
+
+  trackStyles(styles) {
+    Object.values(styles).forEach(style => {
+      Object.entries(style).forEach(([prop, value]) => {
+        if (prop === 'selectors') return;
+        const key = `${prop}:${value}`;
+        this.usageCount.set(key, (this.usageCount.get(key) || 0) + 1);
+        this.stats.totalStyles++;
+      });
+    });
+    this.stats.uniqueProperties = this.usageCount.size;
+  }
+
+  shouldBeAtomic(prop, value) {
+    const key = `${prop}:${value}`;
+    const usage = this.usageCount.get(key) || 0;
+    
+    // Don't atomic-ify important layout properties that affect order
+    const criticalProps = ['position', 'display', 'flex', 'grid', 'z-index'];
+    const isCritical = criticalProps.some(p => prop.includes(p));
+    
+    if (isCritical && usage < this.options.threshold * 2) {
+      return false; // Keep critical styles in place
+    }
+    
+    return usage >= this.options.threshold;
+  }
+
+  generateClassName(prop, value) {
+    const key = `${prop}:${value}`;
+    
+    if (this.options.naming === 'hash') {
+      let hash = 0;
+      for (let i = 0; i < key.length; i++) {
+        hash = ((hash << 5) - hash) + key.charCodeAt(i);
+        hash |= 0;
+      }
+      return `_${Math.abs(hash).toString(36).substring(0, 6)}`;
+    }
+    
+    const kebabProp = prop.replace(/([A-Z])/g, '-$1').toLowerCase();
+    const safeValue = value.replace(/[^a-zA-Z0-9-]/g, '-');
+    return `${kebabProp}-${safeValue}`;
+  }
+
+  getOrCreateAtomic(prop, value) {
+    const key = `${prop}:${value}`;
+    
+    if (!this.atomicClasses.has(key)) {
+      const className = this.generateClassName(prop, value);
+      this.atomicClasses.set(key, {
+        className,
+        prop,
+        value,
+        usageCount: this.usageCount.get(key) || 0
+      });
+      this.stats.atomicStyles++;
+    }
+    
+    return this.atomicClasses.get(key).className;
+  }
+
+  findKeyByClassName(className) {
+    for (let [key, value] of this.atomicClasses.entries()) {
+      if (value.className === className) return key;
+    }
+    return null;
+  }
+
+  generateAtomicCSS() {
+    let css = '';
+    
+    const sortedClasses = Array.from(this.atomicClasses.values())
+      .sort((a, b) => b.usageCount - a.usageCount);
+    
+    sortedClasses.forEach(atomic => {
+      const kebabProp = atomic.prop.replace(/([A-Z])/g, '-$1').toLowerCase();
+      css += `.${atomic.className} { ${kebabProp}: ${atomic.value}; }\n`;
+    });
+    
+    return css;
+  }
+
+  generateComponentCSS(componentName, style, selectors) {
+    const atomicClasses = [];
+    const standardStyles = {};
+    
+    // Separate atomic and standard styles
+    Object.entries(style).forEach(([prop, value]) => {
+      if (prop === 'selectors') return;
+      
+      if (this.shouldBeAtomic(prop, value)) {
+        const className = this.getOrCreateAtomic(prop, value);
+        atomicClasses.push(className);
+      } else {
+        standardStyles[prop] = value;
+      }
+    });
+    
+    let componentCSS = '';
+    
+    if (atomicClasses.length > 0 || Object.keys(standardStyles).length > 0) {
+      componentCSS += `${selectors.join(', ')} {\n`;
+      
+      // EXPAND atomic classes into actual properties
+      atomicClasses.forEach(className => {
+        const key = this.findKeyByClassName(className);
+        if (key) {
+          const atomic = this.atomicClasses.get(key);
+          const kebabProp = atomic.prop.replace(/([A-Z])/g, '-$1').toLowerCase();
+          componentCSS += `  ${kebabProp}: ${atomic.value};\n`;
+        }
+      });
+      
+      // Add standard styles (these will override atomic if needed)
+      Object.entries(standardStyles).forEach(([prop, value]) => {
+        const kebabProp = prop.replace(/([A-Z])/g, '-$1').toLowerCase();
+        componentCSS += `  ${kebabProp}: ${value};\n`;
+      });
+      
+      componentCSS += `}\n`;
+    }
+    
+    return componentCSS;
+  }
+
+  validateStyleOrder(originalStyles, atomicStyles) {
+    // Compare original vs atomic to ensure no missing styles
+    const originalProps = new Set();
+    const atomicProps = new Set();
+    
+    Object.values(originalStyles).forEach(style => {
+      Object.keys(style).forEach(prop => {
+        if (prop !== 'selectors') originalProps.add(prop);
+      });
+    });
+    
+    // Check atomic classes for missing props
+    this.atomicClasses.forEach(atomic => {
+      atomicProps.add(atomic.prop);
+    });
+    
+    const missingProps = [...originalProps].filter(p => !atomicProps.has(p));
+    if (missingProps.length > 0) {
+      console.warn('Missing atomic classes for:', missingProps);
+    }
+  }
+
+  optimize(styles) {
+    console.log('ChainCSS Atomic Optimizer running...');
+    
+    // Track usage first
+    this.trackStyles(styles);
+    
+    // Generate atomic CSS 
+    let atomicCSS = this.generateAtomicCSS();
+    
+    // Generate component CSS with expanded styles
+    let componentCSS = '';
+    
+    // Process components in original order to maintain specificity
+    Object.entries(styles).forEach(([name, style]) => {
+      const selectors = style.selectors || [`.${name}`];
+      componentCSS += this.generateComponentCSS(name, style, selectors);
+    });
+    
+    // Calculate savings
+    const savings = ((this.stats.totalStyles - this.atomicClasses.size) / this.stats.totalStyles * 100).toFixed(1);
+    
+    //console.log(`Optimization complete:`);
+    //console.log(`Atomic classes created: ${this.atomicClasses.size}`);
+    //console.log(`CSS size reduction: ~${savings}%`);
+    
+    // Save cache if enabled
+    if (this.options.cache) {
+      this.saveCache();
+    }
+    
+    // Return atomic CSS first, then component CSS
+    // This ensures atomic classes are defined before they're used
+    return atomicCSS + componentCSS;
+  }
+}
+
+module.exports = { AtomicOptimizer };

package/cache-manager.js

@@ -0,0 +1,68 @@
+const fs = require('fs');
+const path = require('path');
+
+class CacheManager {
+  constructor(cachePath = './.chaincss-cache') {
+    this.cachePath = path.resolve(process.cwd(), cachePath);
+    this.cacheDir = path.dirname(this.cachePath);
+    this.cache = {};
+    this.load();
+  }
+
+  // Load cache from disk
+  load() {
+    try {
+      if (fs.existsSync(this.cachePath)) {
+        const data = fs.readFileSync(this.cachePath, 'utf8');
+        this.cache = JSON.parse(data);
+        //console.log(`Loaded cache from ${this.cachePath}`);
+      } else {
+        // Ensure cache directory exists
+        if (!fs.existsSync(this.cacheDir)) {
+          fs.mkdirSync(this.cacheDir, { recursive: true });
+        }
+        this.cache = {
+          version: '1.0',
+          created: new Date().toISOString(),
+          atomic: {},
+          usage: {}
+        };
+      }
+    } catch (error) {
+      console.warn('Could not load cache, starting fresh:', error.message);
+      this.cache = {};
+    }
+  }
+
+  // Get value from cache
+  get(key) {
+    return this.cache[key];
+  }
+
+  // Set value in cache
+  set(key, value) {
+    this.cache[key] = value;
+  }
+
+  // Save cache to disk
+  save() {
+    try {
+      const data = JSON.stringify(this.cache, null, 2);
+      fs.writeFileSync(this.cachePath, data, 'utf8');
+      //console.log(`Saved cache to ${this.cachePath}`);
+    } catch (error) {
+      console.warn('Could not save cache:', error.message);
+    }
+  }
+
+  // Clear cache
+  clear() {
+    this.cache = {};
+    if (fs.existsSync(this.cachePath)) {
+      fs.unlinkSync(this.cachePath);
+    }
+    console.log('Cache cleared');
+  }
+}
+
+module.exports = { CacheManager };

package/chaincss.js

@@ -1,30 +1,190 @@
 #!/usr/bin/env node
 
-const vm = require('vm');
+const {NodeVM} = require('vm2');
 const path = require('path');
 const fs = require('fs');
 const chokidar = require('chokidar');
 const CleanCSS = require('clean-css');
-const transpilerModule = require('./transpiler.js');
 const ChainCSSPrefixer = require('./prefixer.js');
+const fileCache = new Map();
 
 let prefixerConfig = {
   enabled: true,
   browsers: ['> 0.5%', 'last 2 versions', 'not dead'],
   mode: 'auto' // 'auto', 'lightweight', or 'full'
 };
-
 const prefixer = new ChainCSSPrefixer(prefixerConfig);
 
-const processScript = (scriptBlock) => {
-  const context = vm.createContext({ ...transpilerModule});
+// IMPORT THE CORE FROM TRANSPILER - use aliasing
+const { $, run, compile: originalCompile, chain } = require('./transpiler');
+
+// Import atomic optimizer
+const { AtomicOptimizer } = require('./atomic-optimizer');
+const { CacheManager } = require('./cache-manager');
+
+// Atomic optimizer instance
+let atomicOptimizer = null;
+
+// Configuration
+let config = {
+  atomic: {
+    enabled: false,  // Default off for backward compatibility
+    threshold: 3,
+    naming: 'hash',
+    cache: true,
+    minify: true
+  }
+};
+
+try {
+  // Try .cjs first (for ES Module projects)
+  let configPath = path.join(process.cwd(), 'chaincss.config.cjs');
+  
+  if (fs.existsSync(configPath)) {
+    const userConfig = require(configPath);
+    config = { ...config, ...userConfig };
+  } else {
+    // Fall back to .js
+    configPath = path.join(process.cwd(), 'chaincss.config.js');
+    
+    if (fs.existsSync(configPath)) {
+      const userConfig = require(configPath);
+      config = { ...config, ...userConfig };
+    } else {
+      console.log('No config file found');
+    }
+  }
+  
+} catch (err) {
+  console.log('Error loading config:', err.message);
+}
+
+// Initialize atomic optimizer if enabled
+if (config.atomic.enabled) {
+  atomicOptimizer = new AtomicOptimizer(config.atomic);
+} else {
+  console.log('Atomic optimizer disabled (config.atomic.enabled =', config.atomic.enabled, ')');
+}
+
+
+// Create the wrapped compile function
+const compile = (obj) => {
+  // First, do standard compilation to get styles
+  originalCompile(obj);
+  
+  // If atomic is enabled, optimize
+  if (atomicOptimizer && config.atomic.enabled) {
+    const optimized = atomicOptimizer.optimize(obj);
+    chain.cssOutput = optimized;
+    return optimized;
+  }
+  return chain.cssOutput;
+};
+
+// Create a combined module for VM sandbox
+const transpilerModule = {
+  $,
+  run,
+  compile,
+  chain
+};
+
+
+// Recursive file processing function
+const processJCSSFile = (filePath) => {
+  // Check cache first
+  if (fileCache.has(filePath)) {
+    return fileCache.get(filePath);
+  }
+  
+  // Check if file exists
+  if (!fs.existsSync(filePath)) {
+    throw new Error(`File not found: ${filePath}`);
+  }
+  
+  const content = fs.readFileSync(filePath, 'utf8');
+  
+  // Create a new VM instance for this file
+  const vm = new NodeVM({
+    console: 'inherit',
+    timeout: 5000,
+    sandbox: {
+      ...transpilerModule,
+      get: (relativePath) => {
+        const baseDir = path.dirname(filePath);
+        const targetPath = path.resolve(baseDir, relativePath);
+        return processJCSSFile(targetPath);
+      },
+      __filename: filePath,
+      __dirname: path.dirname(filePath),
+      module: { exports: {} },
+      exports: {}       
+    },
+    require: {
+      external: true,
+      builtin: ['path', 'fs'],
+      root: './'
+    }
+  });
+  
+  // Wrap the content - DON'T redeclare module!
+  const wrappedContent = `
+    // Clear any existing exports
+    module.exports = {};
+    
+    // Run the actual file content
+    ${content}
+    
+    // Return the exports
+    module.exports;
+  `;
+  
+  try {
+    const exports = vm.run(wrappedContent, filePath);
+    fileCache.set(filePath, exports);
+    return exports;
+  } catch (err) {
+    console.error(`Error processing ${filePath}:`, err.message);
+    throw err;
+  }
+};
+
+const processScript = (scriptBlock,filename) => {
+
+  const vm = new NodeVM({
+    console: 'inherit',
+    timeout: 5000,
+    sandbox: {
+        ...transpilerModule,
+        get: (relativePath) => {
+          const baseDir = path.dirname(filename);
+          const targetPath = path.resolve(baseDir, relativePath);
+          return processJCSSFile(targetPath);
+        },
+        __filename: filename,
+        __dirname: path.dirname(filename),
+        module: { exports: {} },
+        require: (path) => require(path)
+    },
+    require: {
+        external: true, // Allow some external modules
+        builtin: ['path', 'fs'], // Allow specific Node built-ins
+        root: './' // Restrict to project root
+    }
+  });
+
   const jsCode = scriptBlock.trim();
-  const chainScript = new vm.Script(jsCode);
-  chainScript.runInContext(context);
-  return context.chain.cssOutput;
+
+  try {
+      const result = vm.run(jsCode, filename);
+      return transpilerModule.chain.cssOutput;
+  } catch (err) {
+      console.error(`Error processing script in ${filename}:`, err.message);
+      throw err;
+  }
 };
 
-const processJavascriptBlocks = (content) => {
+const processJavascriptBlocks = (content, inputpath) => {
   const blocks = content.split(/<@([\s\S]*?)@>/gm);
   let outputCSS = '';
   for (let i = 0; i < blocks.length; i++) {
@@ -33,7 +193,8 @@ const processJavascriptBlocks = (content) => {
     } else {
       const scriptBlock = blocks[i];
       try {
-        const outputProcessScript = processScript(scriptBlock);
+        const outputProcessScript = processScript(scriptBlock,inputpath);
+
         if (typeof outputProcessScript !== 'object' && typeof outputProcessScript !== 'undefined') {
           outputCSS += outputProcessScript;
         }
@@ -103,8 +264,7 @@ const processor = async (inputFile, outputFile) => {
     const content = fs.readFileSync(input, 'utf8');
     
     // STEP 1: Process JavaScript blocks first
-    const processedCSS = processJavascriptBlocks(content);
-    
+    const processedCSS = processJavascriptBlocks(content, input);
     // STEP 2: Validate the CSS
     if (!validateCSS(processedCSS)) {
       throw new Error('Invalid CSS syntax');
@@ -155,8 +315,7 @@ function parseArgs(args) {
     noPrefix: false,
     browsers: null,
     prefixerMode: 'auto',
-    // NEW: Add these
-    sourceMap: true, // Enable source maps by default
+    sourceMap: true, 
     sourceMapInline: false
   };
   
@@ -173,7 +332,6 @@ function parseArgs(args) {
     } else if (arg === '--browsers' && args[i + 1]) {
       result.browsers = args[i + 1].split(',');
       i++;
-    // NEW: Add these two
     } else if (arg === '--no-source-map') {
       result.sourceMap = false;
     } else if (arg === '--source-map-inline') {
@@ -253,4 +411,13 @@ Examples:
   })();
 }
 
-module.exports = { processor, watch };
+module.exports = { 
+  processor, 
+  watch,
+  $,
+  run,
+  compile,
+  chain,
+  atomicOptimizer,
+  config 
+};

package/index.js

@@ -0,0 +1,24 @@
+const { $, run, compile, chain, tokens, createTokens } = require('./transpiler');
+const { processor, watch } = require('./chaincss');
+
+// Conditionally export React hooks if in React environment
+let reactHooks = {};
+try {
+  // Check if React is available
+  require.resolve('react');
+  reactHooks = require('./react-hooks');
+} catch {
+
+}
+
+module.exports = {
+  $,
+  run,
+  compile,
+  processor,
+  watch,
+  chain,
+  tokens,
+  createTokens,
+  ...reactHooks
+};

package/index.react.js

@@ -0,0 +1,4 @@
+export * from './react-hooks';
+
+// Re-export core for convenience
+export { $, tokens, createTokens } from './transpiler';

package/package.json

@@ -1,8 +1,31 @@
 {
   "name": "@melcanz85/chaincss",
-  "version": "1.7.3",
+  "version": "1.9.0",
   "description": "A simple package transpiler for js to css",
-  "main": "chaincss.js",
+  "main": "index.js",
+  "module": "index.react.js",
+  "exports": {
+    ".": {
+      "require": "./index.js",
+      "import": "./index.react.js"
+    },
+    "./react": {
+      "import": "./index.react.js"
+    }
+  },
+  "types": "types.d.ts",
+  "files": [
+    "index.js",
+    "index.react.js",
+    "chaincss.js",
+    "transpiler.js",
+    "tokens.js",
+    "react-hooks.js",
+    "atomic-optimizer.js",
+    "cache-manager.js",
+    "prefixer.js",
+    "types.d.ts"
+  ],
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"

package/prefixer.js

@@ -89,7 +89,7 @@ class ChainCSSPrefixer {
       // Set up source map options
       const mapOptions = {
         inline: this.config.sourceMapInline,
-        annotation: false, // We'll add the comment ourselves
+        annotation: false, 
         sourcesContent: true
       };
 
@@ -100,7 +100,7 @@ class ChainCSSPrefixer {
       return await this.processWithBuiltIn(cssString, options, mapOptions);
       
     } catch (err) {
-      console.error('⚠️ Prefixer error:', err.message);
+      console.error('Prefixer error:', err.message);
       return { css: cssString, map: null };
     }
   }