chaincss 1.13.1 → 1.13.3

package/node/chaincss.js

@@ -4,7 +4,7 @@ const fs = require('fs');
 const Module = require('module');
 const chokidar = require('chokidar');
 const CleanCSS = require('clean-css');
-const { $, run, compile: originalCompile, chain } = require('./btt');
+const { $, run, compile: originalCompile, chain, setAtomicOptimizer, createTokens, responsive, tokens } = require('./btt');
 const ChainCSSPrefixer = require('./prefixer.js');
 const strVal = require('./strVal.js');
 const { AtomicOptimizer } = require('./atomic-optimizer');
@@ -17,11 +17,21 @@ let atomicOptimizer = null;
 let config = {
   atomic: {
     enabled: false,
-    threshold: 3,
-    naming: 'hash',
+    threshold: 2,
+    naming: 'hash',                    
     cache: true,
     cachePath: './.chaincss-cache',
-    minify: true
+    minify: true,
+    mode: 'hybrid',                 
+    alwaysAtomic: [],
+    neverAtomic: ['content', 'animation', 'transition', 'keyframes', 'counterIncrement', 'counterReset'],
+    frameworkOutput: {
+      react: false,
+      vue: false,
+      vanilla: true
+    },
+    preserveSelectors: false,
+    verbose: false
   },
   prefixer: {
     enabled: true,
@@ -35,9 +45,14 @@ let config = {
 let prefixer = new ChainCSSPrefixer(config.prefixer);
 
 function deft_to_userConf(target, source) {
+  // Handle arrays specially
+  if (Array.isArray(source)) {
+    return source; // Return array as-is, don't merge
+  }
+  
   const result = { ...target };
   for (const key in source) {
-    if (source[key] instanceof Object && key in target) {
+    if (source[key] instanceof Object && !Array.isArray(source[key]) && key in target) {
       result[key] = deft_to_userConf(target[key], source[key]);
     } else {
       result[key] = source[key];
@@ -50,8 +65,7 @@ const ensureConfigExists = () => {
   const configPath = path.join(process.cwd(), 'chaincss.config.cjs');
   const configExists = fs.existsSync(configPath);
   if (!configExists && !process.env.CHAINCSS_SKIP_CONFIG) {
-    const defaultConfig = strVal.userConf;
-    fs.writeFileSync(configPath, defaultConfig);
+    fs.writeFileSync(configPath, strVal.userConf);
     console.log('-- Successfully created config file: ./chaincss.config.cjs\n');
   }
 };
@@ -61,7 +75,35 @@ const loadUserConfig = () => {
   if (fs.existsSync(configPath)) {
     try {
       const userConfig = require(configPath);
-      config = deft_to_userConf(config, userConfig);
+      
+      // Deep merge that preserves arrays
+      function deepMerge(target, source) {
+        const result = { ...target };
+        for (const key in source) {
+          if (Array.isArray(source[key])) {
+            result[key] = [...source[key]]; // Copy array
+          } else if (source[key] instanceof Object && key in target) {
+            result[key] = deepMerge(target[key], source[key]);
+          } else {
+            result[key] = source[key];
+          }
+        }
+        return result;
+      }
+      
+      config = deepMerge(config, userConfig);
+      
+      // Ensure atomic arrays are arrays
+      if (config.atomic) {
+        if (!Array.isArray(config.atomic.alwaysAtomic)) {
+          config.atomic.alwaysAtomic = [];
+        }
+        if (!Array.isArray(config.atomic.neverAtomic)) {
+          config.atomic.neverAtomic = [];
+        }
+      }
+      
+      // Validate prefixer browsers
       if (config.prefixer) {
         if (typeof config.prefixer.browsers === 'string') {
           config.prefixer.browsers = config.prefixer.browsers.split(',').map(b => b.trim());
@@ -78,9 +120,14 @@ const loadUserConfig = () => {
 
 const initAtomicOptimizer = () => {
   if (config.atomic.enabled) {
+    //if (config.atomic.verbose) {
+      //console.log('--Initializing Atomic Optimizer with config:', JSON.stringify(config.atomic, null, 2));
+    //}
+    
     atomicOptimizer = new AtomicOptimizer(config.atomic);
-  } else {
-    console.log('-- Atomic optimizer disabled\n');
+    
+    // Inject the configured atomic optimizer into btt
+    setAtomicOptimizer(atomicOptimizer);
   }
 };
 
@@ -98,7 +145,11 @@ function parseArgs(args) {
     prefixerMode: null,
     sourceMap: null,
     sourceMapInline: false,
-    atomic: false
+    atomic: false,
+    atomicMode: null,
+    atomicNaming: null,
+    atomicVerbose: false,
+    preserveSelectors: false
   };
   
   for (let i = 0; i < args.length; i++) {
@@ -120,12 +171,20 @@ function parseArgs(args) {
       result.sourceMapInline = true;
     } else if (arg === '--atomic') {
       result.atomic = true;
+    } else if (arg === '--atomic-mode' && args[i + 1]) {
+      result.atomicMode = args[i + 1];
+      i++;
+    } else if (arg === '--atomic-naming' && args[i + 1]) {
+      result.atomicNaming = args[i + 1];
+      i++;
+    } else if (arg === '--atomic-verbose') {
+      result.atomicVerbose = true;
+    } else if (arg === '--preserve-selectors') {
+      result.preserveSelectors = true;
     } else if (!result.inputFile) {
       result.inputFile = arg;
     } else if (!result.outputFile) {
       result.outputFile = arg;
-    }else if (arg === '--validate-themes') {
-      result.validateThemes = true;
     }
   }
   return result;
@@ -150,14 +209,18 @@ const applyCliOptions = (cliOptions) => {
   if (cliOptions.atomic) {
     config.atomic.enabled = true;
   }
-  /*if (cliOptions.validateThemes) {
-    const configPath = path.join(process.cwd(), 'chaincss.config.cjs');
-    if (fs.existsSync(configPath)) {
-        await import('./theme-validator.js').then(module => {
-        module.validateThemeFiles(configPath);
-      });
-    }
-  }*/
+  if (cliOptions.atomicMode && ['atomic', 'standard', 'hybrid'].includes(cliOptions.atomicMode)) {
+    config.atomic.mode = cliOptions.atomicMode;
+  }
+  if (cliOptions.atomicNaming && ['hash', 'readable'].includes(cliOptions.atomicNaming)) {
+    config.atomic.naming = cliOptions.atomicNaming;
+  }
+  if (cliOptions.atomicVerbose) {
+    config.atomic.verbose = true;
+  }
+  if (cliOptions.preserveSelectors) {
+    config.atomic.preserveSelectors = true;
+  }
 };
 
 function watch(inputFile, outputFile) {
@@ -190,7 +253,7 @@ const transpilerModule = {
   chain
 };
 
-// Native module-based JCSS file processor (replaces vm2)
+// Native module-based JCSS file processor
 const processJCSSFile = (filePath) => {
   const abs = path.resolve(filePath);
   
@@ -222,6 +285,9 @@ const processJCSSFile = (filePath) => {
       'compile',
       'chain',
       'get',
+      'createTokens',    
+      'responsive',      
+      'tokens', 
       content
     );
     compiledCache.set(abs, compiledFn);
@@ -238,7 +304,10 @@ const processJCSSFile = (filePath) => {
       run,
       originalCompile,
       chain,
-      get
+      get,
+      createTokens,    
+      responsive,      
+      tokens 
     );
   } catch (err) {
     console.error(`Error processing ${abs}:`, err.message);
@@ -263,6 +332,9 @@ const processScript = (scriptBlock, filename) => {
       'compile',
       'chain',
       'get',
+      'createTokens',
+      'responsive',
+      'tokens',
       '__filename',
       '__dirname',
       scriptBlock
@@ -271,7 +343,7 @@ const processScript = (scriptBlock, filename) => {
   }
   
   try {
-    compiledFn($, run, originalCompile, chain, get, filename, dirname);
+    compiledFn($, run, originalCompile, chain, get, createTokens, responsive, tokens, filename, dirname);
   } catch (err) {
     console.error(`Error processing script in ${filename}:`, err.message);
     throw err;
@@ -289,14 +361,16 @@ const processJavascriptBlocks = (content, inputpath) => {
       outputCSS += blocks[i];
     } else {
       const scriptBlock = blocks[i];
-      try {
-        const blockCSS = processScript(scriptBlock, inputpath);
-        if (typeof blockCSS !== 'object' && typeof blockCSS !== 'undefined') {
-          outputCSS += blockCSS;
+      if (scriptBlock && scriptBlock.trim()) {
+        try {
+          const blockCSS = processScript(scriptBlock, inputpath);
+          if (typeof blockCSS !== 'object' && typeof blockCSS !== 'undefined') {
+            outputCSS += blockCSS;
+          }
+        } catch (err) {
+          console.error(`Error processing script block:`, err.stack);
+          throw err;
         }
-      } catch (err) {
-        console.error(`Error processing script block:`, err.stack);
-        throw err;
       }
     }
   }
@@ -351,6 +425,26 @@ const processAndMinifyCss = async (css, inputFile, outputFile) => {
   return { css: finalCss, map: finalSourceMap };
 };
 
+const writeFrameworkOutput = (outputDir, result) => {
+  const frameworkOutputs = [];
+  
+  if (config.atomic.frameworkOutput.react && result.frameworkOutput) {
+    const reactPath = path.join(outputDir, 'atomic.react.js');
+    fs.writeFileSync(reactPath, result.frameworkOutput, 'utf8');
+    frameworkOutputs.push(`React: ${reactPath}`);
+  }
+  
+  if (config.atomic.frameworkOutput.vue && result.frameworkOutput) {
+    const vuePath = path.join(outputDir, 'atomic.vue.js');
+    fs.writeFileSync(vuePath, result.frameworkOutput, 'utf8');
+    frameworkOutputs.push(`Vue: ${vuePath}`);
+  }
+  
+  if (frameworkOutputs.length > 0) {
+    console.log(`Framework outputs: ${frameworkOutputs.join(', ')}`);
+  }
+};
+
 const processor = async (inputFile, outputFile) => {
   try {
     const input = path.resolve(inputFile);
@@ -365,6 +459,7 @@ const processor = async (inputFile, outputFile) => {
     }
     const stylePath = path.join(outputDir, 'global.css');
     const result = await processAndMinifyCss(processedCSS, input, stylePath);
+    
     if (result.css) {
       fs.writeFileSync(stylePath, result.css, 'utf8');
       if (result.map) {
@@ -373,38 +468,81 @@ const processor = async (inputFile, outputFile) => {
       }
       
       // ========== ATOMIC CLASS MAP GENERATION ==========
-      if (atomicOptimizer && config.atomic.enabled && chain.classMap && Object.keys(chain.classMap).length > 0) {
-        // Write map.json (selector → atomic class string)
+      // ALWAYS generate atomic files when atomic optimizer is enabled
+      if (atomicOptimizer && config.atomic.enabled) {
+        
+        // Get atomic classes from the optimizer
+        const atomicClasses = atomicOptimizer.getAllAtomicClasses();
+        const atomicClassMap = {};
+        
+        // Build class map from component map
+        if (atomicOptimizer.componentMap) {
+          for (const [selector, data] of atomicOptimizer.componentMap) {
+            if (data.atomicClasses && data.atomicClasses.length > 0) {
+              atomicClassMap[selector] = data.atomicClasses.join(' ');
+            }
+            if (data.hoverAtomicClasses && data.hoverAtomicClasses.length > 0) {
+              atomicClassMap[`${selector}:hover`] = data.hoverAtomicClasses.join(' ');
+            }
+          }
+        }
+        
+        // Write map.json
         const mapJsonPath = path.join(outputDir, 'global.map.json');
         const mapData = {
-          version: '1.0.0',
+          version: '2.0.0',
           generated: new Date().toISOString(),
           input: inputFile,
           output: stylePath,
           atomicEnabled: true,
+          mode: config.atomic.mode,
+          naming: config.atomic.naming,
+          outputStrategy: config.atomic.outputStrategy,
           threshold: config.atomic.threshold,
-          classMap: chain.classMap,
-          stats: chain.atomicStats
+          classMap: atomicClassMap,
+          atomicClasses: atomicClasses.map(a => ({ className: a.className, prop: a.prop, value: a.value })),
+          stats: chain.atomicStats || atomicOptimizer.getStats()
         };
         fs.writeFileSync(mapJsonPath, JSON.stringify(mapData, null, 2), 'utf8');
-        console.log(`✅ Class map: ${mapJsonPath}`);
         
-        // Write JS module for easy import
+        
+        // Write JS module
         const jsPath = path.join(outputDir, 'global.classes.js');
-        const jsContent = `/**
+        let jsContent = `/**
  * ChainCSS Atomic Class Map
  * Generated: ${new Date().toISOString()}
+ * Mode: ${config.atomic.mode}
+ * Output Strategy: ${config.atomic.outputStrategy}
+ * Naming: ${config.atomic.naming}
  * Threshold: ${config.atomic.threshold}
  */
 
-export const classMap = ${JSON.stringify(chain.classMap, null, 2)};
+export const classMap = ${JSON.stringify(atomicClassMap, null, 2)};
+
+export const atomicClasses = ${JSON.stringify(atomicClasses.map(a => a.className), null, 2)};
 
 export const getClass = (selector) => classMap[selector] || '';
 
+export const getAtomicClass = (prop, value) => {
+  const atomic = atomicClasses.find(a => a.prop === prop && a.value === value);
+  return atomic ? atomic.className : null;
+};
+
+export const getAllClasses = () => Object.values(classMap).join(' ');
+
+export const applyClasses = (element, selector) => {
+  if (!element) return;
+  const classes = getClass(selector);
+  if (classes) {
+    element.className = classes;
+  }
+  return classes;
+};
+
 export default classMap;
 `;
+        
         fs.writeFileSync(jsPath, jsContent, 'utf8');
-        console.log(`✅ JS module: ${jsPath}`);
         
         // Write TypeScript definitions
         const dtsPath = path.join(outputDir, 'global.classes.d.ts');
@@ -413,13 +551,24 @@ export default classMap;
  * Generated: ${new Date().toISOString()}
  */
 
+export interface AtomicClass {
+  className: string;
+  prop: string;
+  value: string;
+}
+
 export const classMap: Record<string, string>;
+export const atomicClasses: string[];
 export const getClass: (selector: string) => string;
+export const getAtomicClass: (prop: string, value: string) => string | null;
+export const getAllClasses: () => string;
+export const applyClasses: (element: HTMLElement | null, selector: string) => string | undefined;
+
 declare const _default: Record<string, string>;
 export default _default;
 `;
         fs.writeFileSync(dtsPath, dtsContent, 'utf8');
-        console.log(`✅ TypeScript definitions: ${dtsPath}`);
+        
         
         // Update manifest
         const manifestPath = path.join(outputDir, 'chaincss-manifest.json');
@@ -431,18 +580,22 @@ export default _default;
         }
         
         manifest[path.basename(stylePath)] = {
+          version: '2.0.0',
           css: path.basename(stylePath),
           map: path.basename(mapJsonPath),
           js: path.basename(jsPath),
           dts: path.basename(dtsPath),
           generated: new Date().toISOString(),
           input: inputFile,
+          mode: config.atomic.mode,
+          outputStrategy: config.atomic.outputStrategy,
+          naming: config.atomic.naming,
           threshold: config.atomic.threshold,
-          stats: chain.atomicStats
+          atomicClassesCount: atomicClasses.length,
+          stats: chain.atomicStats || atomicOptimizer.getStats()
         };
         
         fs.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2), 'utf8');
-        console.log(`✅ Manifest: ${manifestPath}`);
       }
     }
   } catch (err) {

package/node/prefixer.js

@@ -39,7 +39,7 @@ class ChainCSSPrefixer {
   }
   determineMode() {
     if (this.config.mode === 'full' && !this.hasAutoprefixer) {
-      console.warn('⚠️ Full mode requested but autoprefixer not installed. Falling back to lightweight mode.');
+      console.warn('Full mode requested but autoprefixer not installed. Falling back to lightweight mode.');
       console.warn('   To use full mode: npm install autoprefixer postcss caniuse-db browserslist\n');
       return 'lightweight';
     }

package/node/strVal.js

@@ -1,18 +1,34 @@
 const strVal = {
-  userConf: `// Project Configuration
+  userConf: `// ChainCSS Configuration
+// Generated: ${new Date().toISOString()}
+
 module.exports = {
   atomic: {
-    enabled: true,
-    threshold: 3,
-    naming: 'hash',
-    cache: true,
+    enabled: true,          // Enable atomic CSS optimization
+    threshold: 3,            // Minimum usage count for atomic conversion
+    naming: 'hash',          // 'hash' (c_3b82f6) or 'readable' (bg-blue-500)
+    cache: true,             // Cache atomic classes between builds
     cachePath: './.chaincss-cache',
-    minify: true
+    minify: true,            // Minify CSS output
+    mode: 'hybrid',          // 'atomic' | 'standard' | 'hybrid'
+    alwaysAtomic: [],        // Force these properties to be atomic
+    neverAtomic: [           // Never make these properties atomic
+      'content', 'animation', 'transition', 'keyframes',
+      'counterIncrement', 'counterReset'
+    ],
+    outputStrategy: 'component-first',
+    frameworkOutput: {
+      react: false,          // Generate React hooks
+      vue: false,            // Generate Vue composables
+      vanilla: true          // Generate vanilla JS class map
+    },
+    preserveSelectors: false, // Keep original selector names in comments
+    verbose: true            // Show detailed atomic optimization stats
   },
   prefixer: {
-    mode: 'auto',
-    browsers: ['> 0.5%', 'last 2 versions', 'not dead'],
     enabled: true,
+    mode: 'auto',            // 'auto' | 'always' | 'never'
+    browsers: ['> 0.5%', 'last 2 versions', 'not dead'],
     sourceMap: true,
     sourceMapInline: false
   }
@@ -25,18 +41,51 @@ Usage:
   chaincss <inputFile> <outputFile> [options]
 
 Options:
-  --watch               Watch for changes
+  --watch               Watch for changes and auto-recompile
   --no-prefix          Disable automatic prefixing
   --prefixer-mode <mode> Set prefixer mode (auto|lightweight|full)
   --browsers <list>    Browser support list (comma-separated)
   --no-source-map      Disable source maps
   --source-map-inline  Use inline source maps
+  
+  # Atomic CSS Optimization
+  --atomic              Enable atomic CSS optimization
+  --atomic-mode <mode>  Atomic mode: atomic, standard, hybrid (default: hybrid)
+  --atomic-naming <scheme> Naming scheme: hash, readable (default: hash)
+  --atomic-verbose      Show detailed atomic optimization stats
+  --preserve-selectors  Keep original selector names in comments
+  --no-atomic-cache     Disable atomic CSS cache
+  
+  # Output Control
+  --no-minify           Disable CSS minification
+  
+  # Help
+  --help, -h            Show this help message
+  --version, -v         Show version number
 
 Examples:
-  chaincss style.jcss style.css
-  chaincss style.jcss style.css --watch
-  chaincss style.jcss style.css --browsers ">5%,last 2 versions"
-  chaincss style.jcss style.css --no-prefix
+  # Basic compilation
+  chaincss style.jcss dist/
+  
+  # Watch mode for development
+  chaincss style.jcss dist/ --watch
+  
+  # Atomic CSS optimization
+  chaincss style.jcss dist/ --atomic
+  
+  # With custom naming scheme
+  chaincss style.jcss dist/ --atomic --atomic-naming readable
+  
+  # Verbose output for debugging
+  chaincss style.jcss dist/ --atomic --atomic-verbose
+  
+  # Custom browser support
+  chaincss style.jcss dist/ --browsers "> 1%, last 2 versions, not dead"
+
+Notes:
+  - Atomic CSS optimization reduces CSS size by reusing common style patterns
+  - Use --watch during development for instant updates
+  - Use --atomic for production builds to optimize CSS bundle size
     `
 }
 

package/node/theme-validator.js

@@ -8,7 +8,7 @@ export function validateThemeFiles(configPath) {
   
   const { contract, themes } = config;
   
-  console.log('\n🎨 Validating Theme Contract...\n');
+  console.log('\nValidating Theme Contract...\n');
   
   const errors = [];
   
@@ -16,9 +16,9 @@ export function validateThemeFiles(configPath) {
     const themeName = theme.name || `theme-${index}`;
     try {
       validateTheme(contract, theme.values);
-      console.log(`✅ ${themeName}: Valid`);
+      console.log(`${themeName}: Valid`);
     } catch (err) {
-      errors.push(`❌ ${themeName}: ${err.message}`);
+      errors.push(`${themeName}: ${err.message}`);
     }
   });
   
@@ -28,5 +28,5 @@ export function validateThemeFiles(configPath) {
     process.exit(1);
   }
   
-  console.log('\n✅ All themes valid!\n');
+  console.log('\nAll themes valid!\n');
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chaincss",
-  "version": "1.13.1",
+  "version": "1.13.3",
   "description": "Chainable CSS-in-JS with build-time compilation, atomic CSS, and zero-runtime options",
   "keywords": [
     "css",
@@ -61,11 +61,20 @@
       },
       "default": "./browser/react-hooks.js"
     },
-    "./browser/*": {
+    "./vue": {
+      "types": "./types.d.ts",
+      "browser": {
+        "import": "./browser/vue-composables.js",
+        "require": "./browser/vue-composables.js"
+      },
+      "default": "./browser/vue-composables.js"
+    },
+    "./browser": {
       "browser": {
         "import": "./browser/*",
         "require": "./browser/*"
-      }
+      },
+      "default": "./browser/index.js"
     },
     "./node/*": {
       "node": {
@@ -120,6 +129,7 @@
     "clean-css": "^5.3.3"
   },
   "peerDependencies": {
+    "vue": "^3.0.0",
     "react": ">=16.8.0",
     "autoprefixer": "^10.0.0",
     "postcss": "^8.5.6",

package/types.d.ts

@@ -250,9 +250,10 @@ export function recipe<TVariants extends Record<string, Record<string, any>>>(
   options: RecipeOptions<TVariants>
 ): Recipe<TVariants>;
 
-//================
+// ============================================================================
 // THEME CONTRACT
-//================
+// ============================================================================
+
 export interface ThemeContract {
   [key: string]: string | Record<string, any>;
 }
@@ -274,4 +275,51 @@ export function createTokens(
 export function validateTheme(
   contract: ThemeContract,
   theme: any
-): boolean;
+): boolean;
+
+// ============================================================================
+// Vue JS composables
+// ============================================================================
+
+declare module 'chaincss/vue' {
+  import { Ref, ComputedRef, Component } from 'vue';
+
+  export interface UseAtomicClassesOptions {
+    atomic?: boolean;
+    global?: boolean;
+  }
+
+  export interface UseAtomicClassesReturn {
+    classes: Ref<Record<string, any>>;
+    cx: (name: string) => any;
+    cn: (...names: string[]) => string;
+  }
+
+  export function useAtomicClasses(
+    styles: Record<string, any> | Ref<Record<string, any>> | ComputedRef<Record<string, any>>,
+    options?: UseAtomicClassesOptions
+  ): UseAtomicClassesReturn;
+
+  export const ChainCSSGlobal: Component<{
+    styles: Record<string, any>;
+    atomic?: boolean;
+  }>;
+
+  export function createStyledComponent(
+    styles: Record<string, any> | ((props: any) => Record<string, any>),
+    options?: {
+      name?: string;
+      atomic?: boolean;
+      props?: Record<string, any>;
+    }
+  ): Component;
+
+  export function createTheme<T extends Record<string, any>>(
+    themes: T
+  ): {
+    currentTheme: Ref<keyof T>;
+    themeStyles: ComputedRef<T[keyof T]>;
+    setTheme: (themeName: keyof T) => void;
+    toggleTheme: () => void;
+  };
+}