@melcanz85/chaincss 1.9.2 → 1.9.3

package/README.md

@@ -12,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
@@ -30,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)
@@ -47,11 +50,31 @@ ChainCSS is a revolutionary CSS-in-JS solution that gives you **two powerful mod
 
     module.exports = { button };
 ````
+**in your main.jcss**
+
+```javascript
+  <@
+    const button = get('./button.js');
+
+    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.
@@ -148,19 +171,7 @@ ChainCSS is a revolutionary CSS-in-JS solution that gives you **two powerful mod
         .boxShadow('0 0 0 3px rgba(102,126,234,0.5)')
       .block('.btn');
 ````
-### File Structure
 
-```text
-    your-project/
-    ├── node_module
-    ├── src/
-    │   ├── main.jcss           # Entry point - imports & compiles
-    │   └── chain.jcss          # Your style definitions           
-    │   
-    ├── style/
-    │   └── global.css          # Generated CSS
-    └── package.json
-```
 ### Basic Example
 
 **chaincss/button.jcss**

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.2",
+  "version": "1.9.3",
   "description": "A simple package transpiler for js to css",
   "main": "index.js",
   "module": "index.react.js",

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, {