@melcanz85/chaincss 1.5.5 → 1.5.6

package/README.md

@@ -30,7 +30,6 @@ json
 Project Structure
 
 Create this folder structure in your project:
-text
 
 your-project/
 ├── chaincss/                      # ChainCSS source files
@@ -47,7 +46,6 @@ your-project/
 Processor Setup
 
 In chaincss/processor.js:
-javascript
 
 const jss = require("@melcanz85/chaincss");
 
@@ -55,13 +53,12 @@ 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)
-javascript
+Main File (chaincss/chaincss.jcss):
 
 <@
   // Import chaining definitions
@@ -87,8 +84,7 @@ javascript
 @>
 }
 
-Chaining File (chaincss/chain.jcss)
-javascript
+Chaining File (chaincss/chain.jcss):
 
 // Variables for consistent styling
 const bodyBgColor = '#f0f0f0';
@@ -133,14 +129,14 @@ module.exports = {
 };
 
 📝 Notes
+    
+    You can directly put css syntax on your main file.
 
-    CSS syntax can be written directly in .jcss files
-
-    ChainCSS syntax must be wrapped in <@ @> delimiters
+    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 +144,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 +191,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 +205,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.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,