@melcanz85/chaincss 1.9.0 → 1.9.2

package/README.md

@@ -1,5 +1,6 @@
 # ChainCSS
 
+![npm downloads](https://img.shields.io/npm/dm/@melcanz85/chaincss)
 [![npm version](https://img.shields.io/npm/v/@melcanz85/chaincss.svg)](https://www.npmjs.com/package/@melcanz85/chaincss)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
@@ -36,7 +37,7 @@ ChainCSS is a revolutionary CSS-in-JS solution that gives you **two powerful mod
 **Perfect for:** Static styles, layouts, design systems — anything that doesn't change.
 
 ```javascript
-    // chaincss/button.jcss
+    // src/button.jcss
     const button = $()
       .backgroundColor('#667eea')
       .color('white')
@@ -47,14 +48,9 @@ ChainCSS is a revolutionary CSS-in-JS solution that gives you **two powerful mod
     module.exports = { button };
 ````
 
-```javascript
-    // chaincss/processor.js
-    const chaincss = require('@melcanz85/chaincss');
-
-    chaincss.processor('./chaincss/main.jcss', './dist/style.css');
-    //  Outputs pure CSS: .btn { background: #667eea; color: white; ... }
-    //  Zero JavaScript sent to browser
-    //  Max performance, smallest bundle
+```bash
+  npx chaincss ./src/main.jcss ./style --watch & node server.js
+  # ./style/global.css generated!
 ````
 ### Mode 2: Runtime (React Hooks)
 
@@ -79,9 +75,11 @@ ChainCSS is a revolutionary CSS-in-JS solution that gives you **two powerful mod
       
       return <button className={styles.button}>{children}</button>;
     }
-    //  Styles injected at runtime
-    //  Automatic cleanup on unmount
-    //  Fully dynamic based on props
+    // ✅ Styles injected at runtime
+    // ✅ Automatic cleanup on unmount
+    // ✅ Fully dynamic based on props
+
+
 ```
 
 ## Use BOTH in the Same Project!
@@ -107,25 +105,25 @@ ChainCSS is a revolutionary CSS-in-JS solution that gives you **two powerful mod
 
 ## Features at a Glance
 
-Feature             Status      Description
+    Feature             Status      Description
 
-Zero Runtime        ✅          Pure CSS output, no JS in browser
+    Zero Runtime        ✅          Pure CSS output, no JS in browser
 
-React Hooks         ✅          Dynamic runtime styles when needed
+    React Hooks         ✅          Dynamic runtime styles when needed
 
-Atomic CSS          ✅          90% smaller CSS files
+    Atomic CSS          ✅          90% smaller CSS files
 
-TypeScript          ✅          First-class type support
+    TypeScript          ✅          First-class type support
 
-Design Tokens       ✅          Centralized design system
+    Design Tokens       ✅          Centralized design system
 
-Auto-prefixing      ✅          Built-in + full Autoprefixer
+    Auto-prefixing      ✅          Built-in + full Autoprefixer
 
-Source Maps         ✅          Debug your .jcss files
+    Source Maps         ✅          Debug your .jcss files
 
-Watch Mode          ✅          Instant recompilation
+    Watch Mode          ✅          Instant recompilation
 
-VM Security         ✅          Safe code execution
+    VM Security         ✅          Safe code execution
 
 
 ## The ChainCSS API
@@ -154,13 +152,13 @@ VM Security         ✅          Safe code execution
 
 ```text
     your-project/
-    ├── chaincss/
-    │   ├── main.jcss           # Entry point - imports & compiles
-    │   ├── processor.cjs        # Build script
-    │   └── *.jcss              # Your style definitions
+    ├── node_module
     ├── src/
-    │   └── style/
-    │       └── global.css      # Generated CSS
+    │   ├── main.jcss           # Entry point - imports & compiles
+    │   └── chain.jcss          # Your style definitions           
+    │   
+    ├── style/
+    │   └── global.css          # Generated CSS
     └── package.json
 ```
 ### Basic Example
@@ -187,15 +185,6 @@ VM Security         ✅          Safe code execution
     @>
 ````
 
-**chaincss/processor.js**
-
-```javascript
-
-const chaincss = require('@melcanz85/chaincss');
-
-chaincss.processor('./chaincss/main.jcss', './src/style');
-// Generates ./src/style/global.css
-```
 ## Advanced Features
 
 ### Design Tokens
@@ -249,22 +238,19 @@ ChainCSS uses **secure VM sandboxing** to safely execute your .jcss files. No ev
 ### With Node.js (Vanilla)
 
 ```bash
-    # 1. Install
-    npm install @melcanz85/chaincss
-
-    # 2. Create processor.cjs
-    echo "const chaincss = require('@melcanz85/chaincss');
-    chaincss.processor('./chaincss/main.jcss', './dist');" > processor.js
+# 1. Install
+npm install @melcanz85/chaincss
 
-    # 3. Create your first .jcss file
-    mkdir chaincss
-    echo "const hello = $().color('red').block('.hello');
-    compile({ hello });" > chaincss/main.jcss
+# 2. Create your first .jcss file
+mkdir chaincss
+echo "const hello = $().color('red').block('.hello');
+compile({ hello });" > chaincss/main.jcss
 
-    # 4. Build
-    node processor.js
-    # ✅ ./dist/global.css generated!
+# 3. Build
+  npx chaincss ./src/main.jcss ./style --watch & node server.js
+# ./style/global.css generated!
 ```
+
 ### With React + Vite
 
 ```bash
@@ -278,6 +264,7 @@ ChainCSS uses **secure VM sandboxing** to safely execute your .jcss files. No ev
     # 3. Create component with styles
     mkdir -p src/components/Button
 ```
+
 **src/components/Button/Button.jsx**
 
 ```jsx
@@ -304,19 +291,19 @@ ChainCSS uses **secure VM sandboxing** to safely execute your .jcss files. No ev
 
 ## Performance Comparison
 
-Approach                Runtime Cost        Bundle Size         Dynamic Styles      Learning Curve
+    Approach                Runtime Cost    Bundle Size         Dynamic Styles      Learning Curve
 
-**ChainCSS (Build)**  **Zero**            **Just CSS**          Build-time          Low
+    **ChainCSS (Build)**    **Zero**        **Just CSS**        Build-time          Low
 
-**ChainCSS (Runtime)**  Minimal             Small runtime       ✅ Full             Low
+    **ChainCSS (Runtime)**  Minimal         Small runtime       Full                Low
 
-Styled Components       5-10KB runtime      CSS + runtime       ✅ Full             Medium
+    Styled Components       5-10KB runtime  CSS + runtime       Full                Medium
 
-Emotion                 8-12KB runtime      CSS + runtime       ✅ Full             Medium
+    Emotion                 8-12KB runtime  CSS + runtime       Full                Medium
 
-Tailwind                Zero                Just CSS            ⚠️ Limited          High
+    Tailwind                Zero            Just CSS            Limited             High
 
-CSS Modules             Zero                Just CSS            ❌ None             Low
+    CSS Modules             Zero            Just CSS            None                Low
 
 **ChainCSS is the ONLY library that gives you BOTH worlds!**
 
@@ -346,39 +333,38 @@ Create chaincss.config.js in your project root:
     };
 ```
 
-
 ## API Reference
 
 ### Core Functions
 
-Function                        Description
+    Function                        Description
 
-`$()`                           Create a new chain builder
+    `$()`                           Create a new chain builder
 
-`.block(selector)`              End chain and assign selector(s)
+    `.block(selector)`              End chain and assign selector(s)
 
-`compile(styles)`               Compile style objects to CSS
+    `compile(styles)`               Compile style objects to CSS
 
-`run(...styles)`                Process inline styles
+    `run(...styles)`                Process inline styles
 
-`get(filename)`                 Import .jcss files
+    `get(filename)`                 Import .jcss files
 
-`processor(input, output)`      Build-time processor
+    `processor(input, output)`      Build-time processor
 
 
 ### React Hooks
 
-Hook                                        Description
+    Hook                                        Description
 
-`useChainStyles(styles, options)`           Basic styles hook
+    `useChainStyles(styles, options)`           Basic styles hook
 
-`useDynamicChainStyles(factory, deps)`      Styles that depend on props/state
+    `useDynamicChainStyles(factory, deps)`      Styles that depend on props/state
 
-`useThemeChainStyles(styles, theme)`        Theme-aware styles
+    `useThemeChainStyles(styles, theme)`        Theme-aware styles
 
-`ChainCSSGlobal`                            Global styles component
+    `ChainCSSGlobal`                            Global styles component
 
-`cx(...classes)`                            Conditional class merging
+    `cx(...classes)`                            Conditional class merging
 
 
 ## Editor Support
@@ -405,7 +391,6 @@ Hook                                        Description
     au BufRead,BufNewFile `*.jcss` setfiletype javascript
 ```
 
-
 ## Roadmap
 
 * Zero-runtime compilation

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@melcanz85/chaincss",
-  "version": "1.9.0",
+  "version": "1.9.2",
   "description": "A simple package transpiler for js to css",
   "main": "index.js",
   "module": "index.react.js",
@@ -40,7 +40,8 @@
   },
   "dependencies": {
     "chokidar": "^3.5.3",
-    "clean-css": "^5.3.3"
+    "clean-css": "^5.3.3",
+    "vm2": "^3.9.19"
   },
   "peerDependencies": {
     "autoprefixer": "^10.0.0",