@melcanz85/chaincss 1.5.4 → 1.5.6

package/README.md

@@ -1,34 +1,36 @@
 # @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:
 
-```
 your-project/
 ├── chaincss/                      # ChainCSS source files
 │   ├── chaincss.jcss              # Main entry file
@@ -40,29 +42,24 @@ your-project/
 ├── node_modules/
 ├── package.json
 └── package-lock.json
-```
 
-### Processor Setup
+Processor Setup
 
-In `chaincss/processor.js`:
+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);
+  console.error('Error processing chainCSS file:', err.stack);
   process.exit(1);
 }
-```
-
-## 💻 Code Examples
 
-### Main File (`chaincss/chaincss.jcss`)
+💻 Code Examples
+Main File (chaincss/chaincss.jcss):
 
-```javascript
 <@
   // Import chaining definitions
   const style = get('./chain.jcss');
@@ -86,11 +83,9 @@ try {
   );
 @>
 }
-```
 
-### Chaining File (`chaincss/chain.jcss`)
+Chaining File (chaincss/chain.jcss):
 
-```javascript
 // Variables for consistent styling
 const bodyBgColor = '#f0f0f0';
 const headerBgColor = '#333';
@@ -132,32 +127,86 @@ module.exports = {
   header,
   logoImgHeight
 };
-```
 
-## ✨ Features
+📝 Notes
+    
+    You can directly put css syntax on your main file.
+
+    But chainCSS syntax must be wrapped in <@ @> delimiters.
+
+    The get() function imports chaining definitions from other files
+
+    YOU can modify your style in between get() and compile() in the main file it will override the styles in the chainn file.
+
+🎨 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:
+
+{
+    "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
+
+Vim / Neovim
+
+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"
+      ]
 
-| 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 |
+Other Editors
 
-*✅ = Working, 🚧 = Coming soon*
+Most modern editors allow you to associate file extensions with language modes. Simply configure your editor to treat .jcss files as JavaScript.
 
-## 📝 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
+✨ 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
 
-## 👨‍💻 Contributing
+✅ = Working, 🚧 = Coming soon
+👨‍💻 Contributing
 
 Contributions are welcome! Feel free to open issues or submit pull requests.
 
-## 📄 License
 
-MIT © Rommel Caneos
+📄 License
 
+MIT © Rommel Caneos

package/chaincss.js

@@ -6,14 +6,10 @@ const path = require('path');
 const fs = require('fs');
 const chokidar = require('chokidar');
 const CleanCSS = require('clean-css');
-
-// CUSTOM MADE MODULE INSIDE JSS FOLDER
 const transpilerModule = require('./transpiler.js');
 
-console.log(__dirname);
 // FUNCTION TO PROCESS CHUNKS OF SCRIPTS FROM THE INPUT FILE USING THE VM MODULE
 const processScript = (scriptBlock) => {
-  //const output = 'cssOutput = undefined;';
   const context = vm.createContext({ 
     ...transpilerModule 
   });
@@ -35,6 +31,12 @@ const minifyCss = (css) => {
 
 // FUNCTION TO CONVERT JS CODES TO CSS CODE
 const processor = (inputFile, outputFile) => {
+  const allowedExtensions = ['.jcss'];
+  const fileExt = path.extname(inputFile).toLowerCase();
+  
+  if (!allowedExtensions.includes(fileExt)) {
+    throw new Error(`Invalid file extension: ${fileExt}. Only .jcss files are allowed.`);
+  }
   const input = path.resolve(inputFile);
   const content = fs.readFileSync(input, 'utf8');
   const blocks = content.split(/<@([\s\S]*?)@>/gm);

package/package.json

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

package/transpiler.js

@@ -1,3 +1,5 @@
+const path = require('path');
+const fs = require('fs');
 const chain = {
   cssOutput : undefined,
   catcher: {},
@@ -193,10 +195,13 @@ const compile = (obj) => {
   for (const key in obj) {
     if (obj.hasOwnProperty(key)) {
       const element = obj[key];
-      let selectors = element.selectors || []; 
+      let selectors = element.selectors || []; // Provide default empty array if selectors is undefined
       let elementCSS = '';
-
+      console.log('Problematic element:', element);
+        console.log('Type of element:', typeof element);
+        console.log('Is element null?', element === null);
       for (let prop in element) {
+
         if (element.hasOwnProperty(prop) && prop !== 'selectors') {
           // Convert camelCase to kebab-case
           const kebabKey = prop.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
@@ -212,12 +217,35 @@ const compile = (obj) => {
   chain.cssOutput = cssString;
 };
 
-const get = require;
+const get = (filename) => {
+  console.log('get() called with:', filename);
+  console.log('Current working directory:', process.cwd());
+
+  const fileExt = path.extname(filename).toLowerCase();
+  if (fileExt !== '.jcss') {
+    throw new Error(`Import error: ${filename} must have .jcss extension`);
+  }
+  
+  // Try to resolve the path
+  const resolvedPath = path.resolve(process.cwd(), filename);
+  console.log('Resolved path:', resolvedPath);
+  
+  // Check if file exists
+  const exists = fs.existsSync(resolvedPath);
+  console.log('File exists?', exists);
+  
+  if (!exists) {
+    throw new Error(`File not found: ${filename} (resolved to: ${resolvedPath})`);
+  }
+  
+  return require(resolvedPath);
+};
 
 if (typeof global !== 'undefined') {
   global.chain = chain;
 }
 
+
 module.exports = {
   chain,
   run,