@melcanz85/chaincss 1.9.3 → 1.9.5

package/README.md

@@ -12,7 +12,6 @@ ChainCSS is a revolutionary CSS-in-JS solution that gives you **two powerful mod
 
 **Runtime hooks** → Dynamic, prop-based styles when you need them
 
-
 ## Installation
 
 ```bash
@@ -28,7 +27,7 @@ ChainCSS is a revolutionary CSS-in-JS solution that gives you **two powerful mod
     ├── src/
     │   ├── main.jcss           # Entry point - imports & compiles
     │   └── *.jcss              # Your style definitions             
-    ├── style/                  # Generated CSS will be stored stored here
+    ├── style/                  # Generated CSS will be stored here
     ├── index.html              # Your web page
     └── package.json
 ```
@@ -48,13 +47,13 @@ ChainCSS is a revolutionary CSS-in-JS solution that gives you **two powerful mod
       .borderRadius('4px')
       .block('.btn');
 
-    module.exports = { button };
+    module.exports =  button;
 ````
 **in your main.jcss**
 
 ```javascript
   <@
-    const button = get('./button.js');
+    const button = get('./button.jcss');
 
     compile(button);
   @>
@@ -72,9 +71,10 @@ OR with vanilla nodejs project
   # ./style/global.css generated!
 ````
 * Note: running `npx chaincss ./src/main.jcss ./style --watch ` for the first time will
-        generate chaincss.config.js with default values. You can edit this to 
+        generate ./chaincss.config.js with default values. You can edit this to 
         customize your build!.
 
+
 ### Mode 2: Runtime (React Hooks)
 
 **Perfect for:** Dynamic styles that respond to props, state, or themes.
@@ -98,9 +98,9 @@ OR with vanilla nodejs project
       
       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
 
 
 ```
@@ -146,8 +146,6 @@ OR with vanilla nodejs project
 
     Watch Mode          ✅          Instant recompilation
 
-    VM Security         ✅          Safe code execution
-
 
 ## The ChainCSS API
 
@@ -156,7 +154,7 @@ OR with vanilla nodejs project
 ```javascript
     // jQuery-like fluent API
     const style = $()
-      .propertyName('value')      // camelCase → kebab-case
+      .propertyName('value')      
       .anotherProperty('value')
       .block('.selector');         // End the chain with selector(s)
 
@@ -185,13 +183,13 @@ OR with vanilla nodejs project
       .fontWeight('600')
       .block('.btn');
 
-    module.exports = { button };
+    module.exports = button;
 ```
 **chaincss/main.jcss**
 
 ```javascript
     <@
-      const { button } = get('./button.jcss');
+      const button  = get('./button.jcss');
       compile({ button });
     @>
 ````
@@ -239,10 +237,6 @@ OR with vanilla nodejs project
 **Before (standard CSS):** 4,823 chars
 **After (atomic CSS):** 499 chars → **90% smaller!**
 
-### Built-in Security
-
-ChainCSS uses **secure VM sandboxing** to safely execute your .jcss files. No eval, no global leaks, no security risks.
-
 
 ## Quick Start Guides
 
@@ -304,9 +298,9 @@ compile({ hello });" > chaincss/main.jcss
 
     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
 
@@ -316,33 +310,7 @@ compile({ hello });" > chaincss/main.jcss
 
     CSS Modules             Zero            Just CSS            None                Low
 
-**ChainCSS is the ONLY library that gives you BOTH worlds!**
-
-
-## Configuration
-
-Create chaincss.config.js in your project root:
-
-```javascript
-
-    module.exports = {
-      // Atomic CSS optimization
-      atomic: {
-        enabled: true,
-        threshold: 3,        // Min usage for atomic conversion
-        naming: 'hash'       // 'hash' | 'readable' | 'short'
-      },
-      
-      // Prefixer options
-      prefixer: {
-        mode: 'auto',        // 'auto' or 'full'
-        browsers: ['> 0.5%', 'last 2 versions']
-      },
-      
-      // Source maps
-      sourceMaps: true
-    };
-```
+**ChainCSS is the ONLY library that gives you DUAL options**
 
 ## API Reference
 
@@ -350,32 +318,32 @@ Create chaincss.config.js in your project root:
 
     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
 
-    `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
@@ -402,23 +370,6 @@ Create chaincss.config.js in your project root:
     au BufRead,BufNewFile `*.jcss` setfiletype javascript
 ```
 
-## Roadmap
-
-* Zero-runtime compilation
-
-* React hooks
-
-* Atomic CSS optimization
-
-* Design tokens
-
-* TypeScript support
-
-* Vue/Svelte integrations (coming soon)
-
-* Plugin system (coming soon)
-
-
 ## Contributing
 
 Contributions are welcome! Whether it's:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@melcanz85/chaincss",
-  "version": "1.9.3",
+  "version": "1.9.5",
   "description": "A simple package transpiler for js to css",
   "main": "index.js",
   "module": "index.react.js",
@@ -21,6 +21,7 @@
     "transpiler.js",
     "tokens.js",
     "react-hooks.js",
+    "strVal.js",
     "atomic-optimizer.js",
     "cache-manager.js",
     "prefixer.js",

package/strVal.js

@@ -0,0 +1,43 @@
+const strVal = {
+	userConf: `// ChainCSS Configuration
+module.exports = {
+  atomic: {
+    enabled: false,
+    threshold: 3,
+    naming: 'hash',
+    cache: true,
+    cachePath: './.chaincss-cache',
+    minify: true
+  },
+  prefixer: {
+    mode: 'full',
+    browsers: ['> 0.5%', 'last 2 versions', 'not dead'],
+    enabled: true,
+    sourceMap: false,
+    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;