chaincss 1.13.2 → 1.13.3

package/node/atomic-optimizer.js

@@ -12,23 +12,41 @@ function kebab(s) {
 
 class AtomicOptimizer {
   constructor(options = {}) {
+    // Ensure arrays are arrays (fix for config merging issues)
+    if (options.alwaysAtomic && !Array.isArray(options.alwaysAtomic)) {
+      options.alwaysAtomic = Object.values(options.alwaysAtomic);
+    }
+    if (options.neverAtomic && !Array.isArray(options.neverAtomic)) {
+      options.neverAtomic = Object.values(options.neverAtomic);
+    }
+    
     this.options = {
       enabled: true,
-      threshold: 3,                    // Default threshold
-      naming: 'hash',                  // 'hash' | 'readable'
+      threshold: 3,
+      naming: 'hash',
       cache: true,
       cachePath: './.chaincss-cache',
       minify: true,
-      alwaysAtomic: [],                // Force these props to be atomic
-      neverAtomic: [                   // Never make these atomic
+      mode: 'hybrid',
+      outputStrategy: 'component-first',
+      alwaysAtomic: [],
+      neverAtomic: [
         'content', 'animation', 'transition', 'keyframes',
         'counterIncrement', 'counterReset'
       ],
+      frameworkOutput: {
+        react: false,
+        vue: false,
+        vanilla: true
+      },
+      preserveSelectors: false,
+      verbose: false,
       ...options
     };
     
-    this.usageCount = new Map();        // prop:value -> count
-    this.atomicClasses = new Map();     // prop:value -> { className, prop, value, usageCount }
+    this.usageCount = new Map();
+    this.atomicClasses = new Map();
+    this.componentClassMap = new Map();
     this.stats = {
       totalStyles: 0,
       atomicStyles: 0,
@@ -52,23 +70,21 @@ class AtomicOptimizer {
       
       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');
+        //if (this.options.verbose) 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})`);
+        //if (this.options.verbose) console.log(`Cache threshold (${data.config?.threshold}) differs from current (${this.options.threshold})`);
         return;
       }
       
       this.atomicClasses = new Map(data.atomicClasses || []);
+      this.componentClassMap = new Map(data.componentClassMap || []);
       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);
@@ -84,30 +100,17 @@ class AtomicOptimizer {
         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'))
-          .map(f => ({
-            name: f,
-            time: fs.statSync(path.join(cacheDir, f)).mtime.getTime()
-          }))
-          .sort((a, b) => b.time - a.time);
-        
-        // 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()),
+        componentClassMap: Array.from(this.componentClassMap.entries()),
         stats: this.stats,
         config: {
           threshold: this.options.threshold,
-          naming: this.options.naming
+          naming: this.options.naming,
+          mode: this.options.mode,
+          outputStrategy: this.options.outputStrategy
         }
       };
       
@@ -128,36 +131,46 @@ class AtomicOptimizer {
       if (!style || !style.selectors) continue;
       
       for (const [prop, value] of Object.entries(style)) {
-        if (prop === 'selectors' || prop === 'atRules' || prop === 'hover') continue;
+        if (prop === 'selectors' || prop === 'atRules') continue;
         
-        const key = `${prop}:${value}`;
-        this.usageCount.set(key, (this.usageCount.get(key) || 0) + 1);
-        this.stats.totalStyles++;
+        if (prop === 'hover' && typeof value === 'object') {
+          for (const [hoverProp, hoverValue] of Object.entries(value)) {
+            this.incrementUsage(hoverProp, hoverValue);
+          }
+        } else {
+          this.incrementUsage(prop, value);
+        }
       }
     }
     
     this.stats.uniqueProperties = this.usageCount.size;
   }
   
+  incrementUsage(prop, value) {
+    const key = `${prop}:${value}`;
+    const count = (this.usageCount.get(key) || 0) + 1;
+    this.usageCount.set(key, count);
+    this.stats.totalStyles++;
+    
+    if (this.atomicClasses.has(key)) {
+      this.atomicClasses.get(key).usageCount = count;
+    }
+  }
+  
   shouldBeAtomic(prop, value) {
-    // Never atomic
-    if (this.options.neverAtomic.includes(prop)) return false;
+    if (this.options.mode === 'standard') return false;
+    if (this.options.mode === 'atomic') return true;
     
-    // Always atomic
+    if (this.options.neverAtomic.includes(prop)) return false;
     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;
     
-    // Critical props need double threshold to be atomic
-    if (isCritical && usage < this.options.threshold * 2) {
-      return false;
-    }
-    
+    if (isCritical && usage < this.options.threshold * 2) return false;
     return usage >= this.options.threshold;
   }
   
@@ -168,7 +181,6 @@ class AtomicOptimizer {
       return `c_${hashKey(key)}`;
     }
     
-    // Readable naming
     const kebabProp = kebab(prop);
     const safeValue = String(value).replace(/[^a-z0-9_-]/gi, '-').slice(0, 30);
     return `${kebabProp}-${safeValue}`;
@@ -190,6 +202,13 @@ class AtomicOptimizer {
     
     return this.atomicClasses.get(key).className;
   }
+  
+  getKeyFromClassName(className) {
+    for (const [key, atomic] of this.atomicClasses) {
+      if (atomic.className === className) return key;
+    }
+    return null;
+  }
 
   // ============================================================================
   // CSS Generation
@@ -202,117 +221,164 @@ class AtomicOptimizer {
     
     for (const atomic of sortedClasses) {
       const kebabProp = kebab(atomic.prop);
-      css += `.${atomic.className}{${kebabProp}:${atomic.value}${this.options.minify ? '' : ';'}}\n`;
+      if (this.options.minify) {
+        css += `.${atomic.className}{${kebabProp}:${atomic.value}}`;
+      } else {
+        css += `.${atomic.className} {\n  ${kebabProp}: ${atomic.value};\n}\n`;
+      }
+    }
+    
+    // Debug: Log atomic CSS generation
+    if (this.options.verbose && css) {
+      //console.log(` Generated ${this.atomicClasses.size} atomic classes (${css.length} bytes)`);
+      if (css.length > 0) {
+        //console.log(`First atomic class: ${css.substring(0, 50)}...`);
+      }
     }
     
     return css;
   }
   
-  generateComponentCSS(componentName, style, selectors) {
+  generateComponentCSS(style, selectors) {
     const atomicClasses = [];
-    const standardStyles = {};
-    const hoverStyles = {};
+    const hoverAtomicClasses = [];
     
-    // Separate styles
+    // Track which properties become atomic
     for (const [prop, value] of Object.entries(style)) {
       if (prop === 'selectors' || prop === 'atRules') continue;
       
       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;
+            hoverAtomicClasses.push(this.getOrCreateAtomic(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 += `${selectorStr} {\n`;
+    // COMPONENT-FIRST STRATEGY (Default)
+    if (this.options.outputStrategy === 'component-first') {
+      // Include ALL properties in component CSS
+      const allStyles = {};
       
-      // 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`;
+      // Add all properties (both atomic and non-atomic)
+      for (const [prop, value] of Object.entries(style)) {
+        if (prop !== 'selectors' && prop !== 'atRules' && prop !== 'hover') {
+          allStyles[prop] = value;
         }
       }
       
-      // Standard styles
-      for (const [prop, value] of Object.entries(standardStyles)) {
-        const kebabProp = kebab(prop);
-        componentCSS += `  ${kebabProp}: ${value};\n`;
+      // Generate CSS with ALL properties
+      if (Object.keys(allStyles).length > 0) {
+        if (this.options.minify) {
+          componentCSS += `${selectorStr}{`;
+          for (const [prop, value] of Object.entries(allStyles)) {
+            const kebabProp = kebab(prop);
+            componentCSS += `${kebabProp}:${value};`;
+          }
+          componentCSS += `}`;
+        } else {
+          componentCSS += `${selectorStr} {\n`;
+          for (const [prop, value] of Object.entries(allStyles)) {
+            const kebabProp = kebab(prop);
+            componentCSS += `  ${kebabProp}: ${value};\n`;
+          }
+          componentCSS += `}\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`;
+      // Add hover styles (all hover properties)
+      if (style.hover && typeof style.hover === 'object') {
+        const allHoverStyles = {};
+        for (const [prop, value] of Object.entries(style.hover)) {
+          allHoverStyles[prop] = value;
+        }
+        
+        if (Object.keys(allHoverStyles).length > 0) {
+          if (this.options.minify) {
+            componentCSS += `${selectorStr}:hover{`;
+            for (const [prop, value] of Object.entries(allHoverStyles)) {
+              const kebabProp = kebab(prop);
+              componentCSS += `${kebabProp}:${value};`;
+            }
+            componentCSS += `}`;
+          } else {
+            componentCSS += `${selectorStr}:hover {\n`;
+            for (const [prop, value] of Object.entries(allHoverStyles)) {
+              const kebabProp = kebab(prop);
+              componentCSS += `  ${kebabProp}: ${value};\n`;
+            }
+            componentCSS += `}\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();
-    
-    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);
+    // UTILITY-FIRST STRATEGY (Advanced)
+    else {
+      const standardStyles = {};
+      const hoverStandardStyles = {};
+      
+      for (const [prop, value] of Object.entries(style)) {
+        if (prop === 'selectors' || prop === 'atRules') continue;
+        
+        if (prop === 'hover' && typeof value === 'object') {
+          for (const [hoverProp, hoverValue] of Object.entries(value)) {
+            if (!this.shouldBeAtomic(hoverProp, hoverValue)) {
+              hoverStandardStyles[hoverProp] = hoverValue;
+            }
+          }
+        } else if (!this.shouldBeAtomic(prop, value)) {
+          standardStyles[prop] = value;
+        }
+      }
+      
+      if (Object.keys(standardStyles).length > 0) {
+        if (this.options.minify) {
+          componentCSS += `${selectorStr}{`;
+          for (const [prop, value] of Object.entries(standardStyles)) {
+            const kebabProp = kebab(prop);
+            componentCSS += `${kebabProp}:${value};`;
+          }
+          componentCSS += `}`;
+        } else {
+          componentCSS += `${selectorStr} {\n`;
+          for (const [prop, value] of Object.entries(standardStyles)) {
+            const kebabProp = kebab(prop);
+            componentCSS += `  ${kebabProp}: ${value};\n`;
+          }
+          componentCSS += `}\n`;
+        }
+      }
+      
+      if (Object.keys(hoverStandardStyles).length > 0) {
+        if (this.options.minify) {
+          componentCSS += `${selectorStr}:hover{`;
+          for (const [prop, value] of Object.entries(hoverStandardStyles)) {
+            const kebabProp = kebab(prop);
+            componentCSS += `${kebabProp}:${value};`;
+          }
+          componentCSS += `}`;
+        } else {
+          componentCSS += `${selectorStr}:hover {\n`;
+          for (const [prop, value] of Object.entries(hoverStandardStyles)) {
+            const kebabProp = kebab(prop);
+            componentCSS += `  ${kebabProp}: ${value};\n`;
+          }
+          componentCSS += `}\n`;
         }
       }
     }
     
-    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.slice(0, 10));
-    }
-  }
-  
-  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}%`
+      css: componentCSS,
+      atomicClasses,
+      hoverAtomicClasses
     };
   }
 
@@ -330,18 +396,33 @@ class AtomicOptimizer {
       };
     }
     
-    // Normalize input to array
-    const styleArray = Array.isArray(stylesInput) 
-      ? stylesInput 
-      : typeof stylesInput === 'object' 
-        ? Object.values(stylesInput) 
-        : [];
+    // Reset stats
+    this.stats = {
+      totalStyles: 0,
+      atomicStyles: 0,
+      standardStyles: 0,
+      uniqueProperties: 0,
+      savings: 0
+    };
+    this.usageCount.clear();
+    this.componentClassMap.clear();
+    
+    // Normalize input
+    let styleArray = [];
+    if (Array.isArray(stylesInput)) {
+      styleArray = stylesInput;
+    } else if (typeof stylesInput === 'object') {
+      styleArray = Object.values(stylesInput).filter(v => v && typeof v === 'object');
+    }
     
-    // Track usage counts
+    if (styleArray.length === 0) {
+      return { css: '', map: {}, stats: this.getStats(), atomicCSS: '', componentCSS: '' };
+    }
+    
+    // FIRST: Track usage counts
     this.trackStyles(styleArray);
     
-    // Generate CSS
-    let atomicCSS = this.generateAtomicCSS();
+    // SECOND: Generate component CSS (this populates atomicClasses via getOrCreateAtomic)
     let componentCSS = '';
     const classMap = {};
     
@@ -350,42 +431,96 @@ class AtomicOptimizer {
       
       const selectors = style.selectors;
       const selectorKey = selectors.join(', ');
+      const { css, atomicClasses, hoverAtomicClasses } = this.generateComponentCSS(style, selectors);
+      componentCSS += css;
       
-      // 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));
+      if (this.options.outputStrategy === 'utility-first') {
+        if (atomicClasses.length > 0) {
+          classMap[selectorKey] = atomicClasses.join(' ');
+        }
+        if (hoverAtomicClasses.length > 0) {
+          classMap[`${selectorKey}:hover`] = hoverAtomicClasses.join(' ');
         }
       }
-      classMap[selectorKey] = atomicClassesForSelector.join(' ');
+      
+      this.componentClassMap.set(selectorKey, {
+        atomicClasses,
+        hoverAtomicClasses,
+        selectors
+      });
     }
     
-    // Validation
-    this.validateStyleOrder(styleArray);
+    // THIRD: Generate atomic CSS (now atomicClasses is populated!)
+    const atomicCSS = this.generateAtomicCSS();
+    
+    // Combine CSS
+    const finalCSS = atomicCSS + componentCSS;
+    
+    // Log stats if verbose
+    if (this.options.verbose) {
+      const stats = this.getStats();
+      //console.log(` Atomic Optimization Stats:`);
+      //console.log(`   Output strategy: ${this.options.outputStrategy}`);
+      //console.log(`   Total styles tracked: ${stats.totalStyles}`);
+      //console.log(`   Atomic classes created: ${this.atomicClasses.size}`);
+      //console.log(`   Atomic CSS length: ${atomicCSS.length} bytes`);
+      //console.log(`   Component CSS length: ${componentCSS.length} bytes`);
+      //console.log(`   Total CSS length: ${finalCSS.length} bytes`);
+      //console.log(`   Savings: ${stats.savings}`);
+      
+      if (atomicCSS.length === 0 && this.atomicClasses.size > 0) {
+        //console.log(`    WARNING: ${this.atomicClasses.size} atomic classes exist but generated CSS is empty!`);
+      }
+    }
     
     // Save cache
     if (this.options.cache) {
       this.saveCache();
     }
     
-    // Calculate savings
+    return {
+      css: finalCSS,
+      map: classMap,
+      stats: this.getStats(),
+      atomicCSS: atomicCSS,
+      componentCSS: componentCSS,
+      componentMap: this.componentClassMap
+    };
+  }
+  
+  getStats() {
     const savings = this.stats.totalStyles > 0 
-      ? ((this.stats.totalStyles - this.atomicClasses.size) / this.stats.totalStyles * 100).toFixed(1)
+      ? ((this.stats.totalStyles - this.stats.atomicStyles) / this.stats.totalStyles * 100).toFixed(1)
       : 0;
     
     return {
-      css: (atomicCSS + componentCSS).trim(),
-      map: classMap,
-      stats: this.getStats(),
-      atomicCSS: atomicCSS.trim(),
-      componentCSS: componentCSS.trim()
+      totalStyles: this.stats.totalStyles,
+      atomicStyles: this.stats.atomicStyles,
+      standardStyles: this.stats.standardStyles,
+      uniqueProperties: this.stats.uniqueProperties,
+      savings: `${savings}%`
     };
   }
+  
+  getAtomicClass(prop, value) {
+    const key = `${prop}:${value}`;
+    const atomic = this.atomicClasses.get(key);
+    return atomic ? atomic.className : null;
+  }
+  
+  getAllAtomicClasses() {
+    return Array.from(this.atomicClasses.values());
+  }
+  
+  clearCache() {
+    this.atomicClasses.clear();
+    this.componentClassMap.clear();
+    this.usageCount.clear();
+    if (this.options.cache && fs.existsSync(this.options.cachePath)) {
+      fs.unlinkSync(this.options.cachePath);
+    }
+    //console.log('Atomic optimizer cache cleared');
+  }
 }
 
 module.exports = { AtomicOptimizer };