fscss 1.1.22 → 1.1.24

package/README.md

@@ -1,6 +1,6 @@
 # FSCSS
 
-**FSCSS (Figured Shorthand Cascading Style Sheets)** is a powerful CSS preprocessor that extends CSS with shorthand utilities, variables, functions, and advanced transformations.
+**FSCSS (Figured Shorthand Cascading Style Sheets)** is a CSS preprocessor that extends CSS with shorthand utilities, variables, functions, and advanced transformations.
 
 It is designed to make styling faster, reusable, and expressive — without losing standard CSS compatibility.
 
@@ -37,7 +37,7 @@ It is designed to make styling faster, reusable, and expressive — without losi
 
 - `$var` → standard variables
 - `str()` → inline expandable text variables
-- fallback operator → `$ / var || fallback`
+- fallback operator → `$/var || fallback`
 ```css
 $color: red;
 
@@ -90,7 +90,7 @@ $color: red;
 - Vendor prefixing
 - 
 ```css
-$(@keyframes trans, .box &[3s ease-in infinite]){
+$(@keyframes trans, .box, #hero .card, #dashboard .card &[3s ease-in infinite]){
   from{ width:0; }
   to{ width:200px; }
 }
@@ -131,7 +131,7 @@ https://github.com/fscss-ttr/fscss-modules/
 ## Example
 
 ```css
-@import((flex-x) from flex-control/fscss)
+@import((flex-x) from flex-control)
 
 @arr colors[#1E2783, #8C29B2, #C41348]
 
@@ -154,7 +154,7 @@ npm install fscss
 ```
 ---
 
-** Browser Usage**
+**Browser Usage**
 ```html
 <script src="https://cdn.jsdelivr.net/npm/fscss@latest/exec.min.js" defer></script>
 ```
@@ -165,7 +165,7 @@ npm install fscss
 **Or:**
 ```html
 <style>
-@import(exec(style.fscss))
+@import(exec("style.fscss"))
 </style>
 ```
 > Use "defer" or "async" when loading the script.

package/e/exec.js

@@ -1,4 +1,3 @@
-/* Figsh-fscss light, source v3., fscss.devtem.org */
 function exec({ type = 'text', content, onError, onSuccess }) {
   
   // 1. Validation
@@ -49,8 +48,6 @@ function exec({ type = 'text', content, onError, onSuccess }) {
 function xfscssProcessorWrap(){(async ()=>{
   /**
  * FSCSS Processing Script
- * Note: Use official npm package/CDN instead of copying this directly.
- * visit: (fscss.devtem.org) for support.
  */
  
 function procCntInit(ntc,stc){
@@ -368,24 +365,23 @@ function procExC(css) {
 
   return modifiedCSS.trim();
 }
-async function initlibraries(css){
-  css = css.replace(/exec\(\s*_init\sisjs\s*\)/g, "exec(https://cdn.jsdelivr.net/gh/fscss-ttr/FSCSS@main/xf/styles/isjs.fscss)");
-  css = css.replace(/exec\(\s*_init\sthemes\s*\)/g, "exec(https://cdn.jsdelivr.net/gh/fscss-ttr/FSCSS@main/xf/styles/trshapes.fthemes.fscss)")
-  css = css.replace(/exec\(_init\sarray1to500\s*\)/g, "exec(https://cdn.jsdelivr.net/gh/fscss-ttr/FSCSS@main/xf/styles/1to500.fscss)");
-  css = css.replace(/exec\(_init\s+([\w\d\._—\-\%\*\+\&\$\=]+)(?:\/([\w\-]+))?\s*\)/g, (match, impName, impType)=>{
-    if(!impType){
-    //`
-      return `exec(https://cdn.jsdelivr.net/gh/fscss-ttr/FSCSS@main/xf/styles/${impName}.fscss)`;
+
+  async function initlibraries(css) {
+  const xfr = 'https://cdn.jsdelivr.net/gh/fscss-ttr/FSCSS@main/xf/styles/';
+  css = css.replace(/exec\(_init\s+([\w\d\._—\-\%\*\+\@\&\$\=]+)(?:\/([\w\-]+))?\s*\)/g, (match, impName, impType) => {
+    if (!impType) {
+      //`
+      return `exec(${xfr+impName}.fscss)`;
     }
-    return `exec(https://cdn.jsdelivr.net/gh/fscss-ttr/FSCSS@main/xf/styles/${impName}.${impType})`;
+    return `exec(${xfr+impName}.${impType})`;
   });
-  css = css.replace(/(\@import\((?:\s+)?(?:exec)?\((?:[\w\d\.\@\—\-_*\#\$\s\,]+)\)(?:\s+)?from(?:\s+)?)([\w\d\._—\-\%\*\+\&\$\=]+)(?:\/([\w\-]+))?(?:\s+)?\)/g, (match, state, impName, impType) => {
-  if (!impType) {
-    return `${state}'https://cdn.jsdelivr.net/gh/fscss-ttr/FSCSS@main/xf/styles/${impName}.fscss')`;
-  }
-  return `${state}'https://cdn.jsdelivr.net/gh/fscss-ttr/FSCSS@main/xf/styles/${impName}.${impType}')`;
-  }); 
-   return css;
+  css = css.replace(/(\@import\((?:\s+)?(?:exec)?\((?:[\w\d\.\@\—\-_*\#\$\s\,]+)\)(?:\s+)?from(?:\s+)?)([\w\d\._—\-\%\*\+\@\&\$\=]+)(?:\/([\w\-]+))?(?:\s+)?\)/g, (match, state, impName, impType) => {
+    if (!impType) {
+      return `${state}'${xfr+impName}.fscss')`;
+    }
+    return `${state}'${xfr+impName}.${impType}')`;
+  });
+  return css;
 }
 
 function procVar(vcss) {
@@ -460,11 +456,14 @@ function procVar(vcss) {
   return result.css;
 }
 
+let defExdepth = 0;
 
 function procDef(fscss) {
+  
   const pRegex = /@define\s+([\w\_\-\—]+)\s*\(([^)]*)\)\s*\$?\{\s*(?:"([^"]*)"|'([^']*)'|`([^`]*)`|([^\}^\{]*?))\s*\}/g;
   
   // First, extract all @define blocks and store them in defExfscss. FIGSH-FSCSS 
+  
   let processed = fscss.replace(pRegex,
     (match, name, paramsStr, body1, body2, body3, body4) => {
       const params = paramsStr.split(',').map(p =>p.trim()).filter(p =>p);
@@ -475,6 +474,7 @@ function procDef(fscss) {
   );
   
   // Now replace all @name(...) usages with their expanded bodies. FIGSH-FSCSS 
+  
   processed = processed.replace(
     /@([\w\_\-\—]+)\s*\(([\s\S]*?)\)/g,
     (match, name, argsStr) => {
@@ -505,10 +505,48 @@ const dfv = xfVal[1]?xfVal[1]:'';
       return result;
     }
   );
- if(!pRegex.test(processed)) return processed;
   
-  return procDef(processed); 
+  
+  if (!pRegex.test(processed)||defExdepth >= 10) {
+    for(let g=0;g<10;g++){
+  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;
 }
+ defExdepth++;
+ 
+ return procDef(processed);
+}
+
 function procExt(css) {
   let extractedVariables = {};
   let tempCSS = css;
@@ -517,7 +555,7 @@ function procExt(css) {
   tempCSS = tempCSS.replace(/("(?:[^"\\]|\\.)*")|('(?:[^'\\]|\\.)*')/g, function(fullMatch) {
     let quote = fullMatch[0];
     let content = fullMatch.slice(1, -1);
-    const directiveRegex = /@ext\((-?\d+),(\d+):\s*([^)]+)\)/g;
+    const directiveRegex = /@ext\((?:\s+)?(-?\d+)(?:\s+)?,(?:\s+)?(\d+)(?:\s+)?:\s*([^)]+)(?:\s+)?\)/g;
     let match;
     let directivesToProcess = [];
 
@@ -554,7 +592,7 @@ function procExt(css) {
   });
 
   // Step 2: Outside strings
-  tempCSS = tempCSS.replace(/([#.\w-]+)\s*@ext\((-?\d+),(\d+):\s*([^)]+)\)/g, function(match, token, start, len, varName) {
+  tempCSS = tempCSS.replace(/([#.\w-]+)\s*@ext\((?:\s+)?(-?\d+)(?:\s+)?,(?:\s+)?(\d+)(?:\s+)?:\s*([^)]+)(?:\s+)?\)/g, function(match, token, start, len, varName) {
     start = parseInt(start);
     len = parseInt(len);
     varName = varName.trim();
@@ -584,8 +622,7 @@ function procExt(css) {
 
   return tempCSS;
 }
-
-
+  
 function procRan(input) {
   return input.replace(/@random\(\[([^\]]+)\](?:, *ordered)?\)/g, (match, valuesStr) => {
     const isOrdered = /, *ordered\)/.test(match);

package/e/xfscss.js

@@ -1,4 +1,3 @@
-/* FIGSH-FSCSS light, source v3., fscss.devtem.org */ 
 export function exec({ type = 'text', content, onError, onSuccess }) {
   
   // 1. Validation
@@ -49,27 +48,6 @@ export function exec({ type = 'text', content, onError, onSuccess }) {
 function xfscssProcessorWrap(){(async ()=>{
   /**
  * FSCSS Processing Script
- * Note: Use official npm package/CDN instead of copying this directly.
- * visit: (fscss.devtem.org) for support.
- */
-/**
- * FSCSS Processing Script
- * 
- * Credit: 
- *   - EKUYIK SAM as Figsh (Publisher)
- *   - David-Hux (Writer)
- *   - Current User (Implementer)
- * 
- * Resources:
- *   - fscss-ttr on dev.to
- *   - Figsh on figsh.devtem.org, codepen.io, stackoverflow.com
- *   - npm package: fscss (npm install -g fscss)
- * 
- * Version: source v14, package v1+
- * Last Edited: Mar 5th, 2026
- * 
- * Note: Use official npm package/CDN instead of copying this directly.
- * visit: (fscss.devtem.org) for support.
  */
  
  function procCntInit(ntc,stc){
@@ -203,40 +181,36 @@ function parseConditionBlocks(block) {
 
 function procExC(css) {
   const regex = /exec\((_log|_error|_warn|_info),\s*(?:"([^"]*)"|'([^']*)'|([^)]*))\)/g;
-  let jsCode = '';
-  let match;
   
-  // Replace exec(...) with nothing (remove from CSS) while collecting code
+  const methodMap = {
+    _log: console.log,
+    _error: console.error,
+    _warn: console.warn,
+    _info: console.info,
+  };
+  
   const cleanedCSS = css.replace(regex, (full, method, dQ, sQ, raw) => {
-    const arg = dQ || sQ || raw;
+    const arg = dQ ?? sQ ?? raw;
     
-    if (!['_log', '_error', '_warn', '_info'].includes(method)) {
+    if (!methodMap[method]) {
       console.warn(`fscss[exec(console)]: Unsupported method: ${method}`);
-      return ''; // strip it from CSS
+      return '';
     }
     
     if (!arg) {
       console.warn(`fscss[exec(console)]: Empty argument for method: ${method}`);
-      return ''; // strip it from CSS
+      return '';
     }
     
-    jsCode += `console.${method.slice(1)}("${arg.replace(/"/g, '\\"')}");\n`;
-    return ''; // ensure CSS isn’t broken
+    methodMap[method](arg);
+    return '';
   });
   
-  // Run console code safely
-  if (jsCode) {
-    try {
-      new Function(jsCode)();
-    } catch (e) {
-      console.error("fscss[exec(console)]: Error executing transformed code:", e);
-    }
-  }
-  
   return cleanedCSS;
 }
 
 
+
   function procEv(css) {
   const functionMap = {};
   const funcDefRegex = /@event\s+([\w-]+)\(([^)]*)\)\s*:?{/g;
@@ -393,25 +367,24 @@ function procExC(css) {
 
   return modifiedCSS.trim();
 }
-async function initlibraries(css){
-  css = css.replace(/exec\(\s*_init\sisjs\s*\)/g, "exec(https://cdn.jsdelivr.net/gh/fscss-ttr/FSCSS@main/xf/styles/isjs.fscss)");
-  css = css.replace(/exec\(\s*_init\sthemes\s*\)/g, "exec(https://cdn.jsdelivr.net/gh/fscss-ttr/FSCSS@main/xf/styles/trshapes.fthemes.fscss)")
-  css = css.replace(/exec\(_init\sarray1to500\s*\)/g, "exec(https://cdn.jsdelivr.net/gh/fscss-ttr/FSCSS@main/xf/styles/1to500.fscss)");
-  css = css.replace(/exec\(_init\s+([\w\d\._—\-\%\*\+\&\$\=]+)(?:\/([\w\-]+))?\s*\)/g, (match, impName, impType)=>{
+
+  async function initlibraries(css){
+    const xfr = 'https://cdn.jsdelivr.net/gh/fscss-ttr/FSCSS@main/xf/styles/';
+  css = css.replace(/exec\(_init\s+([\w\d\._—\-\%\*\+\@\&\$\=]+)(?:\/([\w\-]+))?\s*\)/g, (match, impName, impType)=>{
     if(!impType){
     //`
-      return `exec(https://cdn.jsdelivr.net/gh/fscss-ttr/FSCSS@main/xf/styles/${impName}.fscss)`;
+      return `exec(${xfr+impName}.fscss)`;
     }
-    return `exec(https://cdn.jsdelivr.net/gh/fscss-ttr/FSCSS@main/xf/styles/${impName}.${impType})`;
+    return `exec(${xfr+impName}.${impType})`;
   });
-  css = css.replace(/(\@import\((?:\s+)?(?:exec)?\((?:[\w\d\.\@\—\-_*\#\$\s\,]+)\)(?:\s+)?from(?:\s+)?)([\w\d\._—\-\%\*\+\&\$\=]+)(?:\/([\w\-]+))?(?:\s+)?\)/g, (match, state, impName, impType) => {
+  css = css.replace(/(\@import\((?:\s+)?(?:exec)?\((?:[\w\d\.\@\—\-_*\#\$\s\,]+)\)(?:\s+)?from(?:\s+)?)([\w\d\._—\-\%\*\+\@\&\$\=]+)(?:\/([\w\-]+))?(?:\s+)?\)/g, (match, state, impName, impType) => {
   if (!impType) {
-    return `${state}'https://cdn.jsdelivr.net/gh/fscss-ttr/FSCSS@main/xf/styles/${impName}.fscss')`;
+    return `${state}'${xfr+impName}.fscss')`;
   }
-  return `${state}'https://cdn.jsdelivr.net/gh/fscss-ttr/FSCSS@main/xf/styles/${impName}.${impType}')`;
+  return `${state}'${xfr+impName}.${impType}')`;
   }); 
    return css;
-}
+  }
 
 function procVar(vcss) {
   function processSCSS(scssCode) {
@@ -485,11 +458,14 @@ function procVar(vcss) {
   return result.css;
 }
 
+let defExdepth = 0;
 
 function procDef(fscss) {
+  
   const pRegex = /@define\s+([\w\_\-\—]+)\s*\(([^)]*)\)\s*\$?\{\s*(?:"([^"]*)"|'([^']*)'|`([^`]*)`|([^\}^\{]*?))\s*\}/g;
   
   // First, extract all @define blocks and store them in defExfscss. FIGSH-FSCSS 
+  
   let processed = fscss.replace(pRegex,
     (match, name, paramsStr, body1, body2, body3, body4) => {
       const params = paramsStr.split(',').map(p =>p.trim()).filter(p =>p);
@@ -500,6 +476,7 @@ function procDef(fscss) {
   );
   
   // Now replace all @name(...) usages with their expanded bodies. FIGSH-FSCSS 
+  
   processed = processed.replace(
     /@([\w\_\-\—]+)\s*\(([\s\S]*?)\)/g,
     (match, name, argsStr) => {
@@ -530,10 +507,48 @@ const dfv = xfVal[1]?xfVal[1]:'';
       return result;
     }
   );
- if(!pRegex.test(processed)) return processed;
   
-  return procDef(processed); 
+  
+  if (!pRegex.test(processed)||defExdepth >= 10) {
+    for(let g=0;g<10;g++){
+  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;
 }
+ defExdepth++;
+ 
+ return procDef(processed);
+}
+
 function procExt(css) {
   let extractedVariables = {};
   let tempCSS = css;
@@ -542,7 +557,7 @@ function procExt(css) {
   tempCSS = tempCSS.replace(/("(?:[^"\\]|\\.)*")|('(?:[^'\\]|\\.)*')/g, function(fullMatch) {
     let quote = fullMatch[0];
     let content = fullMatch.slice(1, -1);
-    const directiveRegex = /@ext\((-?\d+),(\d+):\s*([^)]+)\)/g;
+    const directiveRegex = /@ext\((?:\s+)?(-?\d+)(?:\s+)?,(?:\s+)?(\d+)(?:\s+)?:\s*([^)]+)(?:\s+)?\)/g;
     let match;
     let directivesToProcess = [];
 
@@ -579,7 +594,7 @@ function procExt(css) {
   });
 
   // Step 2: Outside strings
-  tempCSS = tempCSS.replace(/([#.\w-]+)\s*@ext\((-?\d+),(\d+):\s*([^)]+)\)/g, function(match, token, start, len, varName) {
+  tempCSS = tempCSS.replace(/([#.\w-]+)\s*@ext\((?:\s+)?(-?\d+)(?:\s+)?,(?:\s+)?(\d+)(?:\s+)?:\s*([^)]+)(?:\s+)?\)/g, function(match, token, start, len, varName) {
     start = parseInt(start);
     len = parseInt(len);
     varName = varName.trim();

package/exec.js

@@ -1,4 +1,3 @@
-/* Figsh-fscss light, source v3., fscss.devtem.org */
 function exec({ type = 'text', content, onError, onSuccess }) {
   
   // 1. Validation
@@ -49,8 +48,6 @@ function exec({ type = 'text', content, onError, onSuccess }) {
 function xfscssProcessorWrap(){(async ()=>{
   /**
  * FSCSS Processing Script
- * Note: Use official npm package/CDN instead of copying this directly.
- * visit: (fscss.devtem.org) for support.
  */
  
 function procCntInit(ntc,stc){
@@ -368,24 +365,23 @@ function procExC(css) {
 
   return modifiedCSS.trim();
 }
-async function initlibraries(css){
-  css = css.replace(/exec\(\s*_init\sisjs\s*\)/g, "exec(https://cdn.jsdelivr.net/gh/fscss-ttr/FSCSS@main/xf/styles/isjs.fscss)");
-  css = css.replace(/exec\(\s*_init\sthemes\s*\)/g, "exec(https://cdn.jsdelivr.net/gh/fscss-ttr/FSCSS@main/xf/styles/trshapes.fthemes.fscss)")
-  css = css.replace(/exec\(_init\sarray1to500\s*\)/g, "exec(https://cdn.jsdelivr.net/gh/fscss-ttr/FSCSS@main/xf/styles/1to500.fscss)");
-  css = css.replace(/exec\(_init\s+([\w\d\._—\-\%\*\+\&\$\=]+)(?:\/([\w\-]+))?\s*\)/g, (match, impName, impType)=>{
-    if(!impType){
-    //`
-      return `exec(https://cdn.jsdelivr.net/gh/fscss-ttr/FSCSS@main/xf/styles/${impName}.fscss)`;
+
+  async function initlibraries(css) {
+  const xfr = 'https://cdn.jsdelivr.net/gh/fscss-ttr/FSCSS@main/xf/styles/';
+  css = css.replace(/exec\(_init\s+([\w\d\._—\-\%\*\+\@\&\$\=]+)(?:\/([\w\-]+))?\s*\)/g, (match, impName, impType) => {
+    if (!impType) {
+      //`
+      return `exec(${xfr+impName}.fscss)`;
     }
-    return `exec(https://cdn.jsdelivr.net/gh/fscss-ttr/FSCSS@main/xf/styles/${impName}.${impType})`;
+    return `exec(${xfr+impName}.${impType})`;
   });
-  css = css.replace(/(\@import\((?:\s+)?(?:exec)?\((?:[\w\d\.\@\—\-_*\#\$\s\,]+)\)(?:\s+)?from(?:\s+)?)([\w\d\._—\-\%\*\+\&\$\=]+)(?:\/([\w\-]+))?(?:\s+)?\)/g, (match, state, impName, impType) => {
-  if (!impType) {
-    return `${state}'https://cdn.jsdelivr.net/gh/fscss-ttr/FSCSS@main/xf/styles/${impName}.fscss')`;
-  }
-  return `${state}'https://cdn.jsdelivr.net/gh/fscss-ttr/FSCSS@main/xf/styles/${impName}.${impType}')`;
-  }); 
-   return css;
+  css = css.replace(/(\@import\((?:\s+)?(?:exec)?\((?:[\w\d\.\@\—\-_*\#\$\s\,]+)\)(?:\s+)?from(?:\s+)?)([\w\d\._—\-\%\*\+\@\&\$\=]+)(?:\/([\w\-]+))?(?:\s+)?\)/g, (match, state, impName, impType) => {
+    if (!impType) {
+      return `${state}'${xfr+impName}.fscss')`;
+    }
+    return `${state}'${xfr+impName}.${impType}')`;
+  });
+  return css;
 }
 
 function procVar(vcss) {
@@ -460,11 +456,14 @@ function procVar(vcss) {
   return result.css;
 }
 
+let defExdepth = 0;
 
 function procDef(fscss) {
+  
   const pRegex = /@define\s+([\w\_\-\—]+)\s*\(([^)]*)\)\s*\$?\{\s*(?:"([^"]*)"|'([^']*)'|`([^`]*)`|([^\}^\{]*?))\s*\}/g;
   
   // First, extract all @define blocks and store them in defExfscss. FIGSH-FSCSS 
+  
   let processed = fscss.replace(pRegex,
     (match, name, paramsStr, body1, body2, body3, body4) => {
       const params = paramsStr.split(',').map(p =>p.trim()).filter(p =>p);
@@ -475,6 +474,7 @@ function procDef(fscss) {
   );
   
   // Now replace all @name(...) usages with their expanded bodies. FIGSH-FSCSS 
+  
   processed = processed.replace(
     /@([\w\_\-\—]+)\s*\(([\s\S]*?)\)/g,
     (match, name, argsStr) => {
@@ -505,10 +505,48 @@ const dfv = xfVal[1]?xfVal[1]:'';
       return result;
     }
   );
- if(!pRegex.test(processed)) return processed;
   
-  return procDef(processed); 
+  
+  if (!pRegex.test(processed)||defExdepth >= 10) {
+    for(let g=0;g<10;g++){
+  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;
 }
+ defExdepth++;
+ 
+ return procDef(processed);
+}
+
 function procExt(css) {
   let extractedVariables = {};
   let tempCSS = css;
@@ -517,7 +555,7 @@ function procExt(css) {
   tempCSS = tempCSS.replace(/("(?:[^"\\]|\\.)*")|('(?:[^'\\]|\\.)*')/g, function(fullMatch) {
     let quote = fullMatch[0];
     let content = fullMatch.slice(1, -1);
-    const directiveRegex = /@ext\((-?\d+),(\d+):\s*([^)]+)\)/g;
+    const directiveRegex = /@ext\((?:\s+)?(-?\d+)(?:\s+)?,(?:\s+)?(\d+)(?:\s+)?:\s*([^)]+)(?:\s+)?\)/g;
     let match;
     let directivesToProcess = [];
 
@@ -554,7 +592,7 @@ function procExt(css) {
   });
 
   // Step 2: Outside strings
-  tempCSS = tempCSS.replace(/([#.\w-]+)\s*@ext\((-?\d+),(\d+):\s*([^)]+)\)/g, function(match, token, start, len, varName) {
+  tempCSS = tempCSS.replace(/([#.\w-]+)\s*@ext\((?:\s+)?(-?\d+)(?:\s+)?,(?:\s+)?(\d+)(?:\s+)?:\s*([^)]+)(?:\s+)?\)/g, function(match, token, start, len, varName) {
     start = parseInt(start);
     len = parseInt(len);
     varName = varName.trim();
@@ -584,8 +622,7 @@ function procExt(css) {
 
   return tempCSS;
 }
-
-
+  
 function procRan(input) {
   return input.replace(/@random\(\[([^\]]+)\](?:, *ordered)?\)/g, (match, valuesStr) => {
     const isOrdered = /, *ordered\)/.test(match);