@melcanz85/chaincss 1.5.2 → 1.5.3

package/README.md

@@ -1,6 +1,6 @@
 # @melcanz85/chaincss
 
-    A JavaScript-to-CSS transpiler that converts JS objects into optimized CSS.
+    A  Simple JavaScript-to-CSS transpiler that converts JS objects into optimized CSS.
 
     ## 🚀 Installation
 
@@ -10,26 +10,162 @@
 
 📦 Usage (Node.js)
 
-    const chaincss = require('@melcanz85/chaincss');
+    First download nodemon and concurrently packages then change the script on your package.json to:
 
-    const css = chaincss({
-      body: {
-        margin: 0,
-        padding: '20px',
-        backgroundColor: '#f0f0f0'
+    "scripts": {
+        "start": "concurrently \"nodemon server.js\" \"nodemon --watch chaincss.jcss --watch processor.js --watch chain.jcss  --exec 'node chaincss/processor.js'\""
       }
-    });
 
-    console.log(css);
-    // Output: body { margin: 0; padding: 20px; background-color: #f0f0f0; }
-
-🖥️ Usage (CLI)
-
-    # Convert JS file to CSS
-    npx chaincss input.js output.css
-
-    # Watch mode (auto-recompile on changes)
-    npx chaincss input.js output.css --watch
+    you do this to make your development easy as it watches the changes to those files and automatically update the css output of your project in this case the chainstyle.css.
+
+    Make a folder for your chaincsss and make 3 files, 1 is your main file (chaincss.jcss) then for the chaining (chain.jcss) and then the third is the processor file (processor.js).
+
+    Make a public folder for your frontend and make 2 files index.html for your website structure and css file for the output of your chaincss in this example (chainstyle.css) you can name your files whatever you want just make sure its the same with the script on your package.json and file extensions for your chaincss files should be .jcss except for the processor file which should be a js file.
+
+    Example structure of the project:
+
+    website/
+    │
+    ├── chaincss/                      # Folder 1
+    │   ├── chaincss.jcss
+    │   └── chain.jcss
+    |   |__ processor.js
+    │
+    ├── node_modules/                   # Folder 2 (dependencies)
+    │   └── [dependency files and folders]
+    │
+    ├── public/                         # Folder 3
+    │   ├── index.html
+    │   └── chainstyle.css
+    │
+    ├── package.json                    # Package configuration file
+    │
+    └── package-lock.json               # Locked dependency versions
+
+    In processor.js put this lines of code: 
+
+    const jss = require("@melcanz85/chaincss");
+    try {
+      // Process your main file (chaincss.jcss) and write to the output (.
+      jss.processJSS('./chaincss/chaincss.jcss', './public/style.css');
+    } catch (err) {
+      console.error('Error processing JSS file:', err.stack);
+      // Exit the process with a non-zero status code
+      process.exit(1);
+    }
+
+    Example codes:
+
+    //main (chaincss.jcss)
+    <@
+      const style = get('../../chaincss.jcss/chain.jcss');
+
+      // STYLE MODIFICATION HAPPENS HERE 
+      style.navA.color = 'red';
+      
+      // COMPILING THE STYLE JS TO PURE CSS OR THE STYLE.CSS FILE
+      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'),
+        chaincss.display('flex').flexDirection('column').justifyContent('space-around').padding('4px').margin('5px 1px').width('30px').height('30px').cursor('pointer').block('.burger'),
+        chaincss.display('none').flexDirection('column').block('nav ul'),
+        chaincss.margin('10px 1px').block('nav ul li'),
+        chaincss.display('flex').block('nav ul.active'),
+        chaincss.width('100px').marginTop('10px').block('.search-bar'),
+        chaincss.width('100%').block('.search-bar input'),
+        chaincss.flex('1 1 100%').padding('50px').block('.box'),
+        chaincss.position('static').block('footer')
+      );
+    @>
+    }
+
+    ## As you notice theres 2 blocks in the code each surrounded by <@ @> delimiters except for the @media. The first block is when you make a separate chaining file, in this example (chain.jcss). First line retrieves the file using get() method. Then in between retrieving file and compiling is where you can modify your style it will overwrite the styling from your chaining code (chain.jcss). This is useful when your project is done and you want to make small changes/modifications to your style, instead of scrolling down to your chaining code  you can just overwrites it in the main jcss. 
+
+    Note: you can write css syntax code directly in the main jcss as you can see in the example the @media css syntax for mobile rendering but anything that is jcss syntax you have to put it inside <@ @> delimiters.
+
+    //Chaining (chain.jcss) example:
+
+      const bodyBgColor = '#f0f0f0';
+       const headerBgCOlor = '#333';
+      const bodyLineHeight = '1.6';
+      const bodyFontFamily = 'Arial, sans-serif';
+      const headerAlignItems = 'center';
+      const searchBarFontSize = '16px';
+
+      const resetDefaultBrowStyle = chaincss
+        .margin('0')
+        .padding('0')
+        .block('body', 'h1', 'h2', 'h3', 'p', 'ul');
+
+      const bodyStyle = chaincss
+        .fontFamily(bodyFontFamily)
+        .lineHeight(bodyLineHeight)
+        .bgColor(bodyBgColor)
+        .block('body');
+      
+      // Site Header
+      const header = chaincss
+        .display('flex')
+        .alignItems(headerAlignItems)
+        .justifyContent('space-between')
+        .bgColor(headerBgCOlor)
+        .color(texcolor)
+        .padding('10px 20px')
+        .flexWrap('wrap')
+        .block('header');
+
+      const logoImgHeigth = chaincss
+        .height(logoHeight)
+        .block('.logo img');
+
+      // Burger button
+      const burgerWrapper = chaincss
+        .display('none')
+        .block('.burgerWrapper');
+
+      const burgerLine = chaincss
+        .width('100%')
+        .height('3px')
+        .bgColor('white')
+        .block('.line');
+
+      // search Bar
+      const divSearchBar = chaincss
+        .display('flex')
+        .flexGrow('1')
+        .justifyContent('flex-end')
+        .block('.search-bar');
+
+      const inputSearchBar = chaincss
+        .padding('5px')
+        .fontSize(searchBarFontSize)
+        .border('none')
+        .borderRadius('4px')
+        .width('200px')
+        .transition('w 0.4s ease-in-out')
+        .block('.search-bar input');
+
+    module.exports = {
+        resetDefaultBrowStyle,
+        bodyStyle,
+        header,
+        logoImgHeigth,
+        burgerWrapper,
+        burgerLine,
+        divSearchBar,
+        inputSearchBar
+       };
+
+    ## In this example you can see the chaining pattern of code its like writing css code but in javascript fashion where you can manipulate its values through variables. In css you have to scroll down and find each block to change it. In this case you just find it through variables.
 
 ✨ Features
 

package/package.json

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