@melcanz85/chaincss 1.5.4 → 1.5.5

package/README.md

@@ -1,34 +1,37 @@
 # @melcanz85/chaincss
 
+[![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)
+
 A simple JavaScript-to-CSS transpiler that converts JS objects into optimized CSS.
 
 ## 🚀 Installation
 
 ```bash
 npm install @melcanz85/chaincss
-```
 
-## 📦 Usage (Node.js)
+📦 Usage (Node.js)
+Quick Setup
 
-### Quick Setup
+    Install development dependencies:
+
+bash
 
-1. **Install development dependencies:**
-```bash
 npm install --save-dev nodemon concurrently
-```
 
-2. **Update your `package.json` scripts:**
-```json
+    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
+Project Structure
 
 Create this folder structure in your project:
+text
 
-```
 your-project/
 ├── chaincss/                      # ChainCSS source files
 │   ├── chaincss.jcss              # Main entry file
@@ -40,13 +43,12 @@ your-project/
 ├── node_modules/
 ├── package.json
 └── package-lock.json
-```
 
-### Processor Setup
+Processor Setup
 
-In `chaincss/processor.js`:
+In chaincss/processor.js:
+javascript
 
-```javascript
 const jss = require("@melcanz85/chaincss");
 
 try {
@@ -56,13 +58,11 @@ try {
   console.error('Error processing JSS file:', err.stack);
   process.exit(1);
 }
-```
-
-## 💻 Code Examples
 
-### Main File (`chaincss/chaincss.jcss`)
+💻 Code Examples
+Main File (chaincss/chaincss.jcss)
+javascript
 
-```javascript
 <@
   // Import chaining definitions
   const style = get('./chain.jcss');
@@ -86,11 +86,10 @@ try {
   );
 @>
 }
-```
 
-### Chaining File (`chaincss/chain.jcss`)
+Chaining File (chaincss/chain.jcss)
+javascript
 
-```javascript
 // Variables for consistent styling
 const bodyBgColor = '#f0f0f0';
 const headerBgColor = '#333';
@@ -132,32 +131,83 @@ module.exports = {
   header,
   logoImgHeight
 };
-```
 
-## ✨ Features
+📝 Notes
 
-| 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 |
+    CSS syntax can be written directly in .jcss files
 
-*✅ = Working, 🚧 = Coming soon*
+    ChainCSS syntax must be wrapped in <@ @> delimiters
 
-## 📝 Notes
+    The get() function imports chaining definitions from other files
 
-- 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
+    Style modifications between get() and compile() will override existing styles
 
-## 👨‍💻 Contributing
+🎨 Editor Support
 
-Contributions are welcome! Feel free to open issues or submit pull requests.
+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"
+    }
+}
+
+WebStorm / IntelliJ IDEA
+
+    Go to Settings/Preferences → Editor → File Types
+
+    Select JavaScript in the list
+
+    Click + and add *.jcss to the registered patterns
 
-## 📄 License
+Vim / Neovim
 
-MIT © Rommel Caneos
+Add to your .vimrc or init.vim:
+vim
+
+au BufRead,BufNewFile *.jcss setfiletype javascript
+
+Sublime Text
+
+Create or edit ~/Library/Application Support/Sublime Text/Packages/User/JCSS.sublime-settings:
+json
+
+{
+    "extensions": ["jcss"],
+    "syntax": "Packages/JavaScript/JavaScript.sublime-syntax"
+}
+
+Atom
+
+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
+
+Contributions are welcome! Feel free to open issues or submit pull requests.
+📄 License
 
+MIT © Rommel Caneos

package/package.json

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