@melcanz85/chaincss 1.11.5 → 1.12.0

package/node/atomic-optimizer.js

@@ -1,61 +1,90 @@
+const crypto = require('crypto');
 const path = require('path');
 const fs = require('fs');
+
+function hashKey(key) {
+  return crypto.createHash('sha1').update(key).digest('hex').slice(0, 6);
+}
+
+function kebab(s) {
+  return s.replace(/([A-Z])/g, '-$1').toLowerCase();
+}
+
 class AtomicOptimizer {
   constructor(options = {}) {
     this.options = {
       enabled: true,
-      threshold: 3,
-      naming: 'hash',
+      threshold: 3,                    // Default threshold
+      naming: 'hash',                  // 'hash' | 'readable'
       cache: true,
       cachePath: './.chaincss-cache',
       minify: true,
+      alwaysAtomic: [],                // Force these props to be atomic
+      neverAtomic: [                   // Never make these atomic
+        'content', 'animation', 'transition', 'keyframes',
+        'counterIncrement', 'counterReset'
+      ],
       ...options
     };
-    this.usageCount = new Map();
-    this.atomicClasses = new Map();
+    
+    this.usageCount = new Map();        // prop:value -> count
+    this.atomicClasses = new Map();     // prop:value -> { className, prop, value, usageCount }
     this.stats = {
       totalStyles: 0,
       atomicStyles: 0,
       standardStyles: 0,
-      uniqueProperties: 0
+      uniqueProperties: 0,
+      savings: 0
     };
-    this.cache = null;
+    
     if (this.options.cache) {
       this.loadCache();
     }
   }
+
+  // ============================================================================
+  // Cache Management
+  // ============================================================================
+  
   loadCache() {
     try {
-      if (fs.existsSync(this.options.cachePath)) {
-        const data = fs.readFileSync(this.options.cachePath, 'utf8');
-        const cache = JSON.parse(data);
-        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})\n`);
-          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');
-        }
+      if (!fs.existsSync(this.options.cachePath)) return;
+      
+      const data = JSON.parse(fs.readFileSync(this.options.cachePath, 'utf8'));
+      
+      // Version check
+      if (data.version !== '1.0.0') {
+        console.log('Cache version mismatch, creating new cache');
+        return;
+      }
+      
+      // Check if config changed
+      if (data.config?.threshold !== this.options.threshold) {
+        console.log(`Cache threshold (${data.config?.threshold}) differs from current (${this.options.threshold})`);
+        return;
       }
+      
+      this.atomicClasses = new Map(data.atomicClasses || []);
+      this.stats = data.stats || this.stats;
+      
+      const cacheTime = new Date(data.timestamp).toLocaleString();
+      console.log(`✅ Loaded ${this.atomicClasses.size} atomic classes from cache (${cacheTime})`);
+      
     } catch (err) {
       console.log('Could not load cache:', err.message);
     }
   }
+  
   saveCache() {
+    if (!this.options.cache) return;
+    
     try {
-      const cache = {
-        version: '1.0.0',
-        timestamp: Date.now(),
-        atomicClasses: Array.from(this.atomicClasses.entries()),
-        stats: this.stats
-      };
       const cacheDir = path.dirname(this.options.cachePath);
+      if (!fs.existsSync(cacheDir)) {
+        fs.mkdirSync(cacheDir, { recursive: true });
+      }
+      
+      // Clean up old cache files (keep last 5)
       if (fs.existsSync(cacheDir)) {
         const files = fs.readdirSync(cacheDir)
           .filter(f => f.startsWith('.chaincss-cache'))
@@ -64,52 +93,90 @@ class AtomicOptimizer {
             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));
+        
+        // Keep only the 5 most recent cache files
+        files.slice(5).forEach(f => {
+          try { fs.unlinkSync(path.join(cacheDir, f.name)); } catch {}
         });
       }
+      
+      const cache = {
+        version: '1.0.0',
+        timestamp: Date.now(),
+        atomicClasses: Array.from(this.atomicClasses.entries()),
+        stats: this.stats,
+        config: {
+          threshold: this.options.threshold,
+          naming: this.options.naming
+        }
+      };
+      
       fs.writeFileSync(this.options.cachePath, JSON.stringify(cache, null, 2), 'utf8');
     } catch (err) {
       console.log('Could not save cache:', err.message);
     }
   }
+
+  // ============================================================================
+  // Style Tracking
+  // ============================================================================
+  
   trackStyles(styles) {
-    Object.values(styles).forEach(style => {
-      Object.entries(style).forEach(([prop, value]) => {
-        if (prop === 'selectors') return;
+    const styleArray = Array.isArray(styles) ? styles : Object.values(styles);
+    
+    for (const style of styleArray) {
+      if (!style || !style.selectors) continue;
+      
+      for (const [prop, value] of Object.entries(style)) {
+        if (prop === 'selectors' || prop === 'atRules' || prop === 'hover') continue;
+        
         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) {
+    // Never atomic
+    if (this.options.neverAtomic.includes(prop)) return false;
+    
+    // Always atomic
+    if (this.options.alwaysAtomic.includes(prop)) return true;
+    
+    // Critical props that need higher threshold
+    const criticalProps = ['position', 'display', 'flex', 'grid', 'zIndex', 'top', 'left', 'right', 'bottom'];
+    const isCritical = criticalProps.includes(prop);
+    
     const key = `${prop}:${value}`;
     const usage = this.usageCount.get(key) || 0;
-    const criticalProps = ['position', 'display', 'flex', 'grid', 'z-index'];
-    const isCritical = criticalProps.some(p => prop.includes(p));
+    
+    // Critical props need double threshold to be atomic
     if (isCritical && usage < this.options.threshold * 2) {
       return false;
     }
+    
     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)}`;
+      return `c_${hashKey(key)}`;
     }
-    const kebabProp = prop.replace(/([A-Z])/g, '-$1').toLowerCase();
-    const safeValue = value.replace(/[^a-zA-Z0-9-]/g, '-');
+    
+    // Readable naming
+    const kebabProp = kebab(prop);
+    const safeValue = String(value).replace(/[^a-z0-9_-]/gi, '-').slice(0, 30);
     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, {
@@ -120,85 +187,205 @@ class AtomicOptimizer {
       });
       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;
-  }
+
+  // ============================================================================
+  // CSS Generation
+  // ============================================================================
+  
   generateAtomicCSS() {
-    let css = ''; 
+    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`;
-    });
+    
+    for (const atomic of sortedClasses) {
+      const kebabProp = kebab(atomic.prop);
+      css += `.${atomic.className}{${kebabProp}:${atomic.value}${this.options.minify ? '' : ';'}}\n`;
+    }
+    
     return css;
   }
+  
   generateComponentCSS(componentName, style, selectors) {
     const atomicClasses = [];
     const standardStyles = {};
-    Object.entries(style).forEach(([prop, value]) => {
-      if (prop === 'selectors') return;
+    const hoverStyles = {};
+    
+    // Separate styles
+    for (const [prop, value] of Object.entries(style)) {
+      if (prop === 'selectors' || prop === 'atRules') continue;
       
-      if (this.shouldBeAtomic(prop, value)) {
-        const className = this.getOrCreateAtomic(prop, value);
-        atomicClasses.push(className);
+      if (prop === 'hover' && typeof value === 'object') {
+        // Handle hover styles
+        for (const [hoverProp, hoverValue] of Object.entries(value)) {
+          if (this.shouldBeAtomic(hoverProp, hoverValue)) {
+            atomicClasses.push(this.getOrCreateAtomic(hoverProp, hoverValue));
+          } else {
+            hoverStyles[hoverProp] = hoverValue;
+          }
+        }
+      } else if (this.shouldBeAtomic(prop, value)) {
+        atomicClasses.push(this.getOrCreateAtomic(prop, value));
       } else {
         standardStyles[prop] = value;
       }
-    });
+    }
+    
+    // Generate CSS
     let componentCSS = '';
+    const selectorStr = selectors.join(', ');
+    
     if (atomicClasses.length > 0 || Object.keys(standardStyles).length > 0) {
-      componentCSS += `${selectors.join(', ')} {\n`;
-      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 += `${selectorStr} {\n`;
+      
+      // Atomic classes (inlined for specificity)
+      for (const className of atomicClasses) {
+        const atomic = this.findAtomicByClassName(className);
+        if (atomic) {
+          const kebabProp = kebab(atomic.prop);
           componentCSS += `  ${kebabProp}: ${atomic.value};\n`;
         }
-      });
-      Object.entries(standardStyles).forEach(([prop, value]) => {
-        const kebabProp = prop.replace(/([A-Z])/g, '-$1').toLowerCase();
+      }
+      
+      // Standard styles
+      for (const [prop, value] of Object.entries(standardStyles)) {
+        const kebabProp = kebab(prop);
         componentCSS += `  ${kebabProp}: ${value};\n`;
-      });
+      }
+      
+      componentCSS += `}\n`;
+    }
+    
+    // Hover styles
+    if (Object.keys(hoverStyles).length > 0) {
+      componentCSS += `${selectorStr}:hover {\n`;
+      for (const [prop, value] of Object.entries(hoverStyles)) {
+        const kebabProp = kebab(prop);
+        componentCSS += `  ${kebabProp}: ${value};\n`;
+      }
       componentCSS += `}\n`;
     }
+    
     return componentCSS;
   }
+  
+  findAtomicByClassName(className) {
+    for (const atomic of this.atomicClasses.values()) {
+      if (atomic.className === className) return atomic;
+    }
+    return null;
+  }
+  
   validateStyleOrder(originalStyles, atomicStyles) {
     const originalProps = new Set();
     const atomicProps = new Set();
-    Object.values(originalStyles).forEach(style => {
-      Object.keys(style).forEach(prop => {
-        if (prop !== 'selectors') originalProps.add(prop);
-      });
-    });
-    this.atomicClasses.forEach(atomic => {
+    
+    const styleArray = Array.isArray(originalStyles) ? originalStyles : Object.values(originalStyles);
+    for (const style of styleArray) {
+      if (!style) continue;
+      for (const prop of Object.keys(style)) {
+        if (prop !== 'selectors' && prop !== 'atRules' && prop !== 'hover') {
+          originalProps.add(prop);
+        }
+      }
+    }
+    
+    for (const atomic of this.atomicClasses.values()) {
       atomicProps.add(atomic.prop);
-    });
+    }
+    
     const missingProps = [...originalProps].filter(p => !atomicProps.has(p));
     if (missingProps.length > 0) {
-      console.warn('Missing atomic classes for:', missingProps);
+      console.warn('⚠️ Missing atomic classes for:', missingProps.slice(0, 10));
     }
   }
-  optimize(styles) {
-    this.trackStyles(styles);
+  
+  getStats() {
+    const savings = this.stats.totalStyles > 0 
+      ? ((this.stats.totalStyles - this.stats.atomicStyles) / this.stats.totalStyles * 100).toFixed(1)
+      : 0;
+    
+    return {
+      totalStyles: this.stats.totalStyles,
+      atomicStyles: this.stats.atomicStyles,
+      standardStyles: this.stats.standardStyles,
+      uniqueProperties: this.stats.uniqueProperties,
+      savings: `${savings}%`
+    };
+  }
+
+  // ============================================================================
+  // Main Optimize Method
+  // ============================================================================
+  
+  optimize(stylesInput) {
+    if (!this.options.enabled) {
+      return { 
+        css: '', 
+        map: {}, 
+        stats: this.getStats(),
+        atomicCSS: ''
+      };
+    }
+    
+    // Normalize input to array
+    const styleArray = Array.isArray(stylesInput) 
+      ? stylesInput 
+      : typeof stylesInput === 'object' 
+        ? Object.values(stylesInput) 
+        : [];
+    
+    // Track usage counts
+    this.trackStyles(styleArray);
+    
+    // Generate CSS
     let atomicCSS = this.generateAtomicCSS();
     let componentCSS = '';
-    Object.entries(styles).forEach(([name, style]) => {
-      const selectors = style.selectors || [`.${name}`];
-      componentCSS += this.generateComponentCSS(name, style, selectors);
-    });
-    const savings = ((this.stats.totalStyles - this.atomicClasses.size) / this.stats.totalStyles * 100).toFixed(1);
+    const classMap = {};
+    
+    for (const style of styleArray) {
+      if (!style || !style.selectors) continue;
+      
+      const selectors = style.selectors;
+      const selectorKey = selectors.join(', ');
+      
+      // Generate component CSS
+      componentCSS += this.generateComponentCSS(style.name || 'component', style, selectors);
+      
+      // Build class map for users
+      const atomicClassesForSelector = [];
+      for (const [prop, value] of Object.entries(style)) {
+        if (prop === 'selectors' || prop === 'atRules' || prop === 'hover') continue;
+        if (this.shouldBeAtomic(prop, value)) {
+          atomicClassesForSelector.push(this.getOrCreateAtomic(prop, value));
+        }
+      }
+      classMap[selectorKey] = atomicClassesForSelector.join(' ');
+    }
+    
+    // Validation
+    this.validateStyleOrder(styleArray);
+    
+    // Save cache
     if (this.options.cache) {
       this.saveCache();
     }
-    return atomicCSS + componentCSS;
+    
+    // Calculate savings
+    const savings = this.stats.totalStyles > 0 
+      ? ((this.stats.totalStyles - this.atomicClasses.size) / this.stats.totalStyles * 100).toFixed(1)
+      : 0;
+    
+    return {
+      css: (atomicCSS + componentCSS).trim(),
+      map: classMap,
+      stats: this.getStats(),
+      atomicCSS: atomicCSS.trim(),
+      componentCSS: componentCSS.trim()
+    };
   }
 }
+
 module.exports = { AtomicOptimizer };