fscss 1.1.21 → 1.1.23

package/lib/functions/all.js

@@ -123,42 +123,37 @@ function parseConditionBlocks(block) {
   }
   return blocks;
 }
+
 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;
-    
-    if (!['_log', '_error', '_warn', '_info'].includes(method)) {
+    const arg = dQ ?? sQ ?? raw;
+
+    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;
@@ -315,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 = {};
@@ -454,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 = {};
@@ -463,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 = [];
 
@@ -500,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();
@@ -531,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.21",
+  "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%) 
+} 
+