@melcanz85/chaincss 1.5.5 → 1.5.7

package/README.md

@@ -30,16 +30,15 @@ json
 Project Structure
 
 Create this folder structure in your project:
-text
 
 your-project/
 ├── chaincss/                      # ChainCSS source files
-│   ├── chaincss.jcss              # Main entry file
+│   ├── main.jcss              # Main entry file
 │   ├── chain.jcss                  # Chaining definitions
 │   └── processor.js                 # Processing script
 ├── public/                          # Output files
 │   ├── index.html
-│   └── chainstyle.css               # Generated CSS
+│   └── style.css               # Generated CSS
 ├── node_modules/
 ├── package.json
 └── package-lock.json
@@ -47,48 +46,22 @@ your-project/
 Processor Setup
 
 In chaincss/processor.js:
-javascript
 
-const jss = require("@melcanz85/chaincss");
+const chain = require("@melcanz85/chaincss");
 
 try {
   // Process main file and output CSS
-  jss.processJSS('./chaincss/chaincss.jcss', './public/chainstyle.css');
+  chain.processor('./chaincss/main.jcss', './public/style.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)
-javascript
 
-<@
-  // Import chaining definitions
-  const style = get('./chain.jcss');
+--Chaining File (chaincss/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
+ *** This is where the chaining happens all codes here are javascript codes the methods are the css properties but since its a js code its a camelCase syntax example the property font-family its fontFamily in chaincss syntax.
 
 // Variables for consistent styling
 const bodyBgColor = '#f0f0f0';
@@ -132,15 +105,43 @@ module.exports = {
   logoImgHeight
 };
 
-📝 Notes
 
-    CSS syntax can be written directly in .jcss files
+--Main File (chaincss/main.jcss):
+
+<@
+  // Import chaining definitions
+  const style = get('./chain.jcss');
+
+  // Override specific styles
+  style.header.bgColor = 'red';
+  
+  // Compile to CSS
+  compile(style);
+@>
 
-    ChainCSS syntax must be wrapped in <@ @> delimiters
+@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')
+  );
+@>
+}
+
+
+📝 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
 
-    Style modifications between get() and compile() will override existing styles
+    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
 
@@ -148,7 +149,6 @@ Since .jcss files are just JavaScript files with ChainCSS syntax, you can easily
 VS Code
 
 Add this to your project's .vscode/settings.json:
-json
 
 {
     "files.associations": {
@@ -196,6 +196,8 @@ coffeescript
 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
@@ -208,6 +210,8 @@ Status  Feature Description
 👨‍💻 Contributing
 
 Contributions are welcome! Feel free to open issues or submit pull requests.
+
+
 📄 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.5",
+  "version": "1.5.7",
   "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,