fscss 1.1.22 → 1.1.23

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);

package/lib/functions/all.js

@@ -310,74 +310,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)=>{
+    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 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);
-      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;
-    }
-  );
- if(!pRegex.test(processed)) return processed;
-  
-  return procDef(processed); 
-}
-
+  }
 function procVar(vcss) {
   function processSCSS(scssCode) {
     const globalVars = {};
@@ -449,6 +399,96 @@ function procVar(vcss) {
   const result = processSCSS(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);
+      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;
+    }
+  );
+  
+  
+  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 = {};
@@ -458,7 +498,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 = [];
 
@@ -495,7 +535,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();
@@ -526,7 +566,6 @@ function procExt(css) {
   return tempCSS;
 }
 
-
 function procRan(input) {
   return input.replace(/@random\(\[([^\]]+)\](?:, *ordered)?\)/g, (match, valuesStr) => {
     const isOrdered = /, *ordered\)/.test(match);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "fscss",
   "description": "Figured Shorthand Cascading Style Sheet",
-  "version": "1.1.22",
+  "version": "1.1.23",
   "type": "module",
   "main": "lib/index.js",
   "bin": {

package/public/test.html

@@ -1,24 +1,101 @@
+<!DOCTYPE html>
 <head>
-  <link href="./public/vars.fscss" rel="stylesheet" type='text/fscss'>
-<script src="index.js" async=""></script>
+<script src="/exec.js" async=""></script>
 </head>
-<h1>HELLO WORLD!</h1>
-<div name='foo'></div>
-<style>
-/* styling ... */
-  body{
-    BACKGROUND: $init-background-stack!;
-    COLOR: $init-color!;
-      TEXT-ALIGN: CENTER;
-   } 
-  h1{
-    font-family: $init-font-family!;
-    -*-text-stroke: $init-text-stroke!;
-    color: #299221;
- }  
-  $(name: foo){
-    BORDER: $init-border!;
-    OUTLINE: $init-outline!;
-    %2(width, height[: 70px;]) 
-   } 
 <style>
+@import((
+flex-wrap-center as flex-wrap,
+star-clip as star
+) from "vars.fscss")
+
+body{
+
+background: #233332;
+
+}
+
+.box{
+
+%2(width, height [: 400px;])
+
+position: absolute;
+
+transform-style: preserve-3d;
+
+@flex-wrap()
+
+}
+
+@arr pos[count(360, 10)]
+
+.box .star:nth-child(@arr.pos[]){
+
+$pos: @arr.pos[];
+
+background: #2FF200;
+
+padding: 1px;
+
+width: 100px;
+
+position: absolute;
+
+transform-origin: right;
+
+transform: rotate($pos!deg);
+
+}
+
+.star:before{
+
+content: " ";
+
+position: absolute;
+
+width: 20px;
+
+height: 20px;
+
+background: #C800F2;
+
+top: -8.5px;
+
+left: -7px;
+
+transform: rotate(60deg);
+
+clip-path: @star();
+
+}
+
+$(@keyframes rotate,.star &[360s linear infinite alternate]){
+
+to{
+
+transform: rotate(0);
+
+}
+
+}
+</style>
+
+
+<div class="box"></div>
+
+
+<script>
+
+const box = document.querySelector(".box");
+
+for(let i =0; i<360;i++){
+
+const star = document.createElement("div");
+
+star.className="star";
+
+box.appendChild(star)
+
+}
+
+</script>
+

package/public/vars.fscss

@@ -5,3 +5,14 @@ $init-text-stroke: 0.2px #871;
 $init-caret-color: rgba(%3([190,])1);
 $init-font-family: Arial, Helvetica, sans-serif;
 $init-outline: 1px groove #235000;
+
+@define flex-wrap-center(){
+display: flex;
+justify-content: center;
+align-items: center;
+flex-wrap: wrap;
+} 
+@define star-clip(){
+polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%) 
+} 
+

package/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();