@melcanz85/chaincss 1.5.6 → 1.5.8

package/README.md

@@ -33,12 +33,12 @@ Create this folder structure in your project:
 
 your-project/
 ├── chaincss/                      # ChainCSS source files
-│   ├── chaincss.jcss              # Main entry file
+│   ├── main.jcss              # Main entry file
 │   ├── chain.jcss                  # Chaining definitions
 │   └── processor.js                 # Processing script
 ├── public/                          # Output files
 │   ├── index.html
-│   └── chainstyle.css               # Generated CSS
+│   └── style.css               # Generated CSS
 ├── node_modules/
 ├── package.json
 └── package-lock.json
@@ -47,44 +47,21 @@ Processor Setup
 
 In chaincss/processor.js:
 
-const jss = require("@melcanz85/chaincss");
+const chain = require("@melcanz85/chaincss");
 
 try {
   // Process main file and output CSS
-  jss.processJSS('./chaincss/chaincss.jcss', './public/chainstyle.css');
+  chain.processor('./chaincss/main.jcss', './public/style.css');
 } catch (err) {
   console.error('Error processing chainCSS file:', err.stack);
   process.exit(1);
 }
 
 💻 Code Examples
-Main File (chaincss/chaincss.jcss):
 
-<@
-  // Import chaining definitions
-  const style = get('./chain.jcss');
+--Chaining File (chaincss/chain.jcss):
 
-  // Override specific styles
-  style.navA.color = 'red';
-  
-  // Compile to CSS
-  compile(style);
-@>
-
-@media (max-width: 768px) {
-<@
-  run(
-    chaincss.flexDirection('column').alignItems('flex-start').block('header'),
-    chaincss.order(1).block('.logo'),
-    chaincss.order(2).block('.search-bar'),
-    chaincss.order(3).block('h1'),
-    chaincss.order(5).block('nav'),
-    chaincss.order(4).display('flex').width('100%').justifyContent('flex-end').block('.burgerWrapper')
-  );
-@>
-}
-
-Chaining File (chaincss/chain.jcss):
+ *** This is where the chaining happens all codes here are javascript codes the methods are the css properties but since its a js code its a camelCase syntax example the property font-family its fontFamily in chaincss syntax.
 
 // Variables for consistent styling
 const bodyBgColor = '#f0f0f0';
@@ -94,20 +71,20 @@ const headerAlignItems = 'center';
 const logoHeight = '50px';
 
 // Reset browser defaults
-const resetDefaultBrowStyle = chaincss
+const resetDefaultBrowStyle = chain
   .margin('0')
   .padding('0')
   .block('body', 'h1', 'h2', 'h3', 'p', 'ul');
 
 // Body styles
-const bodyStyle = chaincss
+const bodyStyle = chain
   .fontFamily(bodyFontFamily)
   .lineHeight('1.6')
   .bgColor(bodyBgColor)
   .block('body');
 
 // Header styles
-const header = chaincss
+const header = chain
   .display('flex')
   .alignItems(headerAlignItems)
   .justifyContent('space-between')
@@ -117,7 +94,7 @@ const header = chaincss
   .block('header');
 
 // Logo
-const logoImgHeight = chaincss
+const logoImgHeight = chain
   .height(logoHeight)
   .block('.logo img');
 
@@ -128,6 +105,34 @@ module.exports = {
   logoImgHeight
 };
 
+
+--Main File (chaincss/main.jcss):
+
+<@
+  // Import chaining definitions
+  const style = get('./chain.jcss');
+
+  // Override specific styles
+  style.header.bgColor = 'red';
+  
+  // Compile to CSS
+  compile(style);
+@>
+
+@media (max-width: 768px) {
+<@
+  run(
+    chain.flexDirection('column').alignItems('flex-start').block('header'),
+    chain.order(1).block('.logo'),
+    chain.order(2).block('.search-bar'),
+    chain.order(3).block('h1'),
+    chain.order(5).block('nav'),
+    chain.order(4).display('flex').width('100%').justifyContent('flex-end').block('.burgerWrapper')
+  );
+@>
+}
+
+
 📝 Notes
     
     You can directly put css syntax on your main file.
@@ -194,18 +199,24 @@ Most modern editors allow you to associate file extensions with language modes.
 
 
 ✨ Features
-Status  Feature Description
-✅ Basic JS → CSS  Convert plain JS objects to CSS
-🚧 Keyframe animations @keyframes support
-🚧 Vendor prefixing  Auto-add -webkit-, -moz-, etc.
-🚧 Source maps Debug generated CSS
-🚧 Watch mode  Auto-recompile on file changes
+
+Status               Feature             Description
+
+✅ Basic             JS → CSS            Convert plain JS objects to CSS
+
+🚧 Keyframe          animations          @keyframes support
+
+🚧 Vendor            prefixing           Auto-add -webkit-, -moz-, etc.
+
+🚧 Source maps       Debug               generated CSS
+
+🚧 Watch             mode                Auto-recompile on file changes
 
 ✅ = Working, 🚧 = Coming soon
-👨‍💻 Contributing
 
-Contributions are welcome! Feel free to open issues or submit pull requests.
 
+👨‍💻 Contributing
+Contributions are welcome! Feel free to open issues or submit pull requests.
 
 📄 License
 

package/package.json

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