@melcanz85/chaincss 1.7.3 → 1.8.0

package/README.md

@@ -3,17 +3,17 @@
 [![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)
 
-⚡ **Compile-time CSS-in-JS** - Runs during build, not in the browser!
+**Compile-time CSS-in-JS** - Runs during build, not in the browser!
 
 A simple JavaScript-to-CSS transpiler that converts JS objects into optimized CSS **without runtime overhead**.
 
-## 🚀 Installation
+## Installation
 
 ```bash
     npm install @melcanz85/chaincss
 ```
 
-📦 Usage (Node.js)
+**Usage (Node.js)**
 
 Quick Setup
 
@@ -26,50 +26,68 @@ Quick Setup
 ### Update your package.json scripts:
 
     "scripts": {
-      "start": "concurrently \"nodemon server.js\" \"nodemon --watch chaincss/*.jcss --watch processor.js --exec 'node processor.js'\""
+      "start": "concurrently \"nodemon server.js\" \"nodemon --watch chaincss/*.jcss --watch processor.cjs --exec 'node processor.cjs'\""
     }
 
 
-## 🔧 CSS Prefixing
+## CSS Prefixing
 
-ChainCSS offers two prefixing modes:
+ChainCSS offers two prefixing approaches:
 
-### 1. Lightweight Mode (Default, ~50KB)
+### 1. Built-in Prefixer (Auto Mode, Default)
 
-Built-in prefixer that handles the most common CSS properties:
+Our lightweight built-in prefixer handles the most common CSS properties:
 - Flexbox & Grid
 - Transforms & Animations
 - Filters & Effects
 - Text effects
 - Box properties
 
-No additional installation needed!
-
-### 2. Full Mode (Uses Autoprefixer)
+**No additional installation needed!** Just run:
+```bash
+    npx chaincss input.jcss output.css --watch
+```
+### 2. Full Autoprefixer Mode (Complete Coverage)
 
 For complete prefixing coverage of all CSS properties:
 
 ```bash
     npm install autoprefixer postcss browserslist caniuse-db
+    
+    # then run this command 
+    npx chaincss input.jcss output.css --watch --prefixer-mode full
+
 ```
-Project Structure
 
-Create this folder structure in your project:
+### 3. Make Full Mode Permanent
+
+Edit your package.json script:
+
+    "scripts": {
+        "css:watch": "chaincss src/styles.jcss dist/styles.css --watch --prefixer-mode full",
+        "start": "concurrently \"npm run dev\" \"npm run css:watch\""
+    }
+
+
+**Project Structure (vanillajs, vanilla nodejs)**
+
+Create this folder structure in your vanillaJS project:
 
     your-project/
     ├── chaincss/                 # ChainCSS source files
     │   ├── main.jcss             # Main entry file
     │   ├── chain.jcss            # Chaining definitions
-    │   └── processor.js          # Processing script
+    │   └── processor.js         # Processing script
     ├── public/                   # Output files
     │   ├── index.html
     │   └── style.css             # Generated CSS
     ├── node_modules/
     ├── package.json
-    └── package-lock.json
+    ├── package.lock.json
+    └── server.js
 
 
-The Initialization processor Setup
+**The Initialization processor Setup**
 
 In chaincss/processor.js:
 
@@ -83,107 +101,60 @@ In chaincss/processor.js:
       process.exit(1);
     }
 
-💻 Code Examples
+## Code Examples
 
     //--Chaining File (chaincss/chain.jcss):
 
-### This is where the chaining happens all codes must be in javascript syntax. 
-    The chain methods are the same as the css properties but in camelCase mode 
-    and the exception of the background property which is shorten to 'bg' only for
-    example background-color is bgColor() in chaincss. The value of the block() 
-    method is the css selector which is always at the end of the chain or block.
-
-    // Variables for consistent styling
-    const bodyBg = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
-    const headerBg = 'rgba(255, 255, 255, 0.95)';
-    const bodyFontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, 
-                            Ubuntu, sans-serif";
-    const headerBoxShadow = '0 2px 20px rgba(0,0,0,0.1)';
-    const logoFontSize = '1.8rem';
-
-    const reset = chain
-      .margin('0')
-        .padding('0')
-        .boxSizing('border-box')
-        .block('*');
-
-    const body = chain
-        .fontFamily(bodyFontFamily)
-        .lineHeight('1.6')
-        .color('#1e293b')
-        .bg(bodyBg)
-        .block('body');
-
-        /* Header/Navigation */
-    const navbar = chain
-        .bg(headerBg)
-        .backdropFilter('blur(10px)')
-        .padding('1rem 5%')
-        .position('fixed')
-        .width('100%')
-        .top('0')
-        .zIndex('1000')
-        .boxShadow(headerBoxShadow)
+**This is where the chaining happens all codes must be in javascript syntax. 
+    The chain methods are the same as the css properties but in camelCase mode. 
+    The value of the block() method is the css selector which is always at the 
+    end of the chain or block.**
+
+       /* Header/Navigation */
+    const navbar = $().backdropFilter('blur(10px)').padding('1rem 5%')
+        .position('fixed').width('100%').top('0').zIndex('1000').boxShadow(headerBoxShadow)
         .block('.navbar');
 
-    const nav_container = chain
-        .maxWidth('1200px')
-        .margin('0 auto')
-        .display('flex')
-        .justifyContent('space-between')
-        .alignItems('center')
-        .block('.nav-container');
-
-    const logo = chain
-        .fontSize(logoFontSize)
-        .fontWeight('700')
-        .bg('linear-gradient(135deg, #667eea, #764ba2)')
-        .backgroundClip('text')
-        .textFillColor('transparent')
-        .letterSpacing('-0.5px')
-        .block('.logo');
+    const nav_container = $().maxWidth('1200px').margin('0 auto').display('flex')
+        .justifyContent('space-between').alignItems('center').block('.nav-container');
 
     module.exports = {
-      reset,
       navbar,
-      nav_container,
-      logo
+      nav_container
     };
 
 
-//--Main File (chaincss/main.jcss):
+**Main File (chaincss/main.jcss):**
 
     <@
       // Import chaining definitions
       const style = get('./chain.jcss');
 
       // Override specific styles
-      style.logo.fontSize = '2rem';
+      style.navbar.padding = '2rem 5%';
       
       // Compile to CSS
       compile(style);
     @>
 
     @keyframes fadeInUp {
-    <@
-      run(
-        chain.opacity('0').transform('translateY(20px)').block('from'),
-        chain.opacity('1').transform('translateY(0)').block('to'),
-      );
-    @>
+        <@
+            const from = $().opacity('0').transform('translateY(20px)').block('from');
+            const to = $().chain.opacity('1').transform('translateY(0)').block('to');
+            run(from,to);
+        @>
     }
 
     /* Responsive */
     @media (max-width: 768px) {
-    <@
-      run(
-        chain.fontSize('2.5rem').block('.hero h1'),
-        chain.flexDirection('column').gap('1rem').block('.stats'),
-        chain.flexDirection('column').alignItems('center').block('.cta-buttons'),
-        chain.gridTemplateColumns('1fr').block('.example-container'),
-        chain.display('none').block('.nav-links')
-      );
-    @>
+        <@
+            const hero_h1 = $().fontSize('2.5rem').block('.hero h1');
+            const stats = $().flexDirection('column').gap('1rem').block('.stats');
+            const cta_buttons = $().flexDirection('column').alignItems('center').block('.cta-buttons');
+            const ex_container = $().gridTemplateColumns('1fr').block('.example-container');
+            const nav_links = $().display('none').block('.nav-links');
+            run(hero_h1,stats,cta_buttons,ex_container,nav_links);
+        @>
     }
 
 
@@ -231,7 +202,7 @@ ChainCSS works great with React and Vite! Here's how to set it up:
 
 **src/components/Nav/navbar.jcss**
 
-    const navbar = chain
+    const navbar = $()
     .bg('rgba(255, 255, 255, 0.95)')
     .backdropFilter('blur(10px)')
     .padding('1rem 5%')
@@ -259,15 +230,11 @@ ChainCSS works great with React and Vite! Here's how to set it up:
 
     // You can mix a default style using run() method or even vanilla css (without delimeters)
     <@
-    run(
-        chain.margin('0').padding('0').boxSizing('border-box').block('*'),
-        chain
-        .fontFamily("-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif")
-        .lineHeight('1.6')
-        .color('#1e293b')
-        .bg('linear-gradient(135deg, #667eea 0%, #764ba2 100%)')
-        .block('body')
-    );
+    const reset =  $().margin('0').padding('0').boxSizing('border-box').block('*');
+    const body =  $().fontFamily("-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
+                Oxygen, Ubuntu, sans-serif").lineHeight('1.6').color('#1e293b')
+                .background('linear-gradient(135deg, #667eea 0%, #764ba2 100%)').block('body');
+    run(reset, body);
     @>
 
     .button {
@@ -281,42 +248,44 @@ ChainCSS works great with React and Vite! Here's how to set it up:
 
     <@
     // Import all component styles
-    const nav = get('./src/components/Navbar/navbar.jcss');
-    const hero = get('./src/components/Hero/hero.jcss');
-
-    // Merge for one compilation
-    const allStyles = Object.assign({},nav,hero);
-
-    // Overwrite padding in navbar chain!
-    nav.navbar.padding = '1rem 5%';
-
-    compile(allStyles);
+    const nav = get('./src/components/nav/nav.jcss');
+    const hero = get('./src/components/sect_hero/hero.jcss');
+    const feature = get('./src/components/sect_feature/feature.jcss');
+    const example = get('./src/components/sect_example/example.jcss');
+    const gstart = get('./src/components/sect_gStart/gStart.jcss');
+    const footer = get('./src/components/footer/footer.jcss');
+
+    const merged = Object.assign({},nav,hero,feature,example,gstart,footer);
+
+        // Overwrite your chaining file
+        nav.logo.textDecoration = 'none';
+        //example.css_output.overflowWrap = 'break-word';
+        
+    compile(merged);
     @>
 
     // you can add keyframes and media queries in this setup
     @keyframes fadeInUp {
     <@
-    run(
-        chain.opacity('0').transform('translateY(20px)').block('from'),
-        chain.opacity('1').transform('translateY(0)').block('to'),
-    );
+        const from =  $().opacity('0').transform('translateY(20px)').block('from');
+        const to =  $().opacity('1').transform('translateY(0)').block('to');
+        run(from,to);
     @>
-    }
+}
 
     /* Responsive */
     @media (max-width: 768px) {
     <@
-    run(
-        chain.fontSize('2.5rem').block('.hero h1'),
-        chain.flexDirection('column').gap('1rem').block('.stats'),
-        chain.flexDirection('column').alignItems('center').block('.cta-buttons'),
-        chain.gridTemplateColumns('1fr').block('.example-container'),
-        chain.display('none').block('.nav-links')
-    );
+        const hero =  $().fontSize('2.5rem').block('.hero h1');
+        const stats =  $().flexDirection('column').gap('1rem').block('.stats');
+        const ctaButtons =  $().flexDirection('column').alignItems('center').block('.cta-buttons');
+        const exampleContainer =  $().gridTemplateColumns('1fr').block('.example-container');
+        const navLinks =  $().display('none').block('.nav-links');
+        run(hero,stats,ctaButtons,exampleContainer,navLinks);
     @>
-    }
+}
 
-Benefits of This Approach
+**Benefits of This Approach**
 
     ✅ Component Co-location: Styles live next to their components
 
@@ -328,9 +297,10 @@ Benefits of This Approach
 
     ✅ No Redundancy: Styles are automatically merged and optimized
 
-**This structure is much cleaner and follows React best practices! Each component owns its styles, and `main.jcss` simply orchestrates the compilation.**
+This structure is much cleaner and follows React best practices! Each component owns its styles, and 
+    `main.jcss` simply orchestrates the compilation.
 
-🎯 Best Practices with React
+## 🎯 Best Practices with React
 
     1. Component-Specific Styles
 
@@ -360,7 +330,7 @@ Benefits of This Approach
       .backgroundColor(theme.secondary)
       .block('.btn:hover');
 
-📝 Notes
+## 📝 Notes
     
     You can directly put css syntax code on your main.jcss file.
 
@@ -373,12 +343,12 @@ Benefits of This Approach
     You can modify your style in between get() and compile() in the 
     main file it will overwrite the styles in the chain file.
 
-🎨 Editor Support
+## 🎨 Editor Support
 
 Since .jcss files are just JavaScript files with ChainCSS syntax, you can 
 easily enable proper syntax highlighting in your editor:
 
-VS Code
+**VS Code**
 
 Add this to your project's .vscode/settings.json:
 
@@ -388,7 +358,7 @@ Add this to your project's .vscode/settings.json:
         }
     }
 
-WebStorm / IntelliJ IDEA
+**WebStorm / IntelliJ IDEA**
 
     Go to Settings/Preferences → Editor → File Types
 
@@ -396,13 +366,13 @@ WebStorm / IntelliJ IDEA
 
     Click + and add *.jcss to the registered patterns
 
-Vim / Neovim
+**Vim / Neovim**
 
 Add to your .vimrc or init.vim:
 
     au BufRead,BufNewFile *.jcss setfiletype javascript
 
-Sublime Text
+**Sublime Text**
 
     Create or edit ~/Library/Application Support/Sublime Text/Packages/User/JCSS.sublime-settings:
 
@@ -413,7 +383,7 @@ json
     "syntax": "Packages/JavaScript/JavaScript.sublime-syntax"
 }
 
-Atom
+**Atom**
 
 Add to your config.cson:
 coffeescript
@@ -428,10 +398,11 @@ coffeescript
 
 Other Editors
 
-Most modern editors allow you to associate file extensions with language modes. Simply configure your editor to treat .jcss files as JavaScript.
+Most modern editors allow you to associate file extensions with language modes. 
+Simply configure your editor to treat .jcss files as JavaScript.
 
 
-✨ Features
+## Features
 
 Status               Feature             Description
 
@@ -440,34 +411,36 @@ Status               Feature             Description
 ✅ Vendor            prefixing           Auto-add -webkit-, -moz-, etc.
 
 ✅ Keyframe          animations          @keyframes support
+
+✅ Media queries     responsive          @media support
                      
 ✅ Source maps       Debug               generated CSS
 
 ✅ Watch             mode                Auto-recompile on file changes
 
 
-## 🚀 Key Differentiators
+### Key Differentiators
 
-- **⚙️ Compile-time, not runtime** - chaincss processes your styles during build, generating pure CSS files. Zero JavaScript execution in the browser means faster page loads!
+- ** Compile-time, not runtime** - chaincss processes your styles during build, generating pure CSS files. Zero JavaScript execution in the browser means faster page loads!
 
-- **🏎️ Performance by design** - Unlike runtime CSS-in-JS libraries, chaincss adds no bundle weight and causes no layout shifts
+- ** Performance by design** - Unlike runtime CSS-in-JS libraries, chaincss adds no bundle weight and causes no layout shifts
 
-- **🔧 Build-time processing** - Your `.jcss` files are transformed before deployment, not in the user's browser
+- ** Build-time processing** - Your `.jcss` files are transformed before deployment, not in the user's browser
 
 
-## 🔄 chaincss vs Other Approaches
+### chaincss vs Other Approaches
 
 |    Feature     |     chaincss      |  Runtime CSS-in-JS  | Tailwind      | Vanilla CSS |
 |----------------|-------------------|---------------------|---------------|-------------|
-| **When CSS is generated** | ⚙️ **Build time** | 🕒 Runtime (browser) | ⚙️ Build time | 📁 Already written |
+| **When CSS is generated** |  **Build time** |  Runtime (browser) |  Build time |  Already written |
 | **Browser work**| None - just serves CSS | Executes JS to generate CSS | None - just serves CSS | None |
-| **Dynamic values**| ✅ Via JS at build time | ✅ Via props at runtime | ⚠️ Limited  | ❌ Manual |
+| **Dynamic values**|  Via JS at build time |  Via props at runtime | ⚠ Limited  |  Manual |
 | **Bundle size** | Just the CSS | CSS + JS runtime | Just the CSS | Just the CSS |
 
-👨‍💻 Contributing
+### 👨‍💻 Contributing
 
     Contributions are welcome! Feel free to open issues or submit pull requests.
 
-📄 License
+### License
 
 MIT © Rommel Caneos

package/chaincss.js

@@ -17,7 +17,10 @@ let prefixerConfig = {
 const prefixer = new ChainCSSPrefixer(prefixerConfig);
 
 const processScript = (scriptBlock) => {
-  const context = vm.createContext({ ...transpilerModule});
+  const context = vm.createContext({ 
+    ...transpilerModule,
+    $: transpilerModule.$
+  });
   const jsCode = scriptBlock.trim();
   const chainScript = new vm.Script(jsCode);
   chainScript.runInContext(context);
@@ -173,7 +176,6 @@ function parseArgs(args) {
     } else if (arg === '--browsers' && args[i + 1]) {
       result.browsers = args[i + 1].split(',');
       i++;
-    // NEW: Add these two
     } else if (arg === '--no-source-map') {
       result.sourceMap = false;
     } else if (arg === '--source-map-inline') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@melcanz85/chaincss",
-  "version": "1.7.3",
+  "version": "1.8.0",
   "description": "A simple package transpiler for js to css",
   "main": "chaincss.js",
   "publishConfig": {

package/transpiler.js

@@ -1,203 +1,159 @@
 const path = require('path');
 const fs = require('fs');
+
 const chain = {
-  cssOutput : undefined,
+  cssOutput: undefined,
   catcher: {},
-
-  // Backgrounds
-  bg(bg){ this.catcher.background = bg; return this; },
-  bgColor(bgc){ this.catcher.backgroundColor = bgc; return this; },
-  bgImage(bgi){ this.catcher.backgroundImage = bgi; return this; },
-  bgRepeat(bgr){ this.catcher.backgroundRepeat = bgr; return this; },
-  bgAttachment(bga){ this.catcher.backgroundAttachment = bga; return this; },
-  bgPosition(bgp){ this.catcher.backgroundPosition = bgp; return this; },
-
-  // Border
-  border(b){ this.catcher.border = b; return this; },
-  borderStyle(bs){ this.catcher.borderStyle = bs; return this; },
-  borderWidth(bw){ this.catcher.borderWidth = bw; return this; },
-  borderColor(bc){ this.catcher.borderColor = bc; return this; },
-  borderRadius(br){ this.catcher.borderRadius = br; return this; },
-  borderSideStyle(side, value){
-    if (side === 'top') {
-      this.catcher.borderTopStyle = value;
-    } else if (side === 'right') {
-      this.catcher.borderRightStyle = value;
-    } else if (side === 'bottom') {
-      this.catcher.borderBottomStyle = value;
-    } else if (side === 'left') {
-      this.catcher.borderLeftStyle = value;
+  cachedValidProperties: [],
+
+  // Initialize properties synchronously
+  initializeProperties() {
+    try {
+      const jsonPath = path.join(__dirname, 'css-properties.json');
+      if (fs.existsSync(jsonPath)) {
+        const data = fs.readFileSync(jsonPath, 'utf8');
+        this.cachedValidProperties = JSON.parse(data);
+        
+      } else {
+        console.log('⚠️ CSS properties not cached, will load on first use');
+      }
+    } catch (error) {
+      console.error('Error loading CSS properties:', error.message);
     }
-    return this;
   },
 
-   // Margin
-  margin(m){ this.catcher.margin = m; return this; },
-  marginTop(mt){ this.catcher.marginTop = mt; return this; },
-  marginRight(mr){ this.catcher.marginRight = mr; return this; },
-  marginBottom(mb){ this.catcher.marginBottom = mb; return this; },
-  marginLeft(ml){ this.catcher.marginLeft = ml; return this; },
-
-  // Padding
-  padding(p){ this.catcher.padding = p; return this; },
-  paddingTop(pt){ this.catcher.paddingTop = pt; return this; },
-  paddingRight(pr){ this.catcher.paddingRight = pr; return this; },
-  paddingBottom(pb){ this.catcher.paddingBottom = pb; return this; },
-  paddingLeft(pl){ this.catcher.paddingLeft = pl; return this; },
-
-  // Height, Width and Max-width
-  width(w){ this.catcher.width = w; return this; },
-  minWidth(mnw){ this.catcher.minWidth = mnw; return this; },
-  maxWidth(mxw){ this.catcher.maxWidth = mxw; return this; },
-  height(h){ this.catcher.height = h; return this; },
-  minHeight(mnh){ this.catcher.minHeight = mnh; return this; },
-  maxHeight(mxh){ this.catcher.maxHeight = mxh; return this; },
-
-  // Outline
-  outline(o){ this.catcher.outline = o; return this; },
-  outlineColor(oc){ this.catcher.outlineColor = oc; return this; },
-  outlineStyle(os){ this.catcher.outlineStyle = os; return this; },
-  outlineWidth(ow){ this.catcher.outlineWidth = ow; return this; },
-  outlineOffset(oo){ this.catcher.outlineOffset = oo; return this; },
-
-  // Text 
-  color(c){ this.catcher.color = c; return this; },
-  direction(d){ this.catcher.direction = d; return this; },
-  unicodeBidi(ub){ this.catcher.unicodeBidi = ub; return this; },
-  verticalAlign(va){ this.catcher.verticalAlign = va; return this; },
-  textTransform(t){ this.catcher.textTransform = t; return this; },
-  textShadow(s){ this.catcher.textShadow = s; return this; },
-  textAlign(ta){ this.catcher.textAlign = ta; return this; },
-  textAlignLast(tal){ this.catcher.textAlignLast = tal; return this; },
-  textDecoration(value, style){
-    if (style === undefined) {
-      this.catcher.textDecoration = value;
-    } else {
-      this.catcher.textDecorationStyle = value;
+  async getCSSProperties() {
+    try {
+      const jsonPath = path.join(__dirname, 'css-properties.json');
+      
+      // Check if file already exists
+      try {
+        await fs.promises.access(jsonPath);
+        const existingData = await fs.promises.readFile(jsonPath, 'utf8');
+        const objProp = JSON.parse(existingData);
+        this.cachedValidProperties = objProp;
+        return objProp;
+      } catch {
+        const url = 'https://raw.githubusercontent.com/mdn/data/main/css/properties.json';
+        const response = await fetch(url);
+        const data = await response.json();
+        const allProperties = Object.keys(data);
+        
+         // Strip vendor prefixes and remove duplicates
+        const baseProperties = new Set();
+        
+        allProperties.forEach(prop => {
+          // Remove vendor prefixes (-webkit-, -moz-, -ms-, -o-)
+          const baseProp = prop.replace(/^-(webkit|moz|ms|o)-/, '');
+          baseProperties.add(baseProp);
+        });
+        
+        // Convert Set back to array and sort
+        const cleanProperties = Array.from(baseProperties).sort();
+        
+        // Save cleaned properties
+        await fs.promises.writeFile(jsonPath, JSON.stringify(cleanProperties, null, 2));
+        
+        this.cachedValidProperties = cleanProperties;
+        return cleanProperties;
+      }
+    } catch (error) {
+      console.error('Error loading CSS properties:', error.message);
+      return [];
     }
-    return this;
   },
 
-  // Text-spacing 
-  textIndent(ti){ this.catcher.textIndent = ti; return this; },
-  letterSpacing(ls){ this.catcher.letterSpacing = ls; return this; },
-  lineHeight(lh){ this.catcher.lineHeight = lh; return this; },
-  wordSpacing(ws){ this.catcher.wordSpacing = ws; return this; },
-  whiteSpace(sws){ this.catcher.whiteSpace = sws; return this; },
-
-  // Font 
-  font(f){ this.catcher.font = f; return this; },
-  fontFamily(ff){ this.catcher.fontFamily = ff; return this; },
-  fontStyle(fs){ this.catcher.fontStyle = fs; return this; },
-  fontWeight(fw){ this.catcher.fontWeight = fw; return this; },
-  fontVariant(fv){ this.catcher.fontVariant = fv; return this; },
-  fontSize(fsz){ this.catcher.fontSize = fsz; return this; },
-
-  // List Style
-  listStyle(ls){ this.catcher.listStyle = ls; return this; },
-  listStyleType(lst){ this.catcher.listStyleType = lst; return this; },
-  listStyleImage(lsi){ this.catcher.listStyleImage = lsi; return this; },
-  listStylePosition(lsp){ this.catcher.listStylePosition = lsp; return this; },
-
-  // Display 
-  display(d){ this.catcher.display = d; return this; },
-  flex(f){ this.catcher.flex = f; return this; },
-  alignContent(ac){ this.catcher.alignContent = ac; return this; }, 
-  alignSelf(as){ this.catcher.alignSelf = as; return this; },
-  alignItems(ai){ this.catcher.alignItems = ai; return this; },
-  justifyContent(jc){ this.catcher.justifyContent = jc; return this; },
-  flexWrap(fw){ this.catcher.flexWrap = fw; return this; },
-  flexGrow(fg){ this.catcher.flexGrow = fg; return this; },
-  flexDirection(fd){ this.catcher.flexDirection = fd; return this; },
-  order(o){ this.catcher.order = o; return this; },
-  visibility(v){ this.catcher.visibility = v; return this; },
-
-  // Position
-  position(p){ this.catcher.position = p; return this; },
-  top(t){ this.catcher.top = t; return this; },
-  left(l){ this.catcher.left = l; return this; },
-  bottom(b){ this.catcher.bottom = b; return this; },
-
-  // Overflow
-  overflow(o){ this.catcher.overflow = o; return this; },
-  overflowX(ox){ this.catcher.overflowX = ox; return this; },
-  overflowY(oy){ this.catcher.overflowY = oy; return this; },
-  overflowWrap(ow){ this.catcher.overflowWrap = ow; return this; },
+  // Synchronous version for internal use
+  getCachedProperties() {
+    return this.cachedValidProperties;
+  }
+};
 
-  animation(a){ this.catcher.animation = a; return this; },
-  textFillColor(tfc){ this.catcher.textFillColor = tfc; return this; },
-  backgroundClip(bc){ this.catcher.backgroundClip = bc; return this; },
-  gridTemplateColumns(gtc){ this.catcher.gridTemplateColumns = gtc; return this; },
-  right(r){ this.catcher.right = r; return this; },
-  transform(tf){ this.catcher.transform = tf; return this; },
-  boxShadow(bs){ this.catcher.boxShadow = bs; return this; },
-  backdropFilter(bf){ this.catcher.backdropFilter = bf; return this; },
-  gap(g){ this.catcher.gap = g; return this; },
+// Initialize properties synchronously when module loads
+chain.initializeProperties();
 
-  // Float
-  float(f){ this.catcher.float = f; return this; },
-  clear(c){ this.catcher.clear = c; return this; },
+function $(){
+  const catcher = {};
   
-  // Z-index
-  zIndex(zi){ this.catcher.zIndex = zi; return this; },
-
-  // Box-sizing
-  boxSizing(bs){ this.catcher.boxSizing = bs; return this; },
-
-  // Opacity
-  opacity(o){ this.catcher.opacity = o; return this; },
+  // Use cached properties if available
+  const validProperties = chain.cachedValidProperties;
   
-  // Transition
-  transition(t){ this.catcher.transition = t; return this; },
-
-  // Cursor
-  cursor(c){ this.catcher.cursor = c; return this; },
-
-  content(c){ this.catcher.content = c; return this; },
-
-  accentColor(ac){ this.catcher.accentColor = ac; return this; },
-
-  all(a){ this.catcher.all = a; return this; },
-
-  // Block
-  block(...args) {
-    let objectCss = args.length === 0 ? {} : {selectors: args};
-    Object.assign(objectCss, this.catcher);
-    this.catcher = {};
-    return objectCss;
-  },
-
-  // Navbar
-  navBar(...args) {
-    if (arguments.length === 0 && args.length === 0) {
-      throw new Error('navBar() requires selector argument.');
+  const handler = {
+    get: (target, prop) => {
+      if (prop === 'block') {
+        return function(...args) {chain
+          // If no args, just return current catcher
+          if (args.length === 0) {
+            const result = { ...catcher };
+            // Clear catcher
+            Object.keys(catcher).forEach(key => delete catcher[key]);
+            return result;
+          }
+          
+          // Create result with selectors
+          const result = {
+            selectors: args,
+            ...catcher
+          };
+          
+          // Clear catcher
+          Object.keys(catcher).forEach(key => delete catcher[key]);
+          
+          return result;
+        };
+      }
+      
+      // Convert camelCase to kebab-case for CSS property
+      const cssProperty = prop.replace(/([A-Z])/g, '-$1').toLowerCase();
+      
+      // Validate property exists (optional) - use cached properties
+      if (validProperties && validProperties.length > 0 && !validProperties.includes(cssProperty)) {
+        console.warn(`⚠️ Warning: '${cssProperty}' may not be a valid CSS property`);
+      }
+      
+      // Return a function that sets the value
+      return function(value) {
+        catcher[prop] = value;
+        return proxy; // Return proxy for chaining
+      };
     }
-    let objectResult = {};
-    objectResult.navUl = this.display('flex').listStyle('none').margin('0').padding('0').block(`${args[0]} ${args[1]}`);
-    objectResult.navLi = this.margin('0 10px').block(`${args[0]} ${args[1]} ${args[2]}`);
-    objectResult.navA = this.color('#fff').textDecoration('none').fontWeight('bold').borderRadius('3px').block(`${args[0]} ${args[1]} ${args[2]} ${args[3]}`);
-    objectResult.navAhover = this.textDecoration('underline').bgColor('#555').block(`${args[0]} ${args[1]} ${args[2]} ${args[3]}:hover`);
-    return objectResult;
+  };
+  
+  // Create the proxy
+  const proxy = new Proxy({}, handler);
+  
+  // Trigger async load if needed (don't await)
+  if (chain.cachedValidProperties.length === 0) {
+    chain.getCSSProperties().catch(err => {
+      console.error('Failed to load CSS properties:', err.message);
+    });
   }
+  
+  return proxy;
 };
 
-
 const run = (...args) => {
-  let str1 = '';
-  args.forEach(
-    (value)=>{
-      let str2 = `${value.selectors.toString()} {\n`;
+  let cssOutput = '';
+  
+  args.forEach((value) => {
+    if (value && value.selectors) {
+      let rule = `${value.selectors.join(', ')} {\n`;
+      
+      // Add all properties (excluding 'selectors')
       for (let key in value) {
-        if(key !== 'selectors'){
-          const kebabKey = key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-          str2 += `\t${kebabKey}: ${value[key]};\n`;
+        if (key !== 'selectors' && value.hasOwnProperty(key)) {
+          const kebabKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+          rule += `  ${kebabKey}: ${value[key]};\n`;
         }
       }
-      str2 += `}\n\n`;
-      str1 += str2;
+      
+      rule += `}\n\n`;
+      cssOutput += rule;
     }
-  );
-  chain.cssOutput = str1.trim();
+  });
+  
+  chain.cssOutput = cssOutput.trim();
+  return cssOutput.trim();
 };
 
 const compile = (obj) => {
@@ -206,21 +162,23 @@ const compile = (obj) => {
   for (const key in obj) {
     if (obj.hasOwnProperty(key)) {
       const element = obj[key];
-      let selectors = element.selectors || []; // Provide default empty array if selectors is undefined
+      let selectors = element.selectors || [];
       let elementCSS = '';
+      
       for (let prop in element) {
         if (element.hasOwnProperty(prop) && prop !== 'selectors') {
           // Convert camelCase to kebab-case
-          const kebabKey = prop.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+          const kebabKey = prop.replace(/([A-Z])/g, '-$1').toLowerCase();
           elementCSS += `  ${kebabKey}: ${element[prop]};\n`;
         }
       }
-      selectors = selectors.join();
-      cssString += `${selectors} {\n${elementCSS}}\n`;
+      
+      cssString += `${selectors.join(', ')} {\n${elementCSS}}\n`;
     }
   }
 
-  chain.cssOutput = cssString;
+  chain.cssOutput = cssString.trim();
+  return cssString.trim();
 };
 
 const get = (filename) => {
@@ -228,25 +186,29 @@ const get = (filename) => {
   if (fileExt !== '.jcss') {
     throw new Error(`Import error: ${filename} must have .jcss extension`);
   }
+  
   // Try to resolve the path
   const resolvedPath = path.resolve(process.cwd(), filename);
   
   // Check if file exists
-  const exists = fs.existsSync(resolvedPath);
-  
-  if (!exists) {
-    throw new Error('File not found: '+filename+'(resolved to: '+resolvedPath+')');
+  if (!fs.existsSync(resolvedPath)) {
+    throw new Error(`File not found: ${filename} (resolved to: ${resolvedPath})`);
   }
   
   return require(resolvedPath);
 };
 
+// Make chaincss available globally
 if (typeof global !== 'undefined') {
   global.chain = chain;
+  global.run = run;
+  global.compile = compile;
+  global.$ = $;
 }
 
 module.exports = {
   chain,
+  $,
   run,
   compile,
   get