@melcanz85/chaincss 1.5.2 → 1.5.4

package/README.md

@@ -1,57 +1,163 @@
 # @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
+
+```bash
+npm install @melcanz85/chaincss
+```
+
+## 📦 Usage (Node.js)
+
+### Quick Setup
+
+1. **Install development dependencies:**
+```bash
+npm install --save-dev nodemon concurrently
+```
+
+2. **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:
+
+```
+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
+};
+```
+
+## ✨ 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*
+
+## 📝 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
+
+## 👨‍💻 Contributing
+
+Contributions are welcome! Feel free to open issues or submit pull requests.
+
+## 📄 License
+
+MIT © Rommel Caneos
 
-    ## 🚀 Installation
-
-    ```bash
-    npm install @melcanz85/chaincss
-    ```
-
-📦 Usage (Node.js)
-
-    const chaincss = require('@melcanz85/chaincss');
-
-    const css = chaincss({
-      body: {
-        margin: 0,
-        padding: '20px',
-        backgroundColor: '#f0f0f0'
-      }
-    });
-
-    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
-
-✨ Features
-
-    Status          Feature                   Description
-    ✅              Basic JS → CSS            Convert plain JS objects to CSS
-
-    🚧              Nested selectors          Support for parent { child {} } syntax
-
-    🚧              Media queries             @media rule support
-
-    🚧              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
-
-
-    📄 License
-
-    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.2",
+  "version": "1.5.4",
   "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) {