@melcanz85/chaincss 1.5.7 → 1.5.9

package/README.md

@@ -61,7 +61,7 @@ try {
 
 --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.
+ *** 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 and the css selector is the value of the block() method which is always at the end of the chain.
 
 // Variables for consistent styling
 const bodyBgColor = '#f0f0f0';
@@ -71,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')
@@ -94,7 +94,7 @@ const header = chaincss
   .block('header');
 
 // Logo
-const logoImgHeight = chaincss
+const logoImgHeight = chain
   .height(logoHeight)
   .block('.logo img');
 
@@ -122,12 +122,12 @@ module.exports = {
 @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')
+    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')
   );
 @>
 }
@@ -199,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.7",
+  "version": "1.5.9",
   "description": "A simple package transpiler for js to css",
   "main": "chaincss.js",
   "bin": {