chaincss 1.13.2 → 2.0.0

package/node/prefixer.js

@@ -1,237 +0,0 @@
-let postcss, browserslist, caniuse, autoprefixer;
-try {
-  postcss = require('postcss');
-  browserslist = require('browserslist');
-  caniuse = require('caniuse-db/fulldata-json/data-2.0.json');
-} catch (err) {
-}
-try {
-  autoprefixer = require('autoprefixer');
-} catch (err) {
-}
-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
-    };
-    this.hasBuiltInDeps = !!(postcss && browserslist && caniuse);
-    this.hasAutoprefixer = !!autoprefixer;
-    this.prefixerMode = this.determineMode();
-    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() {
-    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 install this devDenpendecies: "npm install -D autoprefixer postcss caniuse-db browserslist"\n');
-      return 'lightweight';
-    }
-    if (this.config.mode === 'lightweight') {
-      return 'lightweight';
-    }
-    if (this.config.mode === 'full' && this.hasAutoprefixer) {
-      return 'full';
-    }
-    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 {
-      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 };
-    }
-  }
-  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
-    };
-  }
-  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/node/strVal.js

@@ -1,106 +0,0 @@
-const strVal = {
-  userConf: `// Project Configuration
-module.exports = {
-  atomic: {
-    enabled: true,
-    threshold: 3,
-    naming: 'hash',
-    cache: true,
-    cachePath: './.chaincss-cache',
-    minify: true
-  },
-  prefixer: {
-    mode: 'auto',
-    browsers: ['> 0.5%', 'last 2 versions', 'not dead'],
-    enabled: true,
-    sourceMap: true,
-    sourceMapInline: false
-  }
-};
-`,
-  cli_opt_guide: `
-ChainCSS - JavaScript-powered CSS preprocessor
-
-Usage: 
-  chaincss <inputFile> <outputFile> [options]
-
-Options:
-  --watch               Watch for changes and auto-recompile
-  --no-prefix          Disable automatic prefixing
-  --prefixer-mode <mode> Set prefixer mode (auto|lightweight|full)
-  --browsers <list>    Browser support list (comma-separated)
-  --no-source-map      Disable source maps
-  --source-map-inline  Use inline source maps
-  
-  # Atomic CSS Optimization
-  --atomic              Enable atomic CSS optimization
-  --threshold <number>  Minimum usage count for atomic classes (default: 3)
-  --atomic-naming <type> Atomic class naming (hash|readable) (default: hash)
-  --no-atomic-cache     Disable atomic CSS cache
-  
-  # Performance & Debug
-  --verbose             Enable verbose logging
-  --debug               Enable debug mode with detailed output
-  --tree-shake          Remove unused CSS classes (dead code elimination)
-  
-  # Output Control
-  --minify              Minify CSS output (default: true in production)
-  --no-minify           Disable CSS minification
-  --out-dir <dir>       Output directory (default: same as outputFile dir)
-  --manifest            Generate build manifest file
-  
-  # Configuration
-  --config <path>       Path to config file (default: chaincss.config.cjs)
-  --no-config           Ignore config file, use CLI options only
-  
-  # Theme Validation
-  --validate-themes     Validate theme contracts during build
-  
-  # Help
-  --help, -h            Show this help message
-  --version, -v         Show version number
-
-Examples:
-  # Basic compilation
-  chaincss style.jcss style.css
-  
-  # Watch mode for development
-  chaincss style.jcss style.css --watch
-  
-  # Atomic CSS optimization
-  chaincss style.jcss style.css --atomic
-  
-  # With custom threshold for atomic classes
-  chaincss style.jcss style.css --atomic --threshold 5
-  
-  # Full production build with all optimizations
-  chaincss style.jcss style.css --atomic --minify --tree-shake --source-map
-  
-  # Custom browser support
-  chaincss style.jcss style.css --browsers "> 1%, last 2 versions, not dead"
-  
-  # Full autoprefixer mode
-  chaincss style.jcss style.css --prefixer-mode full
-  
-  # Validate themes during build
-  chaincss style.jcss style.css --validate-themes
-  
-  # Debug mode with verbose output
-  chaincss style.jcss style.css --debug --verbose
-  
-  # Disable prefixing (for modern browsers only)
-  chaincss style.jcss style.css --no-prefix
-  
-  # With custom config file
-  chaincss style.jcss style.css --config ./my-chaincss.config.cjs
-
-Notes:
-  - Atomic CSS optimization reduces CSS size by reusing common style patterns
-  - Tree shaking removes unused CSS classes from final bundle
-  - Theme validation ensures all themes have required tokens
-  - Use --watch during development for instant updates
-  - Use --atomic --minify --tree-shake for production builds
-    `
-}
-
-module.exports = strVal;

package/node/theme-validator.js

@@ -1,32 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-
-export function validateThemeFiles(configPath) {
-  const config = JSON.parse(fs.readFileSync(configPath, 'utf8'));
-  
-  if (!config.themes) return;
-  
-  const { contract, themes } = config;
-  
-  console.log('\n🎨 Validating Theme Contract...\n');
-  
-  const errors = [];
-  
-  themes.forEach((theme, index) => {
-    const themeName = theme.name || `theme-${index}`;
-    try {
-      validateTheme(contract, theme.values);
-      console.log(`✅ ${themeName}: Valid`);
-    } catch (err) {
-      errors.push(`❌ ${themeName}: ${err.message}`);
-    }
-  });
-  
-  if (errors.length > 0) {
-    console.error('\nTheme Contract Validation Failed:\n');
-    errors.forEach(err => console.error(err));
-    process.exit(1);
-  }
-  
-  console.log('\n✅ All themes valid!\n');
-}

package/shared/theme-contract.js

@@ -1,98 +0,0 @@
-export function createThemeContract(contractShape) {
-  // Store the contract for validation
-  const contract = contractShape;
-  
-  // Create a proxy that validates token access
-  const contractProxy = new Proxy(contract, {
-    get(target, prop) {
-      if (prop === '__isContract') return true;
-      if (prop === '__validate') return (theme) => validateTheme(contract, theme);
-      return target[prop];
-    }
-  });
-  
-  return contractProxy;
-}
-
-export function validateTheme(contract, theme, path = '') {
-  const errors = [];
-  
-  function validate(contractPart, themePart, currentPath) {
-    if (typeof contractPart === 'object' && contractPart !== null) {
-      // Check if theme has all required keys
-      const requiredKeys = Object.keys(contractPart);
-      const themeKeys = Object.keys(themePart || {});
-      
-      requiredKeys.forEach(key => {
-        const newPath = currentPath ? `${currentPath}.${key}` : key;
-        
-        if (!themePart || !themePart.hasOwnProperty(key)) {
-          errors.push(` Missing required token: "${newPath}"`);
-        } else {
-          validate(contractPart[key], themePart[key], newPath);
-        }
-      });
-      
-      // Warn about extra keys (optional, could be allowed)
-      themeKeys.forEach(key => {
-        if (!contractPart.hasOwnProperty(key)) {
-          const newPath = currentPath ? `${currentPath}.${key}` : key;
-          console.warn(` Extra token not in contract: "${newPath}"`);
-        }
-      });
-    } else {
-      // Leaf node - just check type (optional)
-      if (typeof themePart !== 'string') {
-        errors.push(` Token "${currentPath}" must be a string, got ${typeof themePart}`);
-      }
-    }
-  }
-  
-  validate(contract, theme, path);
-  
-  if (errors.length > 0) {
-    throw new Error(`Theme Contract Validation Failed:\n${errors.join('\n')}`);
-  }
-  
-  return true;
-}
-
-export function createTheme(contract, themeValues) {
-  // Validate at creation time
-  if (contract.__isContract) {
-    contract.__validate(themeValues);
-  } else {
-    validateTheme(contract, themeValues);
-  }
-  
-  // Create the actual theme tokens
-  const tokens = {};
-  
-  function buildTokens(contractPart, themePart, target, path = '') {
-    Object.keys(contractPart).forEach(key => {
-      const newPath = path ? `${path}.${key}` : key;
-      
-      if (typeof contractPart[key] === 'object' && contractPart[key] !== null) {
-        target[key] = {};
-        buildTokens(contractPart[key], themePart[key] || {}, target[key], newPath);
-      } else {
-        target[key] = themePart[key];
-      }
-    });
-  }
-  
-  buildTokens(contract, themeValues, tokens);
-  
-  // Add getter method
-  tokens.get = (path) => {
-    const parts = path.split('.');
-    let current = tokens;
-    for (const part of parts) {
-      if (current === undefined) return undefined;
-      current = current[part];
-    }
-    return current;
-  };
-  
-  return tokens;
-}