@melcanz85/chaincss 1.11.0 → 1.11.1

package/node/chaincss.js

@@ -4,17 +4,13 @@ const path = require('path');
 const fs = require('fs');
 const chokidar = require('chokidar');
 const CleanCSS = require('clean-css');
+const { $, run, compile: originalCompile, chain } = require('./btt');
 const ChainCSSPrefixer = require('./prefixer.js');
-const fileCache = new Map();
 const strVal = require('./strVal.js');
 const { AtomicOptimizer } = require('./atomic-optimizer');
 const { CacheManager } = require('./cache-manager');
-const { $, run, compile: originalCompile, chain } = require('./btt');
-
-// Atomic optimizer instance (will be initialized after config)
+const fileCache = new Map();
 let atomicOptimizer = null;
-
-// Default configuration
 let config = {
   atomic: {
     enabled: false,
@@ -31,15 +27,10 @@ let config = {
     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]);
@@ -50,36 +41,25 @@ function deft_to_userConf(target, source) {
   
   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');
   }
 };
-
-// Load user config
 const loadUserConfig = () => {
   const configPath = path.join(process.cwd(), 'chaincss.config.cjs');
-  
   if (fs.existsSync(configPath)) {
     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'];
         }
@@ -89,23 +69,16 @@ const loadUserConfig = () => {
     }
   }
 };
-
-// Initialize atomic optimizer based on config
 const initAtomicOptimizer = () => {
   if (config.atomic.enabled) {
     atomicOptimizer = new AtomicOptimizer(config.atomic);
-    console.log('-- Atomic optimizer enabled\n');
   } else {
     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,
@@ -141,11 +114,8 @@ function parseArgs(args) {
       result.outputFile = arg;
     }
   }
-  
   return result;
 }
-
-// Apply CLI options to config
 const applyCliOptions = (cliOptions) => {
   if (cliOptions.sourceMap !== null) {
     config.prefixer.sourceMap = cliOptions.sourceMap;
@@ -163,8 +133,6 @@ const applyCliOptions = (cliOptions) => {
     config.prefixer.browsers = cliOptions.browsers;
   }
 };
-
-// Watch function
 function watch(inputFile, outputFile) {
   chokidar.watch(inputFile).on('change', async () => {
     try {
@@ -174,39 +142,29 @@ function watch(inputFile, outputFile) {
     }
   });
 }
-
-// Create the wrapped compile function
 const compile = (obj) => {
   originalCompile(obj);
-  
+  let css = chain.cssOutput || '';
   if (atomicOptimizer && config.atomic.enabled) {
-    const optimized = atomicOptimizer.optimize(obj);
-    chain.cssOutput = optimized;
-    return optimized;
+    css = atomicOptimizer.optimize(obj);
+    chain.cssOutput = css;
   }
-  return chain.cssOutput;
+  return css;
 };
-
-// Create a combined module for VM sandbox
 const transpilerModule = {
   $,
   run,
-  compile,
+  compile: originalCompile,
   chain
 };
-
-// Recursive file processing function
 const processJCSSFile = (filePath) => {
   if (fileCache.has(filePath)) {
     return fileCache.get(filePath);
   }
-  
   if (!fs.existsSync(filePath)) {
     throw new Error(`File not found: ${filePath}`);
   }
-  
   const content = fs.readFileSync(filePath, 'utf8');
-  
   const vm = new NodeVM({
     console: 'inherit',
     timeout: 5000,
@@ -228,13 +186,11 @@ const processJCSSFile = (filePath) => {
       root: './'
     }
   });
-  
   const wrappedContent = `
     module.exports = {};
     ${content}
     module.exports;
   `;
-  
   try {
     const exports = vm.run(wrappedContent, filePath);
     fileCache.set(filePath, exports);
@@ -244,7 +200,6 @@ const processJCSSFile = (filePath) => {
     throw err;
   }
 };
-
 const processScript = (scriptBlock, filename) => {
   const vm = new NodeVM({
     console: 'inherit',
@@ -267,18 +222,16 @@ const processScript = (scriptBlock, filename) => {
       root: './'
     }
   });
-
   const jsCode = scriptBlock.trim();
-
   try {
     const result = vm.run(jsCode, filename);
-    return transpilerModule.chain.cssOutput;
+    const css = vm.sandbox.chain?.cssOutput || '';
+    return css;
   } catch (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 = '';
@@ -289,9 +242,9 @@ const processJavascriptBlocks = (content, inputpath) => {
     } else {
       const scriptBlock = blocks[i];
       try {
-        const outputProcessScript = processScript(scriptBlock, inputpath);
-        if (typeof outputProcessScript !== 'object' && typeof outputProcessScript !== 'undefined') {
-          outputCSS += outputProcessScript;
+        const blockCSS = processScript(scriptBlock, inputpath);
+        if (typeof blockCSS !== 'object' && typeof blockCSS !== 'undefined') {
+          outputCSS += blockCSS;
         }
       } catch (err) {
         console.error(`Error processing script block:`, err.stack);
@@ -301,8 +254,6 @@ const processJavascriptBlocks = (content, inputpath) => {
   }
   return outputCSS.trim();
 };
-
-// Validate CSS
 const validateCSS = (css) => {
   const openBraces = (css.match(/{/g) || []).length;
   const closeBraces = (css.match(/}/g) || []).length;
@@ -312,15 +263,12 @@ const validateCSS = (css) => {
   }
   return true;
 };
-
 const processAndMinifyCss = async (css, inputFile, outputFile) => {
   if (!validateCSS(css)) {
     throw new Error('Invalid CSS syntax - check for missing braces');
   }
-
   let processedCss = css;
   let sourceMapFromPrefixer = null;
-  
   if (config.prefixer.enabled) {
     try {
       const result = await prefixer.process(css, {
@@ -335,93 +283,61 @@ const processAndMinifyCss = async (css, inputFile, outputFile) => {
       processedCss = css;
     }
   }
-  
   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;
   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: finalSourceMap };
 };
-
-// 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');
-    
     const processedCSS = processJavascriptBlocks(content, input);
-    
     if (!validateCSS(processedCSS)) {
       throw new Error('Invalid CSS syntax');
     }
-
     const stylePath = path.join(output, 'global.css');
     const result = await processAndMinifyCss(processedCSS, input, stylePath);
-    
     if (result.css) {
       fs.writeFileSync(stylePath, result.css, 'utf8');
-      
       if (result.map) {
         const mapFile = `${stylePath}.map`;
         fs.writeFileSync(mapFile, result.map, 'utf8');
       }
-      
-      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);
     throw err;
   }
 };
-
-// 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(strVal.cli_opt_guide);
     process.exit(1);
   }
-
-  // Step 4: Apply CLI options (overrides config)
   applyCliOptions(cliOptions);
-  
-  // Step 5: Initialize components with final config (ONCE)
   initAtomicOptimizer();
-  initPrefixer();  // Only called once now!
-
-  // Step 6: Run processor
+  initPrefixer();
   (async () => {
     try {
       await processor(cliOptions.inputFile, cliOptions.outputFile);
-      
       if (cliOptions.watchMode) {
         console.log('-- Watching for changes...\n');
         watch(cliOptions.inputFile, cliOptions.outputFile);
@@ -432,7 +348,6 @@ if (require.main === module) {
     }
   })();
 }
-
 module.exports = { 
   processor, 
   watch,

package/node/index.js

@@ -1,13 +1,2 @@
-const { $, run, compile, chain, tokens, createTokens } = require('./btt');
-const { processor, watch } = require('./chaincss');
-
-module.exports = {
-  $,           
-  run,         
-  compile,     
-  processor,   
-  watch,       
-  chain,       
-  tokens,      
-  createTokens 
-};
+const {$,run,compile,chain,tokens,createTokens} = require('./btt');
+module.exports = {$,run,compile,chain,tokens,createTokens};

package/node/prefixer.js

@@ -1,21 +1,14 @@
 let postcss, browserslist, caniuse, autoprefixer;
-
-// Try to load optional dependencies
 try {
   postcss = require('postcss');
   browserslist = require('browserslist');
   caniuse = require('caniuse-db/fulldata-json/data-2.0.json');
 } catch (err) {
-  // Optional deps not installed - will use lightweight mode
 }
-
-// Try to load Autoprefixer (optional)
 try {
   autoprefixer = require('autoprefixer');
 } catch (err) {
-  // Autoprefixer not installed - will use built-in
 }
-
 class ChainCSSPrefixer {
   constructor(config = {}) {
     this.config = {
@@ -26,15 +19,9 @@ class ChainCSSPrefixer {
       sourceMapInline: config.sourceMapInline || false,
       ...config
     };
-    
-    // Check what's available
     this.hasBuiltInDeps = !!(postcss && browserslist && caniuse);
     this.hasAutoprefixer = !!autoprefixer;
-    
-    // Determine which mode to use
     this.prefixerMode = this.determineMode();
-    
-    // Built-in prefixer data
     this.caniuseData = caniuse ? caniuse.data : null;
     this.commonProperties = this.getCommonProperties();
     this.specialValues = {
@@ -42,75 +29,53 @@ class ChainCSSPrefixer {
       'background-clip': ['text'],
       'position': ['sticky']
     };
-    
     this.browserPrefixMap = {
       'chrome': 'webkit', 'safari': 'webkit', 'firefox': 'moz',
       'ie': 'ms', 'edge': 'webkit', 'ios_saf': 'webkit',
       'and_chr': 'webkit', 'android': 'webkit', 'opera': 'webkit',
       'op_mob': 'webkit', 'samsung': 'webkit', 'and_ff': 'moz'
     };
-    
     this.targetBrowsers = null;
   }
-
-
   determineMode() {
-    // 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 caniuse-db browserslist\n');
       return 'lightweight';
     }
-    
-    // User explicitly wants lightweight mode
     if (this.config.mode === 'lightweight') {
       return 'lightweight';
     }
-    
-    // User wants full mode and it's available
     if (this.config.mode === 'full' && this.hasAutoprefixer) {
       return 'full';
     }
-    
-    // Auto mode: use full if available, otherwise lightweight
     if (this.config.mode === 'auto') {
       return this.hasAutoprefixer ? 'full' : 'lightweight';
     }
-    
     return 'lightweight';
   }
-
   async process(cssString, options = {}) {
     if (!this.config.enabled) {
       return { css: cssString, map: null };
     }
-
     try {
-      // Set up source map options
       const mapOptions = {
         inline: this.config.sourceMapInline,
         annotation: false, 
         sourcesContent: true
       };
-
       if (this.prefixerMode === 'full') {
         return await this.processWithAutoprefixer(cssString, options, mapOptions);
       }
-      
       return await this.processWithBuiltIn(cssString, options, mapOptions);
-      
     } catch (err) {
       console.error('Prefixer error:', err.message);
       return { css: cssString, map: null };
     }
   }
-
-  // Full mode with Autoprefixer
-   async processWithAutoprefixer(cssString, options, mapOptions) {
-
+  async processWithAutoprefixer(cssString, options, mapOptions) {
     const from = options.from || 'input.css';
     const to = options.to || 'output.css';
-    
     const result = await postcss([
       autoprefixer({ overrideBrowserslist: this.config.browsers })
     ]).process(cssString, { 
@@ -118,19 +83,15 @@ class ChainCSSPrefixer {
       to,
       map: this.config.sourceMap ? mapOptions : false
     });
-    
     return {
       css: result.css,
       map: result.map ? result.map.toString() : null
     };
   }
-
-  // Lightweight mode with built-in prefixer
   async processWithBuiltIn(cssString, options, mapOptions) {
     if (!this.hasBuiltInDeps) {
       return { css: cssString, map: null };
     }
-
     this.targetBrowsers = browserslist(this.config.browsers);
     const from = options.from || 'input.css';
     const to = options.to || 'output.css';
@@ -141,13 +102,11 @@ class ChainCSSPrefixer {
       to,
       map: this.config.sourceMap ? mapOptions : false
     });
-    
     return {
       css: result.css,
       map: result.map ? result.map.toString() : null
     };
   }
-
   createBuiltInPlugin() {
     return (root) => {
       root.walkDecls(decl => {
@@ -155,40 +114,30 @@ class ChainCSSPrefixer {
       });
     };
   }
-
   processBuiltInDeclaration(decl) {
     const { prop, value } = decl;
-    
     if (this.commonProperties.includes(prop)) {
       this.addPrefixesFromCaniuse(decl);
     }
-    
     if (this.specialValues[prop]?.includes(value)) {
       this.addSpecialValuePrefixes(decl);
     }
   }
-
   addPrefixesFromCaniuse(decl) {
     if (!this.caniuseData) return;
-    
     const feature = this.findFeature(decl.prop);
     if (!feature) return;
-    
     const prefixes = new Set();
-    
     this.targetBrowsers.forEach(browser => {
       const [id, versionStr] = browser.split(' ');
       const version = parseFloat(versionStr.split('-')[0]);
       const stats = feature.stats[id];
-      
       if (stats) {
         const versions = Object.keys(stats)
           .map(v => parseFloat(v.split('-')[0]))
           .filter(v => !isNaN(v))
           .sort((a, b) => a - b);
-        
         const closestVersion = versions.find(v => v <= version) || versions[0];
-        
         if (closestVersion) {
           const support = stats[closestVersion.toString()];
           if (support && support.includes('x')) {
@@ -206,10 +155,8 @@ class ChainCSSPrefixer {
       });
     });
   }
-
   addSpecialValuePrefixes(decl) {
     const { prop, value } = decl;
-    
     if (prop === 'display') {
       if (value === 'flex' || value === 'inline-flex') {
         decl.cloneBefore({ prop: 'display', value: `-webkit-${value}` });
@@ -225,19 +172,16 @@ class ChainCSSPrefixer {
         });
       }
     }
-    
     if (prop === 'background-clip' && value === 'text') {
       decl.cloneBefore({ prop: '-webkit-background-clip', value: 'text' });
     }
-    
     if (prop === 'position' && value === 'sticky') {
       decl.cloneBefore({ prop: 'position', value: '-webkit-sticky' });
     }
   }
 
   findFeature(property) {
-    if (!this.caniuseData) return null;
-    
+    if (!this.caniuseData) return null; 
     const featureMap = {
       'transform': 'transforms2d',
       'transform-origin': 'transforms2d',
@@ -267,11 +211,9 @@ class ChainCSSPrefixer {
       'grid-column': 'css-grid',
       'grid-row': 'css-grid'
     };
-    
     const featureId = featureMap[property];
     return featureId ? this.caniuseData[featureId] : null;
   }
-
   getCommonProperties() {
     return [
       'transform', 'transform-origin', 'transform-style',
@@ -292,5 +234,4 @@ class ChainCSSPrefixer {
     ];
   }
 }
-
 module.exports = ChainCSSPrefixer;

package/node/strVal.js

@@ -10,7 +10,7 @@ module.exports = {
     minify: true
   },
   prefixer: {
-    mode: 'full',
+    mode: 'auto',
     browsers: ['> 0.5%', 'last 2 versions', 'not dead'],
     enabled: true,
     sourceMap: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@melcanz85/chaincss",
-  "version": "1.11.0",
+  "version": "1.11.1",
   "description": "A simple package transpiler for js to css",
   "exports": {
     ".": {