@melcanz85/chaincss 1.5.3 → 1.5.5

package/README.md

@@ -1,193 +1,213 @@
 # @melcanz85/chaincss
 
-    A  Simple JavaScript-to-CSS transpiler that converts JS objects into optimized CSS.
+[![npm version](https://badge.fury.io/js/@melcanz85%2Fchaincss.svg)](https://badge.fury.io/js/@melcanz85%2Fchaincss)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-    ## 🚀 Installation
+A simple JavaScript-to-CSS transpiler that converts JS objects into optimized CSS.
 
-    ```bash
-    npm install @melcanz85/chaincss
-    ```
+## 🚀 Installation
 
-📦 Usage (Node.js)
+```bash
+npm install @melcanz85/chaincss
 
-    First download nodemon and concurrently packages then change the script on your package.json to:
-
-    "scripts": {
-        "start": "concurrently \"nodemon server.js\" \"nodemon --watch chaincss.jcss --watch processor.js --watch chain.jcss  --exec 'node chaincss/processor.js'\""
-      }
-
-    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);
+📦 Usage (Node.js)
+Quick Setup
+
+    Install development dependencies:
+
+bash
+
+npm install --save-dev nodemon concurrently
+
+    Update your package.json scripts:
+
+json
+
+"scripts": {
+  "start": "concurrently \"nodemon server.js\" \"nodemon --watch chaincss/*.jcss --watch processor.js --exec 'node processor.js'\""
+}
+
+Project Structure
+
+Create this folder structure in your project:
+text
+
+your-project/
+├── chaincss/                      # ChainCSS source files
+│   ├── chaincss.jcss              # Main entry file
+│   ├── chain.jcss                  # Chaining definitions
+│   └── processor.js                 # Processing script
+├── public/                          # Output files
+│   ├── index.html
+│   └── chainstyle.css               # Generated CSS
+├── node_modules/
+├── package.json
+└── package-lock.json
+
+Processor Setup
+
+In chaincss/processor.js:
+javascript
+
+const jss = require("@melcanz85/chaincss");
+
+try {
+  // Process main file and output CSS
+  jss.processJSS('./chaincss/chaincss.jcss', './public/chainstyle.css');
+} catch (err) {
+  console.error('Error processing JSS file:', err.stack);
+  process.exit(1);
+}
+
+💻 Code Examples
+Main File (chaincss/chaincss.jcss)
+javascript
+
+<@
+  // Import chaining definitions
+  const style = get('./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)
+javascript
+
+// Variables for consistent styling
+const bodyBgColor = '#f0f0f0';
+const headerBgColor = '#333';
+const bodyFontFamily = 'Arial, sans-serif';
+const headerAlignItems = 'center';
+const logoHeight = '50px';
+
+// Reset browser defaults
+const resetDefaultBrowStyle = chaincss
+  .margin('0')
+  .padding('0')
+  .block('body', 'h1', 'h2', 'h3', 'p', 'ul');
+
+// Body styles
+const bodyStyle = chaincss
+  .fontFamily(bodyFontFamily)
+  .lineHeight('1.6')
+  .bgColor(bodyBgColor)
+  .block('body');
+
+// Header styles
+const header = chaincss
+  .display('flex')
+  .alignItems(headerAlignItems)
+  .justifyContent('space-between')
+  .bgColor(headerBgColor)
+  .color('#fff')
+  .padding('10px 20px')
+  .block('header');
+
+// Logo
+const logoImgHeight = chaincss
+  .height(logoHeight)
+  .block('.logo img');
+
+module.exports = {
+  resetDefaultBrowStyle,
+  bodyStyle,
+  header,
+  logoImgHeight
+};
+
+📝 Notes
+
+    CSS syntax can be written directly in .jcss files
+
+    ChainCSS syntax must be wrapped in <@ @> delimiters
+
+    The get() function imports chaining definitions from other files
+
+    Style modifications between get() and compile() will override existing styles
+
+🎨 Editor Support
+
+Since .jcss files are just JavaScript files with ChainCSS syntax, you can easily enable proper syntax highlighting in your editor:
+VS Code
+
+Add this to your project's .vscode/settings.json:
+json
+
+{
+    "files.associations": {
+        "*.jcss": "javascript"
     }
+}
 
-    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')
-      );
-    @>
-    }
+WebStorm / IntelliJ IDEA
 
-    ## 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.
+    Go to Settings/Preferences → Editor → File Types
 
-✨ Features
+    Select JavaScript in the list
+
+    Click + and add *.jcss to the registered patterns
 
-    Status          Feature                   Description
-    ✅              Basic JS → CSS            Convert plain JS objects to CSS
+Vim / Neovim
 
-    🚧              Nested selectors          Support for parent { child {} } syntax
+Add to your .vimrc or init.vim:
+vim
 
-    🚧              Media queries             @media rule support
+au BufRead,BufNewFile *.jcss setfiletype javascript
 
-    🚧              Keyframe animations       @keyframes support
+Sublime Text
 
-    🚧              Vendor prefixing          Auto-add -webkit-, -moz-, etc.
+Create or edit ~/Library/Application Support/Sublime Text/Packages/User/JCSS.sublime-settings:
+json
 
-    🚧              Source maps               Debug generated CSS
+{
+    "extensions": ["jcss"],
+    "syntax": "Packages/JavaScript/JavaScript.sublime-syntax"
+}
 
-    🚧              Watch mode                Auto-recompile on file changes
+Atom
 
-    ✅ = Working
-    🚧 = Coming soon
+Add to your config.cson:
+coffeescript
+
+"*":
+  core:
+    customFileTypes:
+      "source.js": [
+        "jcss"
+      ]
+
+Other Editors
+
+Most modern editors allow you to associate file extensions with language modes. Simply configure your editor to treat .jcss files as JavaScript.
+✨ 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
 
+✅ = Working, 🚧 = Coming soon
+👨‍💻 Contributing
 
-    📄 License
+Contributions are welcome! Feel free to open issues or submit pull requests.
+📄 License
 
-    MIT © Rommel Caneos
+MIT © Rommel Caneos

package/chaincss.js

@@ -15,13 +15,12 @@ console.log(__dirname);
 const processScript = (scriptBlock) => {
   //const output = 'cssOutput = undefined;';
   const context = vm.createContext({ 
-    ...transpilerModule // Only expose what's needed
+    ...transpilerModule 
   });
-  //vm.runInContext('cssOutput = undefined;', context);
-  const jsCode = scriptBlock.trim(); //`(function() { ${scriptBlock.trim()} })();`;  Wrap script in IIFE
+  const jsCode = scriptBlock.trim(); 
   const chainScript = new vm.Script(jsCode);
-  chainScript.runInContext(context); // Execute in isolated context
-  return context.chain.cssOutput; // Return the processed output
+  chainScript.runInContext(context);
+  return context.chain.cssOutput; 
 };
 
 // CSS Minification Function
@@ -60,7 +59,7 @@ const processor = (inputFile, outputFile) => {
   const outputDir = path.resolve(outputFile);
   const trimmedCSS = outputCSS.trim();
   const minCSS = minifyCss(trimmedCSS);
-  fs.writeFileSync(outputDir, minCSS, 'utf8'); // Write processed CSS
+  fs.writeFileSync(outputDir, minCSS, 'utf8'); 
 };
 
 // Watch function

package/package.json

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

package/transpiler.js

@@ -193,7 +193,7 @@ 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) {