@melcanz85/chaincss 1.9.0 → 1.9.3

package/README.md

@@ -1,5 +1,6 @@
 # ChainCSS
 
+![npm downloads](https://img.shields.io/npm/dm/@melcanz85/chaincss)
 [![npm version](https://img.shields.io/npm/v/@melcanz85/chaincss.svg)](https://www.npmjs.com/package/@melcanz85/chaincss)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
@@ -11,17 +12,7 @@ ChainCSS is a revolutionary CSS-in-JS solution that gives you **two powerful mod
 
 **Runtime hooks** → Dynamic, prop-based styles when you need them
 
-"The performance of vanilla CSS with the power of JavaScript — now with **CHOICE.**"
 
-```javascript
-    // Same beautiful API, two powerful modes
-    const button = $()
-      .color('white')
-      .backgroundColor('#667eea')
-      .padding('1rem')
-      .borderRadius('4px')
-      .block('.btn');
-````
 ## Installation
 
 ```bash
@@ -29,6 +20,19 @@ ChainCSS is a revolutionary CSS-in-JS solution that gives you **two powerful mod
     npm install @melcanz85/chaincss
 ```
 
+### File Structure
+
+```text
+    your-project/
+    ├── node_module
+    ├── src/
+    │   ├── main.jcss           # Entry point - imports & compiles
+    │   └── *.jcss              # Your style definitions             
+    ├── style/                  # Generated CSS will be stored stored here
+    ├── index.html              # Your web page
+    └── package.json
+```
+
 ## Two Powerful Modes - One API
 
 ### Mode 1: Build-time (Zero Runtime)
@@ -36,7 +40,7 @@ ChainCSS is a revolutionary CSS-in-JS solution that gives you **two powerful mod
 **Perfect for:** Static styles, layouts, design systems — anything that doesn't change.
 
 ```javascript
-    // chaincss/button.jcss
+    // src/button.jcss
     const button = $()
       .backgroundColor('#667eea')
       .color('white')
@@ -46,16 +50,31 @@ ChainCSS is a revolutionary CSS-in-JS solution that gives you **two powerful mod
 
     module.exports = { button };
 ````
+**in your main.jcss**
 
 ```javascript
-    // chaincss/processor.js
-    const chaincss = require('@melcanz85/chaincss');
+  <@
+    const button = get('./button.js');
 
-    chaincss.processor('./chaincss/main.jcss', './dist/style.css');
-    //  Outputs pure CSS: .btn { background: #667eea; color: white; ... }
-    //  Zero JavaScript sent to browser
-    //  Max performance, smallest bundle
+    compile(button);
+  @>
+```
+..then run this in terminal/command prompt
+
+```bash
+  npx chaincss ./src/main.jcss ./style --watch 
+  # ./style/global.css generated!
+````
+OR with vanilla nodejs project
+
+```bash
+  npx chaincss ./src/main.jcss ./style --watch & node server.js
+  # ./style/global.css generated!
 ````
+* Note: running `npx chaincss ./src/main.jcss ./style --watch ` for the first time will
+        generate chaincss.config.js with default values. You can edit this to 
+        customize your build!.
+
 ### Mode 2: Runtime (React Hooks)
 
 **Perfect for:** Dynamic styles that respond to props, state, or themes.
@@ -79,9 +98,11 @@ ChainCSS is a revolutionary CSS-in-JS solution that gives you **two powerful mod
       
       return <button className={styles.button}>{children}</button>;
     }
-    //  Styles injected at runtime
-    //  Automatic cleanup on unmount
-    //  Fully dynamic based on props
+    // ✅ Styles injected at runtime
+    // ✅ Automatic cleanup on unmount
+    // ✅ Fully dynamic based on props
+
+
 ```
 
 ## Use BOTH in the Same Project!
@@ -107,25 +128,25 @@ ChainCSS is a revolutionary CSS-in-JS solution that gives you **two powerful mod
 
 ## Features at a Glance
 
-Feature             Status      Description
+    Feature             Status      Description
 
-Zero Runtime        ✅          Pure CSS output, no JS in browser
+    Zero Runtime        ✅          Pure CSS output, no JS in browser
 
-React Hooks         ✅          Dynamic runtime styles when needed
+    React Hooks         ✅          Dynamic runtime styles when needed
 
-Atomic CSS          ✅          90% smaller CSS files
+    Atomic CSS          ✅          90% smaller CSS files
 
-TypeScript          ✅          First-class type support
+    TypeScript          ✅          First-class type support
 
-Design Tokens       ✅          Centralized design system
+    Design Tokens       ✅          Centralized design system
 
-Auto-prefixing      ✅          Built-in + full Autoprefixer
+    Auto-prefixing      ✅          Built-in + full Autoprefixer
 
-Source Maps         ✅          Debug your .jcss files
+    Source Maps         ✅          Debug your .jcss files
 
-Watch Mode          ✅          Instant recompilation
+    Watch Mode          ✅          Instant recompilation
 
-VM Security         ✅          Safe code execution
+    VM Security         ✅          Safe code execution
 
 
 ## The ChainCSS API
@@ -150,19 +171,7 @@ VM Security         ✅          Safe code execution
         .boxShadow('0 0 0 3px rgba(102,126,234,0.5)')
       .block('.btn');
 ````
-### File Structure
 
-```text
-    your-project/
-    ├── chaincss/
-    │   ├── main.jcss           # Entry point - imports & compiles
-    │   ├── processor.cjs        # Build script
-    │   └── *.jcss              # Your style definitions
-    ├── src/
-    │   └── style/
-    │       └── global.css      # Generated CSS
-    └── package.json
-```
 ### Basic Example
 
 **chaincss/button.jcss**
@@ -187,15 +196,6 @@ VM Security         ✅          Safe code execution
     @>
 ````
 
-**chaincss/processor.js**
-
-```javascript
-
-const chaincss = require('@melcanz85/chaincss');
-
-chaincss.processor('./chaincss/main.jcss', './src/style');
-// Generates ./src/style/global.css
-```
 ## Advanced Features
 
 ### Design Tokens
@@ -249,22 +249,19 @@ ChainCSS uses **secure VM sandboxing** to safely execute your .jcss files. No ev
 ### With Node.js (Vanilla)
 
 ```bash
-    # 1. Install
-    npm install @melcanz85/chaincss
+# 1. Install
+npm install @melcanz85/chaincss
 
-    # 2. Create processor.cjs
-    echo "const chaincss = require('@melcanz85/chaincss');
-    chaincss.processor('./chaincss/main.jcss', './dist');" > processor.js
+# 2. Create your first .jcss file
+mkdir chaincss
+echo "const hello = $().color('red').block('.hello');
+compile({ hello });" > chaincss/main.jcss
 
-    # 3. Create your first .jcss file
-    mkdir chaincss
-    echo "const hello = $().color('red').block('.hello');
-    compile({ hello });" > chaincss/main.jcss
-
-    # 4. Build
-    node processor.js
-    # ✅ ./dist/global.css generated!
+# 3. Build
+  npx chaincss ./src/main.jcss ./style --watch & node server.js
+# ./style/global.css generated!
 ```
+
 ### With React + Vite
 
 ```bash
@@ -278,6 +275,7 @@ ChainCSS uses **secure VM sandboxing** to safely execute your .jcss files. No ev
     # 3. Create component with styles
     mkdir -p src/components/Button
 ```
+
 **src/components/Button/Button.jsx**
 
 ```jsx
@@ -304,19 +302,19 @@ ChainCSS uses **secure VM sandboxing** to safely execute your .jcss files. No ev
 
 ## Performance Comparison
 
-Approach                Runtime Cost        Bundle Size         Dynamic Styles      Learning Curve
+    Approach                Runtime Cost    Bundle Size         Dynamic Styles      Learning Curve
 
-**ChainCSS (Build)**  **Zero**            **Just CSS**          Build-time          Low
+    **ChainCSS (Build)**    **Zero**        **Just CSS**        Build-time          Low
 
-**ChainCSS (Runtime)**  Minimal             Small runtime       ✅ Full             Low
+    **ChainCSS (Runtime)**  Minimal         Small runtime       Full                Low
 
-Styled Components       5-10KB runtime      CSS + runtime       ✅ Full             Medium
+    Styled Components       5-10KB runtime  CSS + runtime       Full                Medium
 
-Emotion                 8-12KB runtime      CSS + runtime       ✅ Full             Medium
+    Emotion                 8-12KB runtime  CSS + runtime       Full                Medium
 
-Tailwind                Zero                Just CSS            ⚠️ Limited          High
+    Tailwind                Zero            Just CSS            Limited             High
 
-CSS Modules             Zero                Just CSS            ❌ None             Low
+    CSS Modules             Zero            Just CSS            None                Low
 
 **ChainCSS is the ONLY library that gives you BOTH worlds!**
 
@@ -346,39 +344,38 @@ Create chaincss.config.js in your project root:
     };
 ```
 
-
 ## API Reference
 
 ### Core Functions
 
-Function                        Description
+    Function                        Description
 
-`$()`                           Create a new chain builder
+    `$()`                           Create a new chain builder
 
-`.block(selector)`              End chain and assign selector(s)
+    `.block(selector)`              End chain and assign selector(s)
 
-`compile(styles)`               Compile style objects to CSS
+    `compile(styles)`               Compile style objects to CSS
 
-`run(...styles)`                Process inline styles
+    `run(...styles)`                Process inline styles
 
-`get(filename)`                 Import .jcss files
+    `get(filename)`                 Import .jcss files
 
-`processor(input, output)`      Build-time processor
+    `processor(input, output)`      Build-time processor
 
 
 ### React Hooks
 
-Hook                                        Description
+    Hook                                        Description
 
-`useChainStyles(styles, options)`           Basic styles hook
+    `useChainStyles(styles, options)`           Basic styles hook
 
-`useDynamicChainStyles(factory, deps)`      Styles that depend on props/state
+    `useDynamicChainStyles(factory, deps)`      Styles that depend on props/state
 
-`useThemeChainStyles(styles, theme)`        Theme-aware styles
+    `useThemeChainStyles(styles, theme)`        Theme-aware styles
 
-`ChainCSSGlobal`                            Global styles component
+    `ChainCSSGlobal`                            Global styles component
 
-`cx(...classes)`                            Conditional class merging
+    `cx(...classes)`                            Conditional class merging
 
 
 ## Editor Support
@@ -405,7 +402,6 @@ Hook                                        Description
     au BufRead,BufNewFile `*.jcss` setfiletype javascript
 ```
 
-
 ## Roadmap
 
 * Zero-runtime compilation

package/atomic-optimizer.js

@@ -40,7 +40,7 @@ class AtomicOptimizer {
           this.stats = cache.stats || this.stats;
           
           const cacheTime = new Date(cache.timestamp).toLocaleString();
-          console.log(`Loaded ${this.atomicClasses.size} atomic classes from cache (${cacheTime})`);
+          console.log(`--Loaded ${this.atomicClasses.size} atomic classes from cache (${cacheTime})\n`);
           
           // Verify config matches
           if (cache.config) {
@@ -237,8 +237,6 @@ class AtomicOptimizer {
   }
 
   optimize(styles) {
-    console.log('ChainCSS Atomic Optimizer running...');
-    
     // Track usage first
     this.trackStyles(styles);
     
@@ -257,10 +255,6 @@ class AtomicOptimizer {
     // 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();

package/chaincss.js

@@ -1,5 +1,4 @@
 #!/usr/bin/env node
-
 const {NodeVM} = require('vm2');
 const path = require('path');
 const fs = require('fs');
@@ -7,72 +6,179 @@ const chokidar = require('chokidar');
 const CleanCSS = require('clean-css');
 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);
-
-// IMPORT THE CORE FROM TRANSPILER - use aliasing
-const { $, run, compile: originalCompile, chain } = require('./transpiler');
-
-// Import atomic optimizer
+const strVal = require('./strVal.js');
 const { AtomicOptimizer } = require('./atomic-optimizer');
 const { CacheManager } = require('./cache-manager');
+const { $, run, compile: originalCompile, chain } = require('./transpiler');
 
-// Atomic optimizer instance
+// Atomic optimizer instance (will be initialized after config)
 let atomicOptimizer = null;
 
-// Configuration
+// Default configuration
 let config = {
   atomic: {
-    enabled: false,  // Default off for backward compatibility
+    enabled: false,
     threshold: 3,
     naming: 'hash',
     cache: true,
+    cachePath: './.chaincss-cache',
     minify: true
+  },
+  prefixer: {
+    enabled: true,
+    mode: 'auto',
+    browsers: ['> 0.5%', 'last 2 versions', 'not dead'],
+    sourceMap: true,
+    sourceMapInline: false
+  }
+};
+
+// Prefixer instance 
+let prefixer = new ChainCSSPrefixer(config.prefixer);
+
+// From default to user configuration
+function deft_to_userConf(target, source) {
+  const result = { ...target };
+  
+  for (const key in source) {
+    if (source[key] instanceof Object && key in target) {
+      result[key] = deft_to_userConf(target[key], source[key]);
+    } else {
+      result[key] = source[key];
+    }
+  }
+  
+  return result;
+}
+
+// Ensure config file exists
+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);
+    console.log('-- Successfully created config file: ./chaincss.config.cjs\n');
   }
 };
 
-try {
-  // Try .cjs first (for ES Module projects)
-  let configPath = path.join(process.cwd(), 'chaincss.config.cjs');
+// Load user config
+const loadUserConfig = () => {
+  const configPath = path.join(process.cwd(), 'chaincss.config.cjs');
   
   if (fs.existsSync(configPath)) {
-    const userConfig = require(configPath);
-    config = { ...config, ...userConfig };
+    try {
+      const userConfig = require(configPath);
+      config = deft_to_userConf(config, userConfig);
+      
+      // CRITICAL: Ensure browsers is ALWAYS an array
+      if (config.prefixer) {
+        // If browsers is a string, convert to array
+        if (typeof config.prefixer.browsers === 'string') {
+          config.prefixer.browsers = config.prefixer.browsers.split(',').map(b => b.trim());
+        }
+        // If browsers is not an array at this point, set default
+        if (!Array.isArray(config.prefixer.browsers)) {
+          config.prefixer.browsers = ['> 0.5%', 'last 2 versions', 'not dead'];
+        }
+      }
+    } catch (err) {
+      console.log('-- Error loading config:', err.message, '\n');
+    }
+  }
+};
+
+// Initialize atomic optimizer based on config
+const initAtomicOptimizer = () => {
+  if (config.atomic.enabled) {
+    atomicOptimizer = new AtomicOptimizer(config.atomic);
+    console.log('-- Atomic optimizer enabled\n');
   } else {
-    // Fall back to .js
-    configPath = path.join(process.cwd(), 'chaincss.config.js');
+    console.log('-- Atomic optimizer disabled\n');
+  }
+};
+
+// Initialization of prefixer object
+const initPrefixer = () => {
+  prefixer = new ChainCSSPrefixer(config.prefixer);
+};
+
+// Parse CLI arguments
+function parseArgs(args) {
+  const result = {
+    inputFile: null,
+    outputFile: null,
+    watchMode: false,
+    noPrefix: false,
+    browsers: null,
+    prefixerMode: null,
+    sourceMap: null,
+    sourceMapInline: false
+  };
+  
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
     
-    if (fs.existsSync(configPath)) {
-      const userConfig = require(configPath);
-      config = { ...config, ...userConfig };
-    } else {
-      console.log('No config file found');
+    if (arg === '--watch') {
+      result.watchMode = true;
+    } else if (arg === '--no-prefix') {
+      result.noPrefix = true;
+    } else if (arg === '--prefixer-mode' && args[i + 1]) {
+      result.prefixerMode = args[i + 1];
+      i++;
+    } else if (arg === '--browsers' && args[i + 1]) {
+      result.browsers = args[i + 1].split(',').map(b => b.trim());
+      i++;
+    } else if (arg === '--no-source-map') {
+      result.sourceMap = false;
+    } else if (arg === '--source-map-inline') {
+      result.sourceMapInline = true;
+    } else if (!result.inputFile) {
+      result.inputFile = arg;
+    } else if (!result.outputFile) {
+      result.outputFile = arg;
     }
   }
   
-} catch (err) {
-  console.log('Error loading config:', err.message);
+  return result;
 }
 
-// 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, ')');
-}
+// Apply CLI options to config
+const applyCliOptions = (cliOptions) => {
+  if (cliOptions.sourceMap !== null) {
+    config.prefixer.sourceMap = cliOptions.sourceMap;
+  }
+  if (cliOptions.sourceMapInline) {
+    config.prefixer.sourceMapInline = true;
+  }
+  if (cliOptions.prefixerMode) {
+    config.prefixer.mode = cliOptions.prefixerMode;
+  }
+  if (cliOptions.noPrefix) {
+    config.prefixer.enabled = false;
+  }
+  if (cliOptions.browsers) {
+    config.prefixer.browsers = cliOptions.browsers;
+  }
+};
 
+// Watch function
+function watch(inputFile, outputFile) {
+  chokidar.watch(inputFile).on('change', async () => {
+    try {
+      await processor(inputFile, outputFile);
+    } catch (err) {
+      console.error('Error during watch processing:', err);
+    }
+  });
+}
 
 // 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;
@@ -89,22 +195,18 @@ const transpilerModule = {
   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,
@@ -127,15 +229,9 @@ const processJCSSFile = (filePath) => {
     }
   });
   
-  // 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;
   `;
   
@@ -149,52 +245,51 @@ const processJCSSFile = (filePath) => {
   }
 };
 
-const processScript = (scriptBlock,filename) => {
-
+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)
+      ...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
+      external: true,
+      builtin: ['path', 'fs'],
+      root: './'
     }
   });
 
   const jsCode = scriptBlock.trim();
 
   try {
-      const result = vm.run(jsCode, filename);
-      return transpilerModule.chain.cssOutput;
+    const result = vm.run(jsCode, filename);
+    return transpilerModule.chain.cssOutput;
   } catch (err) {
-      console.error(`Error processing script in ${filename}:`, err.message);
-      throw err;
+    console.error(`Error processing script in ${filename}:`, err.message);
+    throw err;
   }
 };
 
 const processJavascriptBlocks = (content, inputpath) => {
   const blocks = content.split(/<@([\s\S]*?)@>/gm);
   let outputCSS = '';
+  
   for (let i = 0; i < blocks.length; i++) {
     if (i % 2 === 0) {
-      outputCSS += blocks[i]; // Write the existing CSS as is
+      outputCSS += blocks[i];
     } else {
       const scriptBlock = blocks[i];
       try {
-        const outputProcessScript = processScript(scriptBlock,inputpath);
-
+        const outputProcessScript = processScript(scriptBlock, inputpath);
         if (typeof outputProcessScript !== 'object' && typeof outputProcessScript !== 'undefined') {
           outputCSS += outputProcessScript;
         }
@@ -207,7 +302,7 @@ const processJavascriptBlocks = (content, inputpath) => {
   return outputCSS.trim();
 };
 
-// Validate CSS (check for unclosed blocks)
+// Validate CSS
 const validateCSS = (css) => {
   const openBraces = (css.match(/{/g) || []).length;
   const closeBraces = (css.match(/}/g) || []).length;
@@ -218,76 +313,79 @@ const validateCSS = (css) => {
   return true;
 };
 
-// Modified minification function with source map support
 const processAndMinifyCss = async (css, inputFile, outputFile) => {
   if (!validateCSS(css)) {
     throw new Error('Invalid CSS syntax - check for missing braces');
   }
 
-  // Step 1: Apply prefixer (if enabled)
   let processedCss = css;
-  let sourceMap = null;
-  if (prefixerConfig.enabled) {
+  let sourceMapFromPrefixer = null;
+  
+  if (config.prefixer.enabled) {
     try {
       const result = await prefixer.process(css, {
         from: inputFile,
         to: outputFile,
-        map: prefixerConfig.sourceMap !== false
+        map: config.prefixer.sourceMap !== false
       });
       processedCss = result.css;
-      sourceMap = result.map;
+      sourceMapFromPrefixer = result.map;
     } catch (err) {
-      console.error('⚠Prefixer error:', err.message);
+      console.error('Prefixer error:', err.message);
       processedCss = css;
     }
   }
   
-  // Step 2: Minify
-  const output = new CleanCSS().minify(processedCss);
+  const minifyOptions = {
+    sourceMap: config.prefixer.sourceMap === true,
+    sourceMapInlineSources: true
+  };
+  
+  const output = new CleanCSS(minifyOptions).minify(processedCss);
+  
   if (output.errors.length > 0) {
     console.error('CSS Minification Errors:', output.errors);
     return { css: null, map: null };
   }
+  
   let finalCss = output.styles;
-  if (sourceMap && !prefixerConfig.sourceMapInline) {
+  let finalSourceMap = output.sourceMap ? JSON.stringify(output.sourceMap) : sourceMapFromPrefixer;
+  
+  if (finalSourceMap && !config.prefixer.sourceMapInline) {
     const mapFileName = path.basename(`${outputFile}.map`);
     finalCss += `\n/*# sourceMappingURL=${mapFileName} */`;
   }
-  return { css: finalCss, map: sourceMap };
+  
+  return { css: finalCss, map: finalSourceMap };
 };
 
-// Main processor function - FIXED ORDER
+// Main processor function
 const processor = async (inputFile, outputFile) => {
   try {
     const input = path.resolve(inputFile);
     const output = path.resolve(outputFile);
     const content = fs.readFileSync(input, 'utf8');
     
-    // STEP 1: Process JavaScript blocks first
     const processedCSS = processJavascriptBlocks(content, input);
-    // STEP 2: Validate the CSS
+    
     if (!validateCSS(processedCSS)) {
       throw new Error('Invalid CSS syntax');
     }
 
-    // STEP 3: Apply prefixer and minify with source maps
-    const stylePath = output + '/global.css';
+    const stylePath = path.join(output, 'global.css');
     const result = await processAndMinifyCss(processedCSS, input, stylePath);
+    
     if (result.css) {
       fs.writeFileSync(stylePath, result.css, 'utf8');
-
-      //Write source map if generated
+      
       if (result.map) {
         const mapFile = `${stylePath}.map`;
         fs.writeFileSync(mapFile, result.map, 'utf8');
       }
-      if (prefixerConfig.enabled) {
-        console.log(`   Prefixer: ${prefixerConfig.mode} mode (${prefixerConfig.browsers.join(', ')})`);
-      }
-      //Show source map status
-      if (result.map) {
-        console.log(`   Source maps: enabled`);
-      }
+      
+      console.log(`-- Prefixer: ${config.prefixer.mode} mode (${config.prefixer.browsers.join(', ')})\n`);
+      console.log(`-- Source maps: ${result.map ? 'enabled' : 'disabled'}\n`);
+      console.log(`-- Successfully generated css: ./${path.relative(process.cwd(), stylePath)}\n`);
     }
   } catch (err) {
     console.error(`Failed to process ${inputFile}:`, err.message);
@@ -295,113 +393,37 @@ const processor = async (inputFile, outputFile) => {
   }
 };
 
-// Watch function
-function watch(inputFile, outputFile) {
-  chokidar.watch(inputFile).on('change', async () => {
-    try {
-      await processor(inputFile, outputFile);
-    } catch (err) {
-      console.error('Error during watch processing:', err);
-    }
-  });
-}
-
-// Parse CLI arguments
-function parseArgs(args) {
-  const result = {
-    inputFile: null,
-    outputFile: null,
-    watchMode: false,
-    noPrefix: false,
-    browsers: null,
-    prefixerMode: 'auto',
-    sourceMap: true, 
-    sourceMapInline: false
-  };
-  
-  for (let i = 0; i < args.length; i++) {
-    const arg = args[i];
-    
-    if (arg === '--watch') {
-      result.watchMode = true;
-    } else if (arg === '--no-prefix') {
-      result.noPrefix = true;
-    } else if (arg === '--prefixer-mode' && args[i + 1]) {
-      result.prefixerMode = args[i + 1];
-      i++;
-    } else if (arg === '--browsers' && args[i + 1]) {
-      result.browsers = args[i + 1].split(',');
-      i++;
-    } else if (arg === '--no-source-map') {
-      result.sourceMap = false;
-    } else if (arg === '--source-map-inline') {
-      result.sourceMapInline = true;
-    } else if (!result.inputFile) {
-      result.inputFile = arg;
-    } else if (!result.outputFile) {
-      result.outputFile = arg;
-    }
-  }
-  
-  return result;
-}
-
 // Main CLI logic
 if (require.main === module) {
+  // Step 1: Ensure config exists
+  ensureConfigExists();
+  
+  // Step 2: Load user config
+  loadUserConfig();
+  
+  // Step 3: Parse CLI arguments
   const args = process.argv.slice(2);
   const cliOptions = parseArgs(args);
+  
   if (!cliOptions.inputFile || !cliOptions.outputFile) {
-    console.log(`
-ChainCSS - JavaScript-powered CSS preprocessor
-
-Usage: 
-  chaincss <inputFile> <outputFile> [options]
-
-Options:
-  --watch               Watch for changes
-  --no-prefix          Disable automatic prefixing
-  --browsers <list>    Browser support list (comma-separated)
-                       Example: --browsers ">1%,last 2 versions,not IE 11"
-
-Examples:
-  chaincss style.jcss style.css
-  chaincss style.jcss style.css --watch
-  chaincss style.jcss style.css --browsers ">5%,last 2 safari versions"
-  chaincss style.jcss style.css --no-prefix
-    `);
+    console.log(strVal.cli_opt_guide);
     process.exit(1);
   }
 
-  // sourceMap
-  if (cliOptions.sourceMap !== undefined) {
-    prefixerConfig.sourceMap = cliOptions.sourceMap;
-  }
-  if (cliOptions.sourceMapInline) {
-    prefixerConfig.sourceMapInline = true;
-  }
-
-  // Then apply to prefixer:
-  if (cliOptions.prefixerMode) {
-    prefixerConfig.mode = cliOptions.prefixerMode;
-  }
-
-  // Apply CLI options
-  if (cliOptions.noPrefix) {
-    prefixerConfig.enabled = false;
-  }
+  // Step 4: Apply CLI options (overrides config)
+  applyCliOptions(cliOptions);
   
-  if (cliOptions.browsers) {
-    prefixerConfig.browsers = cliOptions.browsers;
-    // Re-initialize prefixer with new config
-    Object.assign(prefixer, new ChainCSSPrefixer(prefixerConfig));
-  }
+  // Step 5: Initialize components with final config (ONCE)
+  initAtomicOptimizer();
+  initPrefixer();  // Only called once now!
 
-  // Run processor
+  // Step 6: Run processor
   (async () => {
     try {
       await processor(cliOptions.inputFile, cliOptions.outputFile);
       
       if (cliOptions.watchMode) {
+        console.log('-- Watching for changes...\n');
         watch(cliOptions.inputFile, cliOptions.outputFile);
       }
     } catch (err) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@melcanz85/chaincss",
-  "version": "1.9.0",
+  "version": "1.9.3",
   "description": "A simple package transpiler for js to css",
   "main": "index.js",
   "module": "index.react.js",
@@ -40,7 +40,8 @@
   },
   "dependencies": {
     "chokidar": "^3.5.3",
-    "clean-css": "^5.3.3"
+    "clean-css": "^5.3.3",
+    "vm2": "^3.9.19"
   },
   "peerDependencies": {
     "autoprefixer": "^10.0.0",

package/prefixer.js

@@ -58,7 +58,7 @@ class ChainCSSPrefixer {
     // User explicitly wants full mode but Autoprefixer not installed
     if (this.config.mode === 'full' && !this.hasAutoprefixer) {
       console.warn('⚠️ Full mode requested but autoprefixer not installed. Falling back to lightweight mode.');
-      console.warn('   To use full mode: npm install autoprefixer postcss');
+      console.warn('   To use full mode: npm install autoprefixer postcss caniuse-db browserslist\n');
       return 'lightweight';
     }
     
@@ -107,6 +107,7 @@ class ChainCSSPrefixer {
 
   // Full mode with Autoprefixer
    async processWithAutoprefixer(cssString, options, mapOptions) {
+
     const from = options.from || 'input.css';
     const to = options.to || 'output.css';
     
@@ -131,10 +132,8 @@ class ChainCSSPrefixer {
     }
 
     this.targetBrowsers = browserslist(this.config.browsers);
-    
     const from = options.from || 'input.css';
     const to = options.to || 'output.css';
-    
     const result = await postcss([
       this.createBuiltInPlugin()
     ]).process(cssString, {