@melcanz85/chaincss 1.5.9 → 1.5.27

package/.github/workflows/publish.yml

@@ -0,0 +1,22 @@
+name: Publish Package
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+permissions:
+  id-token: write
+  contents: read
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '24'
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm ci
+      - run: npm publish

package/README.md

@@ -32,18 +32,19 @@ Project Structure
 Create this folder structure in your project:
 
 your-project/
-├── chaincss/                      # ChainCSS source files
-│   ├── main.jcss              # Main entry file
-│   ├── chain.jcss                  # Chaining definitions
-│   └── processor.js                 # Processing script
-├── public/                          # Output files
+├── chaincss/                 # ChainCSS source files
+│   ├── main.jcss             # Main entry file
+│   ├── chain.jcss            # Chaining definitions
+│   └── processor.js          # Processing script
+├── public/                   # Output files
 │   ├── index.html
-│   └── style.css               # Generated CSS
+│   └── style.css             # Generated CSS
 ├── node_modules/
 ├── package.json
 └── package-lock.json
 
-Processor Setup
+
+The Initialization processor Setup
 
 In chaincss/processor.js:
 
@@ -59,9 +60,12 @@ try {
 
 💻 Code Examples
 
---Chaining File (chaincss/chain.jcss):
+ //*** This is where the chaining happens all codes here are in javascript syntax, the methods are the css properties but in javascript form it follows the camelCase standard. Example the css property font-family is fontFamily in chaincss and your css selector is the value of the block() method which is always at the end of the chain.
+
+ //*** The property method are the same as the css property but background is an exception because it's a long word so it is shorten to bg only. Example background-color is bgColor() in chaincss etc.
 
- *** 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 and the css selector is the value of the block() method which is always at the end of the chain.
+ 
+//--Chaining File (chaincss/chain.jcss):
 
 // Variables for consistent styling
 const bodyBgColor = '#f0f0f0';
@@ -106,7 +110,7 @@ module.exports = {
 };
 
 
---Main File (chaincss/main.jcss):
+//--Main File (chaincss/main.jcss):
 
 <@
   // Import chaining definitions
@@ -135,13 +139,13 @@ module.exports = {
 
 📝 Notes
     
-    You can directly put css syntax on your main file.
+    You can directly put css syntax code 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.
+    YOU can modify your style in between get() and compile() in the main file it will overwrite the styles in the chainn file.
 
 🎨 Editor Support
 

package/chaincss.js

@@ -8,15 +8,16 @@ const chokidar = require('chokidar');
 const CleanCSS = require('clean-css');
 const transpilerModule = require('./transpiler.js');
 
-// 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 
+    ...transpilerModule // Only expose what's needed
   });
-  const jsCode = scriptBlock.trim(); 
+
+  const jsCode = scriptBlock.trim(); //`(function() { ${scriptBlock.trim()} })();`;  Wrap script in IIFE
   const chainScript = new vm.Script(jsCode);
-  chainScript.runInContext(context);
-  return context.chain.cssOutput; 
+  chainScript.runInContext(context); // Execute in isolated context
+  return context.chain.cssOutput; // Return the processed output
 };
 
 // CSS Minification Function
@@ -31,12 +32,12 @@ const minifyCss = (css) => {
 
 // FUNCTION TO CONVERT JS CODES TO CSS CODE
 const processor = (inputFile, outputFile) => {
-  const allowedExtensions = ['.jcss'];
+  /*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);
@@ -61,7 +62,7 @@ const processor = (inputFile, outputFile) => {
   const outputDir = path.resolve(outputFile);
   const trimmedCSS = outputCSS.trim();
   const minCSS = minifyCss(trimmedCSS);
-  fs.writeFileSync(outputDir, minCSS, 'utf8'); 
+  fs.writeFileSync(outputDir, minCSS, 'utf8'); // Write processed CSS
 };
 
 // Watch function

package/package.json

@@ -1,10 +1,19 @@
 {
   "name": "@melcanz85/chaincss",
-  "version": "1.5.9",
+  "version": "1.5.27",
   "description": "A simple package transpiler for js to css",
   "main": "chaincss.js",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/melcanz08/chaincss.git"
+  },
+  "homepage": "https://github.com/melcanz08/chaincss",
   "bin": {
-    "chaincss": "./chaincss.js"
+    "chaincss": "chaincss.js"
   },
   "dependencies": {
     "chokidar": "^3.5.3",

package/transpiler.js

@@ -12,6 +12,54 @@ const chain = {
   bgAttachment(bga){ this.catcher.backgroundAttachment = bga; return this; },
   bgPosition(bgp){ this.catcher.backgroundPosition = bgp; return this; },
 
+  // Border
+  border(b){ this.catcher.border = b; return this; },
+  borderStyle(bs){ this.catcher.borderStyle = bs; return this; },
+  borderWidth(bw){ this.catcher.borderWidth = bw; return this; },
+  borderColor(bc){ this.catcher.borderColor = bc; return this; },
+  borderRadius(br){ this.catcher.borderRadius = br; return this; },
+  borderSideStyle(side, value){
+    if (side === 'top') {
+      this.catcher.borderTopStyle = value;
+    } else if (side === 'right') {
+      this.catcher.borderRightStyle = value;
+    } else if (side === 'bottom') {
+      this.catcher.borderBottomStyle = value;
+    } else if (side === 'left') {
+      this.catcher.borderLeftStyle = value;
+    }
+    return this;
+  },
+
+   // Margin
+  margin(m){ this.catcher.margin = m; return this; },
+  marginTop(mt){ this.catcher.marginTop = mt; return this; },
+  marginRight(mr){ this.catcher.marginRight = mr; return this; },
+  marginBottom(mb){ this.catcher.marginBottom = mb; return this; },
+  marginLeft(ml){ this.catcher.marginLeft = ml; return this; },
+
+  // Padding
+  padding(p){ this.catcher.padding = p; return this; },
+  paddingTop(pt){ this.catcher.paddingTop = pt; return this; },
+  paddingRight(pr){ this.catcher.paddingRight = pr; return this; },
+  paddingBottom(pb){ this.catcher.paddingBottom = pb; return this; },
+  paddingLeft(pl){ this.catcher.paddingLeft = pl; return this; },
+
+  // Height, Width and Max-width
+  width(w){ this.catcher.width = w; return this; },
+  minWidth(mnw){ this.catcher.minWidth = mnw; return this; },
+  maxWidth(mxw){ this.catcher.maxWidth = mxw; return this; },
+  height(h){ this.catcher.height = h; return this; },
+  minHeight(mnh){ this.catcher.minHeight = mnh; return this; },
+  maxHeight(mxh){ this.catcher.maxHeight = mxh; return this; },
+
+  // Outline
+  outline(o){ this.catcher.outline = o; return this; },
+  outlineColor(oc){ this.catcher.outlineColor = oc; return this; },
+  outlineStyle(os){ this.catcher.outlineStyle = os; return this; },
+  outlineWidth(ow){ this.catcher.outlineWidth = ow; return this; },
+  outlineOffset(oo){ this.catcher.outlineOffset = oo; return this; },
+
   // Text 
   color(c){ this.catcher.color = c; return this; },
   direction(d){ this.catcher.direction = d; return this; },
@@ -37,31 +85,19 @@ const chain = {
   wordSpacing(ws){ this.catcher.wordSpacing = ws; return this; },
   whiteSpace(sws){ this.catcher.whiteSpace = sws; return this; },
 
-  // Border
-  border(b){ this.catcher.border = b; return this; },
-  borderStyle(bs){ this.catcher.borderStyle = bs; return this; },
-  borderWidth(bw){ this.catcher.borderWidth = bw; return this; },
-  borderColor(bc){ this.catcher.borderColor = bc; return this; },
-  borderRadius(br){ this.catcher.borderRadius = br; return this; },
-  borderSideStyle(side, value){
-    if (side === 'top') {
-      this.catcher.borderTopStyle = value;
-    } else if (side === 'right') {
-      this.catcher.borderRightStyle = value;
-    } else if (side === 'bottom') {
-      this.catcher.borderBottomStyle = value;
-    } else if (side === 'left') {
-      this.catcher.borderLeftStyle = value;
-    }
-    return this;
-  },
-
   // Font 
-  fontFamily(f){ this.catcher.fontFamily = f; return this; },
-  fontStyle(s){ this.catcher.fontStyle = s; return this; },
-  fontWeight(w){ this.catcher.fontWeight = w; return this; },
-  fontVariant(v){ this.catcher.fontVariant = v; return this; },
-  fontSize(si){ this.catcher.fontSize = si; return this; },
+  font(f){ this.catcher.font = f; return this; },
+  fontFamily(ff){ this.catcher.fontFamily = ff; return this; },
+  fontStyle(fs){ this.catcher.fontStyle = fs; return this; },
+  fontWeight(fw){ this.catcher.fontWeight = fw; return this; },
+  fontVariant(fv){ this.catcher.fontVariant = fv; return this; },
+  fontSize(fsz){ this.catcher.fontSize = fsz; return this; },
+
+  // List Style
+  listStyle(ls){ this.catcher.listStyle = ls; return this; },
+  listStyleType(lst){ this.catcher.listStyleType = lst; return this; },
+  listStyleImage(lsi){ this.catcher.listStyleImage = lsi; return this; },
+  listStylePosition(lsp){ this.catcher.listStylePosition = lsp; return this; },
 
   // Display 
   display(d){ this.catcher.display = d; return this; },
@@ -76,27 +112,11 @@ const chain = {
   order(o){ this.catcher.order = o; return this; },
   visibility(v){ this.catcher.visibility = v; return this; },
 
-  // Height, Width and Max-width
-  width(w){ this.catcher.width = w; return this; },
-  minWidth(mnw){ this.catcher.minWidth = mnw; return this; },
-  maxWidth(mxw){ this.catcher.maxWidth = mxw; return this; },
-  height(h){ this.catcher.height = h; return this; },
-  minHeight(mnh){ this.catcher.minHeight = mnh; return this; },
-  maxHeight(mxh){ this.catcher.maxHeight = mxh; return this; },
-
-  // Padding
-  padding(p){ this.catcher.padding = p; return this; },
-  paddingTop(pt){ this.catcher.paddingTop = pt; return this; },
-  paddingRight(pr){ this.catcher.paddingRight = pr; return this; },
-  paddingBottom(pb){ this.catcher.paddingBottom = pb; return this; },
-  paddingLeft(pl){ this.catcher.paddingLeft = pl; return this; },
-
-  // Margin
-  margin(m){ this.catcher.margin = m; return this; },
-  marginTop(mt){ this.catcher.marginTop = mt; return this; },
-  marginRight(mr){ this.catcher.marginRight = mr; return this; },
-  marginBottom(mb){ this.catcher.marginBottom = mb; return this; },
-  marginLeft(ml){ this.catcher.marginLeft = ml; return this; },
+  // Position
+  position(p){ this.catcher.position = p; return this; },
+  top(t){ this.catcher.top = t; return this; },
+  left(l){ this.catcher.left = l; return this; },
+  bottom(b){ this.catcher.bottom = b; return this; },
 
   // Overflow
   overflow(o){ this.catcher.overflow = o; return this; },
@@ -104,28 +124,18 @@ const chain = {
   overflowY(oy){ this.catcher.overflowY = oy; return this; },
   overflowWrap(ow){ this.catcher.overflowWrap = ow; return this; },
 
-  // List Style
-  listStyle(ls){ this.catcher.listStyle = ls; return this; },
-  listStyleType(lst){ this.catcher.listStyleType = lst; return this; },
-  listStyleImage(lsi){ this.catcher.listStyleImage = lsi; return this; },
-  listStylePosition(lsp){ this.catcher.listStylePosition = lsp; return this; },
-  
-  // Outline
-  outline(o){ this.catcher.outline = o; return this; },
-  outlineColor(oc){ this.catcher.outlineColor = oc; return this; },
-  outlineStyle(os){ this.catcher.outlineStyle = os; return this; },
-  outlineWidth(ow){ this.catcher.outlineWidth = ow; return this; },
-  outlineOffset(oo){ this.catcher.outlineOffset = oo; return this; },
+  textFillColor(tfc){ this.catcher.textFillColor = tfc; return this; },
+  backgroundClip(bc){ this.catcher.backgroundClip = bc; return this; },
+  gridTemplateColumns(gtc){ this.catcher.gridTemplateColumns = gtc; return this; },
+  right(r){ this.catcher.right = r; return this; },
+  transform(tf){ this.catcher.transform = tf; return this; },
+  boxShadow(bs){ this.catcher.boxShadow = bs; return this; },
+  backdropFilter(bf){ this.catcher.backdropFilter = bf; return this; },
+  gap(g){ this.catcher.gap = g; return this; },
 
   // Float
   float(f){ this.catcher.float = f; return this; },
   clear(c){ this.catcher.clear = c; return this; },
-
-  // Position
-  position(p){ this.catcher.position = p; return this; },
-  top(t){ this.catcher.top = t; return this; },
-  left(l){ this.catcher.left = l; return this; },
-  bottom(b){ this.catcher.bottom = b; return this; },
   
   // Z-index
   zIndex(zi){ this.catcher.zIndex = zi; return this; },
@@ -197,9 +207,6 @@ const compile = (obj) => {
       const element = obj[key];
       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') {
@@ -218,9 +225,6 @@ const compile = (obj) => {
 };
 
 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`);
@@ -228,11 +232,9 @@ const get = (filename) => {
   
   // 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})`);
@@ -245,7 +247,6 @@ if (typeof global !== 'undefined') {
   global.chain = chain;
 }
 
-
 module.exports = {
   chain,
   run,