@melcanz85/chaincss 1.11.5 → 1.12.1

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/strVal.js

@@ -1,5 +1,5 @@
 const strVal = {
-	userConf: `// Project Configuration
+  userConf: `// Project Configuration
 module.exports = {
   atomic: {
     enabled: true,
@@ -18,7 +18,7 @@ module.exports = {
   }
 };
 `,
-	cli_opt_guide: `
+  cli_opt_guide: `
 ChainCSS - JavaScript-powered CSS preprocessor
 
 Usage: 

package/package.json

@@ -1,38 +1,79 @@
 {
   "name": "@melcanz85/chaincss",
-  "version": "1.11.5",
-  "description": "A simple package transpiler for js to css",
+  "version": "1.12.1",
+  "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",
       "node": {
-        "require": "./node/index.js"
+        "require": "./node/btt.js",
+        "import": "./node/btt.js"
       },
       "browser": {
-        "import": "./browser/index.js"
+        "import": "./browser/rtt.js",
+        "require": "./browser/rtt.js"
       },
-      "default": "./browser/index.js"
+      "default": "./browser/rtt.js"
     },
-    "./node": {
+    "./react": {
       "types": "./types.d.ts",
-      "require": "./node/index.js"
+      "browser": {
+        "import": "./browser/react-hooks.js",
+        "require": "./browser/react-hooks.js"
+      },
+      "default": "./browser/react-hooks.js"
     },
-    "./browser": {
+    "./vite-plugin": {
       "types": "./types.d.ts",
-      "import": "./browser/index.js"
+      "import": "./node/plugins/vite-plugin.js",
+      "require": "./node/plugins/vite-plugin.js",
+      "default": "./node/plugins/vite-plugin.js"
     },
-    "./react": {
+    "./webpack-plugin": {
       "types": "./types.d.ts",
-      "browser": {
-        "import": "./browser/index.js"
-      },
-      "default": "./browser/index.js"
+      "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": [
-    "node/",
     "browser/",
+    "node/",
     "shared/",
     "types.d.ts",
     "README.md",
@@ -40,28 +81,27 @@
   ],
   "publishConfig": {
     "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/melcanz08/chaincss.git"
+    "registry": "https://registry.npmjs.org/",
+    "provenance": true
   },
-  "homepage": "https://melcanz08.github.io/chaincss-website",
   "bin": {
     "chaincss": "./node/chaincss.js"
   },
   "dependencies": {
     "chokidar": "^3.5.3",
-    "clean-css": "^5.3.3",
-    "vm2": "^3.9.19"
+    "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",
-    "postcss": "^8.5.6"
+    "caniuse-db": "^1.0.30001770"
   },
   "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
     "autoprefixer": {
       "optional": true
     },
@@ -75,14 +115,8 @@
       "optional": true
     }
   },
-  "keywords": [
-    "css",
-    "js",
-    "transpiler",
-    "compiler",
-    "css-in-js",
-    "react"
-  ],
-  "author": "Rommel Caneos",
-  "license": "MIT"
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "sideEffects": false
 }