fscss 1.1.14 → 1.1.15

package/README.md

@@ -12,6 +12,8 @@ Works in browser and backend (Node.js)
 
 Supports:
 
+- Reusable block → @define name(x,y){...} - https://github.com/fscss-ttr/FSCSS/blob/main/FSCSS_%40define_method.md
+ 
 - Variables ($var, str()) → define reusable values, str(boxBased, "..."), $var:...;
  
 - Array Methods (@arr) → define array - https://github.com/fscss-ttr/FSCSS/blob/main/FSCSS_array_method.md

package/example.fscss

@@ -1,5 +1,11 @@
 @import(exec(_init themes))
 @import(exec(style.fscss).pick(body))
+@define card(bg, color: white){
+   background: @use(bg);
+   color: @use(color);
+   padding: 10px;
+   border-radius: 10px;
+}
 @arr colors[#1E2783, #8C29B2, #C41348]
 $colors: @arr.colors!;
  div{
@@ -13,4 +19,7 @@ $colors: @arr.colors!;
 .box-b{
    background: radial-gradient(40deg, $colors.reverse);
 }
+.card{
+   @card(#007999)
+}
 exec(_log, "Hello World!") 

package/lib/functions/all.js

@@ -38,10 +38,12 @@ const processedCSS = css.replace(regex, (match, expression) => {
 
 return (processedCSS);
   }
-const arraysExfscss = {}; // Renamed the global variable
+const arraysExfscss = {}; //the global variable
 const orderedxFscssRandom = {};
 
 const exfMAX_DEPTH = 10; // Prevent infinite recursion
+const defExfscss = {};
+
 function extractBlock(css, startIndex) {
   let depth = 0;
   let i = startIndex;
@@ -274,6 +276,53 @@ function initlibraries(css){
   });
    return css;
 }
+
+function procDef(fscss) {
+  // First, extract all @define blocks and store them in defExfscss. FIGSH-FSCSS 
+  let processed = fscss.replace(
+    /@define\s+([\w\_\-\—]+)\s*\(([^)]*)\)\s*\$?\{\s*(?:"([^"]*)"|'([^']*)'|`([^`]*)`|([^\}^\{]*?))\s*\}/g,
+    (match, name, paramsStr, body1, body2, body3, body4) => {
+      const params = paramsStr.split(',').map(p =>p.trim()).filter(p =>p);
+      const body = body1 ?? body2 ?? body3 ?? body4 ?? '';
+      defExfscss[name] = { params, body };
+      return ''; // Remove the define block from the output. FIGSH-FSCSS 
+    }
+  );
+  
+  // Now replace all @name(...) usages with their expanded bodies. FIGSH-FSCSS 
+  processed = processed.replace(
+    /@([\w\_\-\—]+)\s*\(([\s\S]*?)\)/g,
+    (match, name, argsStr) => {
+      const def = defExfscss[name];
+      if (!def){
+        return match;
+      }// Leave unknown Def macros unchanged. FIGSH-FSCSS  
+      
+      const args = argsStr?.split(',').map(a => a.trim());
+      if(args[0]==='') args[0] = undefined;
+      let result = def.body;
+     
+      /* Replace each @use(param) with the corresponding argument. FIGSH-FSCSS */
+      let xfVal = [];
+      def.params.forEach((param, index) => {
+         const df = def.params[index];
+         if(df&&df.includes(':')){
+         xfVal = df?.split(':')?.map(i=>i.trim()).filter(i=>i);
+         } 
+         
+const dfv = xfVal[1]?xfVal[1]:'';
+
+        const arg = args[index] !== (undefined) ? args[index] : dfv;
+        const regex = new RegExp(`@use\\(\\s*${param.replace(/(\s+)?(\:(\s+)?.*)/g, '')}\\s*\\)`, 'g');
+        result = result.replace(regex, arg);
+      });
+      
+      return result;
+    }
+  );
+  
+  return processed;
+}
 function procVar(vcss) {
   function processSCSS(scssCode) {
     const globalVars = {};
@@ -1266,6 +1315,6 @@ function execObj(css){
 }
 
     export { initlibraries, 
-    impSel, procImp, replaceRe, procExt, procVar,procFun, procArr, procEv, procRan, transformCssValues, procNum, vfc, applyFscssTransformations,procExC, procCnt, procChe, execObj
+    impSel, procImp, replaceRe, procExt, procVar,procFun, procArr, procEv, procRan, transformCssValues, procNum, vfc, applyFscssTransformations,procExC, procCnt, procDef, procChe, execObj
     } 
     

package/lib/processor.js

@@ -13,7 +13,8 @@ import {
   vfc, 
   applyFscssTransformations,
   procExC,
-  procCnt, 
+  procCnt,
+  procDef, 
   procChe, 
   execObj
 } from "./functions/all.js";
@@ -36,6 +37,7 @@ export async function processFscss(css, options = {}) {
     if(!css.includes("exec.obj.block(fun)"))css = procFun(css);
     if(!css.includes("exec.obj.block(length)"))css = procChe(css);
     if(!css.includes("exec.obj.block(count)"))css = procCnt(css);
+    if(!css.includes("exec.obj.block(define)"))css = procDef(css);
     if(!css.includes("exec.obj.block(arr)"))css = procArr(css);
     if(!css.includes("exec.obj.block(event)"))css = procEv(css);
     if(!css.includes("exec.obj.block(random)"))css = procRan(css);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "fscss",
   "description": "Figured Shorthand Cascading Style Sheet",
-  "version": "1.1.14",
+  "version": "1.1.15",
   "type": "module",
   "main": "lib/index.js",
   "bin": {
@@ -21,7 +21,8 @@
     "fs-css",
     "fscss",
     "xfscss",
-    "preprocessor"
+    "preprocessor",
+    "lightweight"
   ],
   "author": "Figsh",
   "license": "MIT",