chaincss 1.12.8

package/node/plugins/vite-plugin.js

@@ -0,0 +1,215 @@
+// node/plugins/vite-plugin.js
+import path from 'node:path';
+import fs from 'node:fs';
+import { createRequire } from 'node:module';
+import CleanCSS from 'clean-css';
+import { $, run, compile as originalCompile, chain } from '../btt.js';
+
+const require = createRequire(import.meta.url);
+
+// Optional: Try to load prefixer
+let prefixer;
+try {
+  const ChainCSSPrefixer = (await import('../prefixer.js')).default;
+  prefixer = new ChainCSSPrefixer({ enabled: true });
+} catch (err) {
+  console.warn('ChainCSS: Prefixer not available, autoprefixing disabled');
+  prefixer = { process: async (css) => ({ css }) };
+}
+
+// Cache for processed files
+const fileCache = new Map();
+const compiledCache = new Map();
+
+// Helper to compile script without temp files
+const compileScript = (scriptBlock, filename, get) => {
+  const dirname = path.dirname(filename);
+  
+  // Reset CSS output
+  chain.cssOutput = '';
+  
+  // Create a function from the script - no temp files!
+  const fn = new Function(
+    '$',
+    'run',
+    'compile',
+    'chain',
+    'get',
+    '__filename',
+    '__dirname',
+    scriptBlock
+  );
+  
+  // Execute with helpers
+  fn($, run, originalCompile, chain, get, filename, dirname);
+  
+  return chain.cssOutput || '';
+};
+
+const processJavascriptBlocks = (content, filename, get) => {
+  const blocks = content.split(/<@([\s\S]*?)@>/gm);
+  let output = '';
+  
+  for (let i = 0; i < blocks.length; i++) {
+    if (i % 2 === 0) {
+      // Static content
+      output += blocks[i];
+    } else {
+      // JavaScript block
+      const css = compileScript(blocks[i], filename, get);
+      if (css && typeof css === 'string') {
+        output += css;
+      }
+    }
+  }
+  
+  return output.trim();
+};
+
+const processJCSSFile = (filePath) => {
+  const abs = path.resolve(filePath);
+  
+  // Return cached result if available
+  if (fileCache.has(abs)) return fileCache.get(abs);
+  
+  // Check if file exists
+  if (!fs.existsSync(abs)) {
+    throw new Error(`ChainCSS: File not found: ${abs}`);
+  }
+  
+  const content = fs.readFileSync(abs, 'utf8');
+  const dirname = path.dirname(abs);
+  
+  // Create get function for this file
+  const get = (relativePath) => {
+    const targetPath = path.resolve(dirname, relativePath);
+    return processJCSSFile(targetPath);
+  };
+  
+  // Process the file
+  const result = processJavascriptBlocks(content, abs, get);
+  
+  // Cache the result
+  fileCache.set(abs, result);
+  return result;
+};
+
+// Minify and prefix CSS
+const processCSS = async (css, filepath, options = {}) => {
+  const { minify = true, prefix = true } = options;
+  let processed = css;
+  
+  // Add prefixing
+  if (prefix && prefixer) {
+    try {
+      const result = await prefixer.process(css, { from: filepath });
+      processed = result.css;
+    } catch (err) {
+      console.warn(`ChainCSS prefixer error in ${filepath}:`, err.message);
+    }
+  }
+  
+  // Minify
+  if (minify) {
+    const minified = new CleanCSS({ level: 2 }).minify(processed);
+    if (minified.errors.length) {
+      console.warn(`ChainCSS minification errors in ${filepath}:`, minified.errors);
+    }
+    return minified.styles;
+  }
+  
+  return processed;
+};
+
+export default function chaincssVite(opts = {}) {
+  const {
+    extension = '.jcss',
+    minify = process.env.NODE_ENV === 'production',
+    prefix = true,
+    hmr = true
+  } = opts;
+  
+  return {
+    name: 'vite-plugin-chaincss',
+    enforce: 'pre',
+    
+    // Transform .jcss files
+    async transform(code, id) {
+      if (!id.endsWith(extension)) return null;
+      
+      try {
+        // Create get function for root file
+        const dirname = path.dirname(id);
+        const get = (relativePath) => {
+          const targetPath = path.resolve(dirname, relativePath);
+          return processJCSSFile(targetPath);
+        };
+        
+        // Process the file
+        let css = processJavascriptBlocks(code, id, get);
+        
+        // Process CSS (prefix + minify)
+        css = await processCSS(css, id, { minify, prefix });
+        
+        // In development, inject CSS for HMR
+        if (process.env.NODE_ENV !== 'production') {
+          return {
+            code: `
+              // ChainCSS HMR
+              const id = ${JSON.stringify(id)};
+              const css = ${JSON.stringify(css)};
+              
+              // Add style to head
+              let style = document.querySelector(\`style[data-chaincss="\${id}"]\`);
+              if (!style) {
+                style = document.createElement('style');
+                style.setAttribute('data-chaincss', id);
+                document.head.appendChild(style);
+              }
+              style.textContent = css;
+              
+              // HMR handling
+              if (import.meta.hot) {
+                import.meta.hot.accept((newModule) => {
+                  if (newModule?.default) {
+                    style.textContent = newModule.default;
+                  }
+                });
+                
+                import.meta.hot.dispose(() => {
+                  style.remove();
+                });
+              }
+              
+              export default css;
+            `,
+            map: null
+          };
+        }
+        
+        // Production: just export CSS
+        return {
+          code: `export default ${JSON.stringify(css)};`,
+          map: null
+        };
+        
+      } catch (err) {
+        this.error(`ChainCSS error in ${id}: ${err.message}`);
+        return null;
+      }
+    },
+    
+    // Handle HMR updates
+    handleHotUpdate({ file, server }) {
+      if (file.endsWith(extension)) {
+        // Invalidate cache for changed file
+        fileCache.delete(file);
+        // Trigger reload
+        server.ws.send({
+          type: 'full-reload',
+          path: '*'
+        });
+      }
+    }
+  };
+}

package/node/plugins/webpack-plugin.js

@@ -0,0 +1,41 @@
+// node/plugins/webpack-plugin.js
+const path = require('path');
+const { execSync } = require('child_process');
+const fs = require('fs');
+
+class ChainCSSWebpackPlugin {
+  constructor(options = {}) {
+    this.options = {
+      atomic: process.env.NODE_ENV === 'production',
+      input: './src/styles/main.jcss',
+      output: './dist',
+      ...options
+    };
+  }
+
+  apply(compiler) {
+    compiler.hooks.beforeCompile.tapAsync('ChainCSSPlugin', async (params, callback) => {
+      try {
+        const inputPath = path.resolve(process.cwd(), this.options.input);
+        const outputPath = path.resolve(process.cwd(), this.options.output);
+        
+        if (!fs.existsSync(inputPath)) {
+          console.warn('ChainCSS: No main.jcss file found, skipping...');
+          callback();
+          return;
+        }
+        
+        const cmd = `node ${path.join(__dirname, '../chaincss.js')} ${inputPath} ${outputPath} ${this.options.atomic ? '--atomic' : ''}`;
+        execSync(cmd, { stdio: 'inherit' });
+        
+        console.log('ChainCSS compiled successfully');
+        callback();
+      } catch (err) {
+        console.error('ChainCSS compilation failed:', err.message);
+        callback(err);
+      }
+    });
+  }
+}
+
+module.exports = ChainCSSWebpackPlugin;

package/node/prefixer.js

@@ -0,0 +1,237 @@
+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: npm install 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

@@ -0,0 +1,43 @@
+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
+  --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
+
+Examples:
+  chaincss style.jcss style.css
+  chaincss style.jcss style.css --watch
+  chaincss style.jcss style.css --browsers ">5%,last 2 versions"
+  chaincss style.jcss style.css --no-prefix
+    `
+}
+
+module.exports = strVal;

package/package.json

@@ -0,0 +1,133 @@
+{
+  "name": "chaincss",
+  "version": "1.12.8",
+  "description": "Chainable CSS-in-JS with build-time compilation, atomic CSS, and zero-runtime options",
+  "keywords": [
+    "css",
+    "css-in-js",
+    "chaincss",
+    "atomic-css",
+    "zero-runtime",
+    "design-tokens",
+    "react",
+    "nextjs",
+    "vite",
+    "webpack"
+  ],
+  "author": "Rommel Caneos",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/melcanz08/chaincss.git"
+  },
+  "homepage": "https://chaincss.dev",
+  "bugs": {
+    "url": "https://github.com/melcanz08/chaincss/issues"
+  },
+  "exports": {
+    ".": {
+      "types": "./types.d.ts",
+      "browser": {
+        "import": "./browser/index.js",
+        "require": "./browser/index.js"
+      },
+      "node": {
+        "import": "./node/btt.js",
+        "require": "./node/btt.js"
+      },
+      "default": "./browser/index.js"
+    },
+    "./react": {
+      "types": "./types.d.ts",
+      "browser": {
+        "import": "./browser/react-hooks.js",
+        "require": "./browser/react-hooks.js"
+      },
+      "default": "./browser/react-hooks.js"
+    },
+    "./browser/*": {
+      "browser": {
+        "import": "./browser/*",
+        "require": "./browser/*"
+      }
+    },
+    "./node/*": {
+      "node": {
+        "import": "./node/*",
+        "require": "./node/*"
+      }
+    },
+    "./vite-plugin": {
+      "types": "./types.d.ts",
+      "import": "./node/plugins/vite-plugin.js",
+      "require": "./node/plugins/vite-plugin.js",
+      "default": "./node/plugins/vite-plugin.js"
+    },
+    "./webpack-plugin": {
+      "types": "./types.d.ts",
+      "import": "./node/plugins/webpack-plugin.js",
+      "require": "./node/plugins/webpack-plugin.js",
+      "default": "./node/plugins/webpack-plugin.js"
+    },
+    "./next-plugin": {
+      "types": "./types.d.ts",
+      "import": "./node/plugins/next-plugin.js",
+      "require": "./node/plugins/next-plugin.js",
+      "default": "./node/plugins/next-plugin.js"
+    },
+    "./loader": {
+      "types": "./types.d.ts",
+      "import": "./node/loaders/chaincss-loader.js",
+      "require": "./node/loaders/chaincss-loader.js",
+      "default": "./node/loaders/chaincss-loader.js"
+    }
+  },
+  "types": "types.d.ts",
+  "files": [
+    "browser/",
+    "node/",
+    "shared/",
+    "types.d.ts",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "bin": {
+    "chaincss": "./node/chaincss.js"
+  },
+  "dependencies": {
+    "chokidar": "^3.5.3",
+    "clean-css": "^5.3.3"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "autoprefixer": "^10.0.0",
+    "postcss": "^8.5.6",
+    "browserslist": "^4.28.1",
+    "caniuse-db": "^1.0.30001770"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "autoprefixer": {
+      "optional": true
+    },
+    "postcss": {
+      "optional": true
+    },
+    "browserslist": {
+      "optional": true
+    },
+    "caniuse-db": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "sideEffects": false
+}