@melcanz85/chaincss 1.5.27 → 1.6.1

package/README.md

@@ -8,18 +8,19 @@ A simple JavaScript-to-CSS transpiler that converts JS objects into optimized CS
 ## 🚀 Installation
 
 ```bash
-npm install @melcanz85/chaincss
-
+    npm install @melcanz85/chaincss
+```
 📦 Usage (Node.js)
-Quick Setup
 
-    Install development dependencies:
+Quick Setup
 
-bash
+### Install development dependencies:
 
-npm install --save-dev nodemon concurrently
+```bash
+    npm install --save-dev nodemon concurrently
+```
 
-    Update your package.json scripts:
+### Update your package.json scripts:
 
 json
 
@@ -27,115 +28,160 @@ json
   "start": "concurrently \"nodemon server.js\" \"nodemon --watch chaincss/*.jcss --watch processor.js --exec 'node processor.js'\""
 }
 
+
+## 🔧 CSS Prefixing
+
+ChainCSS offers two prefixing modes:
+
+### 1. Lightweight Mode (Default, ~50KB)
+Built-in prefixer that handles the most common CSS properties:
+- Flexbox & Grid
+- Transforms & Animations
+- Filters & Effects
+- Text effects
+- Box properties
+
+No additional installation needed!
+
+### 2. Full Mode (Uses Autoprefixer)
+For complete prefixing coverage of all CSS properties:
+
+```bash
+npm install autoprefixer postcss browserslist caniuse-db
+```
 Project Structure
 
 Create this folder structure in your project:
 
-your-project/
-├── chaincss/                 # ChainCSS source files
-│   ├── main.jcss             # Main entry file
-│   ├── chain.jcss            # Chaining definitions
-│   └── processor.js          # Processing script
-├── public/                   # Output files
-│   ├── index.html
-│   └── style.css             # Generated CSS
-├── node_modules/
-├── package.json
-└── package-lock.json
+    your-project/
+    ├── chaincss/                 # ChainCSS source files
+    │   ├── main.jcss             # Main entry file
+    │   ├── chain.jcss            # Chaining definitions
+    │   └── processor.js          # Processing script
+    ├── public/                   # Output files
+    │   ├── index.html
+    │   └── style.css             # Generated CSS
+    ├── node_modules/
+    ├── package.json
+    └── package-lock.json
 
 
 The Initialization processor Setup
 
 In chaincss/processor.js:
 
-const chain = require("@melcanz85/chaincss");
+    const chain = require("@melcanz85/chaincss");
 
-try {
-  // Process main file and output CSS
-  chain.processor('./chaincss/main.jcss', './public/style.css');
-} catch (err) {
-  console.error('Error processing chainCSS file:', err.stack);
-  process.exit(1);
-}
+    try {
+      // Process main file and output CSS
+      chain.processor('./chaincss/main.jcss', './public/style.css');
+    } catch (err) {
+      console.error('Error processing chainCSS file:', err.stack);
+      process.exit(1);
+    }
 
 💻 Code Examples
 
- //*** This is where the chaining happens all codes here are in javascript syntax, the methods are the css properties but in javascript form it follows the camelCase standard. Example the css property font-family is fontFamily in chaincss and your css selector is the value of the block() method which is always at the end of the chain.
-
- //*** The property method are the same as the css property but background is an exception because it's a long word so it is shorten to bg only. Example background-color is bgColor() in chaincss etc.
-
- 
-//--Chaining File (chaincss/chain.jcss):
-
-// Variables for consistent styling
-const bodyBgColor = '#f0f0f0';
-const headerBgColor = '#333';
-const bodyFontFamily = 'Arial, sans-serif';
-const headerAlignItems = 'center';
-const logoHeight = '50px';
-
-// Reset browser defaults
-const resetDefaultBrowStyle = chain
-  .margin('0')
-  .padding('0')
-  .block('body', 'h1', 'h2', 'h3', 'p', 'ul');
-
-// Body styles
-const bodyStyle = chain
-  .fontFamily(bodyFontFamily)
-  .lineHeight('1.6')
-  .bgColor(bodyBgColor)
-  .block('body');
-
-// Header styles
-const header = chain
-  .display('flex')
-  .alignItems(headerAlignItems)
-  .justifyContent('space-between')
-  .bgColor(headerBgColor)
-  .color('#fff')
-  .padding('10px 20px')
-  .block('header');
-
-// Logo
-const logoImgHeight = chain
-  .height(logoHeight)
-  .block('.logo img');
-
-module.exports = {
-  resetDefaultBrowStyle,
-  bodyStyle,
-  header,
-  logoImgHeight
-};
+    //--Chaining File (chaincss/chain.jcss):
+
+### This is where the chaining happens all codes must be in javascript syntax. 
+    The chain methods are the same as the css properties but in camelCase mode 
+    and the exception of the background property which is shorten to 'bg' only for
+    example background-color is bgColor() in chaincss. The value of the block() 
+    method is the css selector which is always at the end of the chain or block.
+
+    // Variables for consistent styling
+    const bodyBg = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
+    const headerBg = 'rgba(255, 255, 255, 0.95)';
+    const bodyFontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, 
+                            Ubuntu, sans-serif";
+    const headerBoxShadow = '0 2px 20px rgba(0,0,0,0.1)';
+    const logoFontSize = '1.8rem';
+
+    const reset = chain
+      .margin('0')
+        .padding('0')
+        .boxSizing('border-box')
+        .block('*');
+
+    const body = chain
+        .fontFamily(bodyFontFamily)
+        .lineHeight('1.6')
+        .color('#1e293b')
+        .bg(bodyBg)
+        .block('body');
+
+        /* Header/Navigation */
+    const navbar = chain
+        .bg(headerBg)
+        .backdropFilter('blur(10px)')
+        .padding('1rem 5%')
+        .position('fixed')
+        .width('100%')
+        .top('0')
+        .zIndex('1000')
+        .boxShadow(headerBoxShadow)
+        .block('.navbar');
+
+    const nav_container = chain
+        .maxWidth('1200px')
+        .margin('0 auto')
+        .display('flex')
+        .justifyContent('space-between')
+        .alignItems('center')
+        .block('.nav-container');
+
+    const logo = chain
+        .fontSize(logoFontSize)
+        .fontWeight('700')
+        .bg('linear-gradient(135deg, #667eea, #764ba2)')
+        .backgroundClip('text')
+        .textFillColor('transparent')
+        .letterSpacing('-0.5px')
+        .block('.logo');
+
+    module.exports = {
+      reset,
+      navbar,
+      nav_container,
+      logo
+    };
 
 
 //--Main File (chaincss/main.jcss):
 
-<@
-  // Import chaining definitions
-  const style = get('./chain.jcss');
-
-  // Override specific styles
-  style.header.bgColor = 'red';
-  
-  // Compile to CSS
-  compile(style);
-@>
-
-@media (max-width: 768px) {
-<@
-  run(
-    chain.flexDirection('column').alignItems('flex-start').block('header'),
-    chain.order(1).block('.logo'),
-    chain.order(2).block('.search-bar'),
-    chain.order(3).block('h1'),
-    chain.order(5).block('nav'),
-    chain.order(4).display('flex').width('100%').justifyContent('flex-end').block('.burgerWrapper')
-  );
-@>
-}
+    <@
+      // Import chaining definitions
+      const style = get('./chain.jcss');
+
+      // Override specific styles
+      style.logo.fontSize = '2rem';
+      
+      // Compile to CSS
+      compile(style);
+    @>
+
+    @keyframes fadeInUp {
+    <@
+      run(
+        chain.opacity('0').transform('translateY(20px)').block('from'),
+        chain.opacity('1').transform('translateY(0)').block('to'),
+      );
+    @>
+    }
 
+    /* Responsive */
+    @media (max-width: 768px) {
+    <@
+      run(
+        chain.fontSize('2.5rem').block('.hero h1'),
+        chain.flexDirection('column').gap('1rem').block('.stats'),
+        chain.flexDirection('column').alignItems('center').block('.cta-buttons'),
+        chain.gridTemplateColumns('1fr').block('.example-container'),
+        chain.display('none').block('.nav-links')
+      );
+    @>
+    }
 
 📝 Notes
     
@@ -143,13 +189,16 @@ module.exports = {
 
     But chainCSS syntax must be wrapped in <@ @> delimiters.
 
-    The get() function imports chaining definitions from other files
+    The get() function imports chaining definitions from your chain.jcss file
 
-    YOU can modify your style in between get() and compile() in the main file it will overwrite the styles in the chainn file.
+    You can modify your style in between get() and compile() in the 
+    main file it will overwrite the styles in the chain file.
 
 🎨 Editor Support
 
-Since .jcss files are just JavaScript files with ChainCSS syntax, you can easily enable proper syntax highlighting in your editor:
+Since .jcss files are just JavaScript files with ChainCSS syntax, you can 
+easily enable proper syntax highlighting in your editor:
+
 VS Code
 
 Add this to your project's .vscode/settings.json:
@@ -171,13 +220,13 @@ WebStorm / IntelliJ IDEA
 Vim / Neovim
 
 Add to your .vimrc or init.vim:
-vim
 
-au BufRead,BufNewFile *.jcss setfiletype javascript
+    au BufRead,BufNewFile *.jcss setfiletype javascript
 
 Sublime Text
 
-Create or edit ~/Library/Application Support/Sublime Text/Packages/User/JCSS.sublime-settings:
+    Create or edit ~/Library/Application Support/Sublime Text/Packages/User/JCSS.sublime-settings:
+
 json
 
 {
@@ -190,12 +239,13 @@ Atom
 Add to your config.cson:
 coffeescript
 
-"*":
-  core:
-    customFileTypes:
-      "source.js": [
-        "jcss"
-      ]
+    "*":
+      core:
+        customFileTypes:
+          "source.js": [
+            "jcss"
+          ]
+
 
 Other Editors
 
@@ -208,19 +258,17 @@ Status               Feature             Description
 
 ✅ Basic             JS → CSS            Convert plain JS objects to CSS
 
-🚧 Keyframe          animations          @keyframes support
-
-🚧 Vendor            prefixing           Auto-add -webkit-, -moz-, etc.
-
-🚧 Source maps       Debug               generated CSS
+✅ Vendor            prefixing           Auto-add -webkit-, -moz-, etc.
 
-🚧 Watch             mode                Auto-recompile on file changes
-
-✅ = Working, 🚧 = Coming soon
+✅ Keyframe          animations          @keyframes support
+                     
+✅ Source maps       Debug               generated CSS
 
+✅ Watch             mode                Auto-recompile on file changes
 
 👨‍💻 Contributing
-Contributions are welcome! Feel free to open issues or submit pull requests.
+
+    Contributions are welcome! Feel free to open issues or submit pull requests.
 
 📄 License
 

package/chaincss.js

@@ -7,39 +7,29 @@ const fs = require('fs');
 const chokidar = require('chokidar');
 const CleanCSS = require('clean-css');
 const transpilerModule = require('./transpiler.js');
+const ChainCSSPrefixer = require('./prefixer.js');
+
+let prefixerConfig = {
+  enabled: true,
+  browsers: ['> 0.5%', 'last 2 versions', 'not dead'],
+  mode: 'auto' // 'auto', 'lightweight', or 'full'
+};
+
+const prefixer = new ChainCSSPrefixer(prefixerConfig);
 
 const processScript = (scriptBlock) => {
-  //const output = 'cssOutput = undefined;';
   const context = vm.createContext({ 
-    ...transpilerModule // Only expose what's needed
+    ...transpilerModule
   });
 
-  const jsCode = scriptBlock.trim(); //`(function() { ${scriptBlock.trim()} })();`;  Wrap script in IIFE
+  const jsCode = scriptBlock.trim();
   const chainScript = new vm.Script(jsCode);
-  chainScript.runInContext(context); // Execute in isolated context
-  return context.chain.cssOutput; // Return the processed output
-};
-
-// CSS Minification Function
-const minifyCss = (css) => {
-  const output = new CleanCSS().minify(css);
-  if (output.errors.length > 0) {
-    console.error('CSS Minification Errors:', output.errors);
-    return null;
-  }
-  return output.styles;
+  chainScript.runInContext(context);
+  return context.chain.cssOutput;
 };
 
-// FUNCTION TO CONVERT JS CODES TO CSS CODE
-const processor = (inputFile, outputFile) => {
-  /*const allowedExtensions = ['.jcss'];
-  const fileExt = path.extname(inputFile).toLowerCase();
-  
-  if (!allowedExtensions.includes(fileExt)) {
-    throw new Error(`Invalid file extension: ${fileExt}. Only .jcss files are allowed.`);
-  }*/
-  const input = path.resolve(inputFile);
-  const content = fs.readFileSync(input, 'utf8');
+// FUNCTION TO CONVERT JS CODES TO CSS CODE (FIRST STEP)
+const processJavascriptBlocks = (content) => {
   const blocks = content.split(/<@([\s\S]*?)@>/gm);
   let outputCSS = '';
 
@@ -54,43 +44,235 @@ const processor = (inputFile, outputFile) => {
           outputCSS += outputProcessScript;
         }
       } catch (err) {
-        console.error(`Error processing script block in ${inputFile}:`, err.stack);
-        throw err; // Stop the process by re-throwing the error
+        console.error(`Error processing script block:`, err.stack);
+        throw err;
       }
     }
   }
-  const outputDir = path.resolve(outputFile);
-  const trimmedCSS = outputCSS.trim();
-  const minCSS = minifyCss(trimmedCSS);
-  fs.writeFileSync(outputDir, minCSS, 'utf8'); // Write processed CSS
+  
+  return outputCSS.trim();
+};
+
+// NEW: Validate CSS (check for unclosed blocks)
+const validateCSS = (css) => {
+  const openBraces = (css.match(/{/g) || []).length;
+  const closeBraces = (css.match(/}/g) || []).length;
+  
+  if (openBraces !== closeBraces) {
+    console.error(`CSS syntax error: Unclosed blocks (${openBraces} opening vs ${closeBraces} closing braces)`);
+    return false;
+  }
+  return true;
+};
+
+// Modified minification function with source map support
+
+const processAndMinifyCss = async (css, inputFile, outputFile) => {
+  // First validate the CSS
+  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) {
+    try {
+      const result = await prefixer.process(css, {
+        from: inputFile,
+        to: outputFile,
+        map: prefixerConfig.sourceMap !== false
+      });
+      
+      processedCss = result.css;
+      sourceMap = result.map;
+      
+    } catch (err) {
+      console.error('⚠Prefixer error:', err.message);
+      processedCss = css;
+    }
+  }
+  
+  // Step 2: Minify
+  const output = new CleanCSS().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) {
+    const mapFileName = path.basename(`${outputFile}.map`);
+    finalCss += `\n/*# sourceMappingURL=${mapFileName} */`;
+  }
+  
+  return { css: finalCss, map: sourceMap };
+};
+
+// Main processor function - FIXED ORDER
+
+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);
+    
+    // STEP 2: Validate the CSS
+    if (!validateCSS(processedCSS)) {
+      throw new Error('Invalid CSS syntax');
+    }
+    
+    // STEP 3: Apply prefixer and minify with source maps
+   
+    const result = await processAndMinifyCss(processedCSS, input, output);
+    if (result.css) {
+      fs.writeFileSync(output, result.css, 'utf8');
+      
+      //Write source map if generated
+      if (result.map) {
+        const mapFile = `${output}.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`);
+      }
+    }
+  } catch (err) {
+    console.error(`Failed to process ${inputFile}:`, err.message);
+    throw err;
+  }
 };
 
 // Watch function
 function watch(inputFile, outputFile) {
   console.log(`Watching for changes in ${inputFile}...`);
-  chokidar.watch(inputFile).on('change', () => {
+  chokidar.watch(inputFile).on('change', async () => {
     console.log(`File changed: ${inputFile}`);
-    processor(inputFile, outputFile);
+    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',
+    // NEW: Add these
+    sourceMap: true, // Enable source maps by default
+    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++;
+    // NEW: Add these two
+    } 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) {
   const args = process.argv.slice(2);
-  const inputFile = args[0];
-  const outputFile = args[1];
-  const watchMode = args.includes('--watch');
+  const cliOptions = parseArgs(args);
+  
+  if (!cliOptions.inputFile || !cliOptions.outputFile) {
+    console.log(`
+ChainCSS - JavaScript-powered CSS preprocessor
+
+Usage: 
+  chaincss <inputFile> <outputFile> [options]
 
-  if (!inputFile || !outputFile) {
-    console.error('Usage: chaincss <inputFile> <outputFile> [--watch]');
+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
+    `);
     process.exit(1);
   }
 
-  processor(inputFile, outputFile);
+  // 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;
+  }
 
-  if (watchMode) {
-    watch(inputFile, outputFile);
+  // Apply CLI options
+  if (cliOptions.noPrefix) {
+    prefixerConfig.enabled = false;
+  }
+  
+  if (cliOptions.browsers) {
+    prefixerConfig.browsers = cliOptions.browsers;
+    // Re-initialize prefixer with new config
+    Object.assign(prefixer, new ChainCSSPrefixer(prefixerConfig));
   }
+
+  // Run processor
+  (async () => {
+    try {
+      await processor(cliOptions.inputFile, cliOptions.outputFile);
+      
+      if (cliOptions.watchMode) {
+        watch(cliOptions.inputFile, cliOptions.outputFile);
+      }
+    } catch (err) {
+      console.error('Fatal error:', err);
+      process.exit(1);
+    }
+  })();
 }
 
-module.exports = { processor, watch }; 
+module.exports = { processor, watch };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@melcanz85/chaincss",
-  "version": "1.5.27",
+  "version": "1.6.1",
   "description": "A simple package transpiler for js to css",
   "main": "chaincss.js",
   "publishConfig": {
@@ -11,7 +11,7 @@
     "type": "git",
     "url": "git+https://github.com/melcanz08/chaincss.git"
   },
-  "homepage": "https://github.com/melcanz08/chaincss",
+  "homepage": "https://melcanz08.github.io/chaincss-website",
   "bin": {
     "chaincss": "chaincss.js"
   },
@@ -19,6 +19,26 @@
     "chokidar": "^3.5.3",
     "clean-css": "^5.3.3"
   },
+  "peerDependencies": {
+    "autoprefixer": "^10.0.0",
+    "browserslist": "^4.28.1",
+    "caniuse-db": "^1.0.30001770",
+    "postcss": "^8.5.6"
+  },
+  "peerDependenciesMeta": {
+    "autoprefixer": {
+      "optional": true
+    },
+    "postcss": {
+      "optional": true
+    },
+    "browserslist": {
+      "optional": true
+    },
+    "caniuse-db": {
+      "optional": true
+    }
+  },
   "keywords": [
     "css",
     "js",

package/prefixer.js

@@ -0,0 +1,297 @@
+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 = {
+      browsers: config.browsers || ['> 0.5%', 'last 2 versions', 'not dead'],
+      enabled: config.enabled !== false,
+      mode: config.mode || 'auto',
+      sourceMap: config.sourceMap !== false, // Enable source maps by default
+      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 = {
+      'display': ['flex', 'inline-flex', 'grid', 'inline-grid'],
+      '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');
+      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, // We'll add the comment ourselves
+        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) {
+    const from = options.from || 'input.css';
+    const to = options.to || 'output.css';
+    
+    const result = await postcss([
+      autoprefixer({ overrideBrowserslist: this.config.browsers })
+    ]).process(cssString, { 
+      from,
+      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';
+    
+    const result = await postcss([
+      this.createBuiltInPlugin()
+    ]).process(cssString, { 
+      from,
+      to,
+      map: this.config.sourceMap ? mapOptions : false
+    });
+    
+    return {
+      css: result.css,
+      map: result.map ? result.map.toString() : null
+    };
+  }
+
+  createBuiltInPlugin() {
+    return (root) => {
+      root.walkDecls(decl => {
+        this.processBuiltInDeclaration(decl);
+      });
+    };
+  }
+
+  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')) {
+            const prefix = this.browserPrefixMap[id.split('-')[0]];
+            if (prefix) prefixes.add(prefix);
+          }
+        }
+      }
+    });
+    
+    prefixes.forEach(prefix => {
+      decl.cloneBefore({
+        prop: `-${prefix}-${decl.prop}`,
+        value: decl.value
+      });
+    });
+  }
+
+  addSpecialValuePrefixes(decl) {
+    const { prop, value } = decl;
+    
+    if (prop === 'display') {
+      if (value === 'flex' || value === 'inline-flex') {
+        decl.cloneBefore({ prop: 'display', value: `-webkit-${value}` });
+        decl.cloneBefore({ 
+          prop: 'display', 
+          value: value === 'flex' ? '-ms-flexbox' : '-ms-inline-flexbox'
+        });
+      }
+      if (value === 'grid' || value === 'inline-grid') {
+        decl.cloneBefore({ 
+          prop: 'display', 
+          value: value === 'grid' ? '-ms-grid' : '-ms-inline-grid' 
+        });
+      }
+    }
+    
+    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;
+    
+    const featureMap = {
+      'transform': 'transforms2d',
+      'transform-origin': 'transforms2d',
+      'transform-style': 'transforms3d',
+      'perspective': 'transforms3d',
+      'backface-visibility': 'transforms3d',
+      'transition': 'css-transitions',
+      'animation': 'css-animation',
+      'backdrop-filter': 'backdrop-filter',
+      'filter': 'css-filters',
+      'user-select': 'user-select-none',
+      'appearance': 'css-appearance',
+      'mask-image': 'css-masks',
+      'box-shadow': 'css-boxshadow',
+      'border-radius': 'border-radius',
+      'text-fill-color': 'text-stroke',
+      'text-stroke': 'text-stroke',
+      'background-clip': 'background-img-opts',
+      'flex': 'flexbox',
+      'flex-grow': 'flexbox',
+      'flex-shrink': 'flexbox',
+      'flex-basis': 'flexbox',
+      'justify-content': 'flexbox',
+      'align-items': 'flexbox',
+      'grid': 'css-grid',
+      'grid-template': 'css-grid',
+      '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',
+      'transition', 'transition-property', 'transition-duration', 'transition-timing-function',
+      'animation', 'animation-name', 'animation-duration', 'animation-timing-function',
+      'animation-delay', 'animation-iteration-count', 'animation-direction',
+      'animation-fill-mode', 'animation-play-state',
+      'backdrop-filter', 'filter',
+      'user-select', 'appearance',
+      'text-fill-color', 'text-stroke', 'text-stroke-color', 'text-stroke-width',
+      'background-clip',
+      'mask-image', 'mask-clip', 'mask-composite', 'mask-origin',
+      'mask-position', 'mask-repeat', 'mask-size',
+      'box-shadow', 'border-radius', 'box-sizing',
+      'display', 'flex', 'flex-grow', 'flex-shrink', 'flex-basis',
+      'justify-content', 'align-items', 'align-self', 'align-content',
+      'grid', 'grid-template', 'grid-column', 'grid-row'
+    ];
+  }
+}
+
+module.exports = ChainCSSPrefixer;

package/transpiler.js

@@ -124,6 +124,7 @@ const chain = {
   overflowY(oy){ this.catcher.overflowY = oy; return this; },
   overflowWrap(ow){ this.catcher.overflowWrap = ow; return this; },
 
+  animation(a){ this.catcher.animation = a; return this; },
   textFillColor(tfc){ this.catcher.textFillColor = tfc; return this; },
   backgroundClip(bc){ this.catcher.backgroundClip = bc; return this; },
   gridTemplateColumns(gtc){ this.catcher.gridTemplateColumns = gtc; return this; },