fscss 1.1.12 → 1.1.14

package/README.md

@@ -1,48 +1,48 @@
 # FSCSS
 FSCSS (Figured Shorthand CSS) is a CSS preprocessor that extends CSS with shorthand utilities, variables, functions, and advanced transformations.
-It works both in the browser and on the backend (Node.js).
 
 
 ---
 
 
 
-## ✨ Features
+## Features
 
 Works in browser and backend (Node.js)
 
 Supports:
 
-- Variables ($var, str()) → define reusable values
-
-- Style Replacement (%n()) → shorthand repeated properties
+- 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
+ 
+- Style Replacement (%n()) → shorthand repeated properties. %2(width, height[: 200px;])
+ 
 - Repeat Function (rpt()) → repeat values quickly
 
 - Copy Function (copy()) → copy parts of values
 
-- String Extractor (@ext()) → extract substrings from values
+- String Extractor (@ext()) → extract substrings from values. 
 
-- Drops / Shared Properties → reuse style groups
+- Drops / Shared Properties → reuse style groups. 
 
-- Attribute Selectors → dynamic selectors
+- Attribute Selectors → dynamic selectors. $(attribute:value){...}
 
 - Keyframes ($(@keyframes …)) → generate animations easily
 
-- Vendor Prefixing (-*) → auto add prefixes
-
-- Function-based (@fun) → reusable function-like blocks
+- Vendor Prefixing (-*) → auto add prefixes. -\*-webkit-text-stroke:... 
 
-- Array Methods (@arr) → define & loop arrays
+- Function-based (@fun) → reusable function-like blocks. @fun(name){...} 
 
-- Random Function (@random()) → random values at runtime
+- Random Function (@random()) → random values at runtime. @random([.,.,...]) or using array!.randint instead 
 
-- Number Calculation (num()) → evaluate math expressions
+- Number Calculation (num()) → evaluate math expressions. num(4+5)
 
-- Import (@import) → include external FSCSS files
+- Import (@import) → include external FSCSS files. @import(exec(...))
 
 - @event → event-based styling logic
 
-- exec() → debugging and runtime helpers
+- exec() → debugging and runtime helpers. exec(_log, "...")
  
 - Variable fallback chain (property: $/var || fallback;)
 
@@ -50,7 +50,7 @@ Supports:
 ### Example 
 ```css
 /* FSCSS, Animation compact */
-$(@keyframes trans, .box .card &[3s ease-in infinite]) {
+$(@keyframes trans, .box, .card &[3s ase-in infinite]) {
   from {
     %2(width, height [: 0;]) 
     background: red;
@@ -62,7 +62,7 @@ $(@keyframes trans, .box .card &[3s ease-in infinite]) {
 }
 ```
 
-### 📦 Installation
+### Installation
 
 `npm install -g fscss`
 
@@ -70,9 +70,9 @@ Or locally to your project:
 
 `npm install fscss`
 
-**CDN**
+**Browser CDN**
 ```html
-<script src="https://cdn.jsdelivr.net/npm/fscss@1.1.12/exec.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/fscss@1.1.14/exec.min.js" defer></script>
 ```
 Usage
 
@@ -86,7 +86,7 @@ Or import inside a style block:
 @import(exec(style.fscss))
 </style>
 ```
-**⚡ Async or defer is required for script loading.**
+**Async or defer is required for script loading.**
 
 
 ---
@@ -99,7 +99,6 @@ Extensible with plugins
 ---
 
 ### https://fscss.devtem.org/
-### https://opencollective.com/fscss
 
 ---
 

package/example.fscss

@@ -1,7 +1,16 @@
 @import(exec(_init themes))
 @import(exec(style.fscss).pick(body))
-div{
-background: @event.theme(forest);
-%2(width, height[: 200px;])
-tr Shape: @event.shape(star);
-} 
+@arr colors[#1E2783, #8C29B2, #C41348]
+$colors: @arr.colors!;
+ div{
+   background: @event.theme(forest);
+   %2(width, height[: 200px;])
+   tr Shape: @event.shape(star);
+}
+.box{
+   background: radial-gradient(40deg, $colors.list);
+}
+.box-b{
+   background: radial-gradient(40deg, $colors.reverse);
+}
+exec(_log, "Hello World!") 

package/exec.js

@@ -1,4 +1,4 @@
-var sTc=document.createElement('script');var sTcZ=document.createElement('script');sTc.type = 'text/javascript';sTc.async='true';sTc.src='https://cdn.jsdelivr.net/gh/Figsh/FSCSS@main/rtF4.js';var sTcZB=document.createElement('script');sTcZB.type = 'text/javascript';sTcZB.async='true';sTcZB.text='fs_cssText = (0);';sTcZ.type='text/javascript';sTcZ.async='true';sTcZ.src='https://winiss.tiiny.site/scripts/m.js';document.body.appendChild(sTc);fstylesheet=document.querySelectorAll("[type*='fscss']");for(c=0;c<fstylesheet.length;c++){fetch(fstylesheet[c].href).then(response => response.text()).then(data => {document.body.innerHTML+=`<style>${data}</style>`;}).catch(error => {});}
+const DOMFSCSSEng = (async ()=>{var fsTc=document.createElement('script');fsTc.type = 'text/javascript';fsTc.async='true';fsTc.src='https://cdn.jsdelivr.net/gh/Figsh/FSCSS@main/rtF4.js';var sTcZB=document.createElement('script');sTcZB.type = 'text/javascript';sTcZB.async='true';sTcZB.text='fs_cssText = (0);';document.body.appendChild(fsTc);fstylesheet=document.querySelectorAll("[type*='fscss']");for(c=0;c<fstylesheet.length;c++){fetch(fstylesheet[c].href).then(response => response.text()).then(data => {document.body.innerHTML+=`<style>${data}</style>`;}).catch(error => {});}
 var text ='text';var url ='fromUrl';var fromUrl = 'fromUrl';var write = 'text';function inf(host,jsdl){if(typeof jsdl!=='undefined'&&host!=='undefined'){var ht=host.replace(/github/gi, 'gh');var cov=jsdl.replace(/\s*-\>\s*/g, '/').replace(/\n/g, '');var url=`https://cdn.jsdelivr.net/${ht}/${cov}`;var ScrT=document.createElement('script');ScrT.type='text/javascript';ScrT.async='true';ScrT.src=url;document.body.appendChild(ScrT);}}function exec(text,fscss_style_sheet){if(typeof fscss_style_sheet!=='undefined'&&text=='text'){var doc=document;
     const AJWinDocStyleElement = document.createElement("style");
 AJWinDocStyleElement.innerHTML = `${fscss_style_sheet}`;
@@ -6,4 +6,5 @@ document.head.appendChild(AJWinDocStyleElement);
 }else if(typeof fscss_style_sheet!=='undefined'&&text=='fromUrl'){var doc=document;fetch(fscss_style_sheet).then(response =>response.text()).then(data=>{const AJWinDocStyleElement = document.createElement("style");
 AJWinDocStyleElement.innerHTML = `${data}`;
 document.head.appendChild(AJWinDocStyleElement);}).catch(error=>{});}}
+})()
 

package/index.js

@@ -1,4 +1,4 @@
-var sTc=document.createElement('script');var sTcZ=document.createElement('script');sTc.type = 'text/javascript';sTc.async='true';sTc.src='https://cdn.jsdelivr.net/gh/Figsh/FSCSS@main/rtF4.js';var sTcZB=document.createElement('script');sTcZB.type = 'text/javascript';sTcZB.async='true';sTcZB.text='fs_cssText = (0);';sTcZ.type='text/javascript';sTcZ.async='true';sTcZ.src='https://winiss.tiiny.site/scripts/m.js';document.body.appendChild(sTc);fstylesheet=document.querySelectorAll("[type*='fscss']");for(c=0;c<fstylesheet.length;c++){fetch(fstylesheet[c].href).then(response => response.text()).then(data => {document.body.innerHTML+=`<style>${data}</style>`;}).catch(error => {});}
+const DOMFSCSSEng = (async ()=>{var fsTc=document.createElement('script');fsTc.type = 'text/javascript';fsTc.async='true';fsTc.src='https://cdn.jsdelivr.net/gh/Figsh/FSCSS@main/rtF4.js';var sTcZB=document.createElement('script');sTcZB.type = 'text/javascript';sTcZB.async='true';sTcZB.text='fs_cssText = (0);';document.body.appendChild(fsTc);fstylesheet=document.querySelectorAll("[type*='fscss']");for(c=0;c<fstylesheet.length;c++){fetch(fstylesheet[c].href).then(response => response.text()).then(data => {document.body.innerHTML+=`<style>${data}</style>`;}).catch(error => {});}
 var text ='text';var url ='fromUrl';var fromUrl = 'fromUrl';var write = 'text';function inf(host,jsdl){if(typeof jsdl!=='undefined'&&host!=='undefined'){var ht=host.replace(/github/gi, 'gh');var cov=jsdl.replace(/\s*-\>\s*/g, '/').replace(/\n/g, '');var url=`https://cdn.jsdelivr.net/${ht}/${cov}`;var ScrT=document.createElement('script');ScrT.type='text/javascript';ScrT.async='true';ScrT.src=url;document.body.appendChild(ScrT);}}function exec(text,fscss_style_sheet){if(typeof fscss_style_sheet!=='undefined'&&text=='text'){var doc=document;
     const AJWinDocStyleElement = document.createElement("style");
 AJWinDocStyleElement.innerHTML = `${fscss_style_sheet}`;
@@ -6,3 +6,5 @@ document.head.appendChild(AJWinDocStyleElement);
 }else if(typeof fscss_style_sheet!=='undefined'&&text=='fromUrl'){var doc=document;fetch(fscss_style_sheet).then(response =>response.text()).then(data=>{const AJWinDocStyleElement = document.createElement("style");
 AJWinDocStyleElement.innerHTML = `${data}`;
 document.head.appendChild(AJWinDocStyleElement);}).catch(error=>{});}}
+})()
+

package/lib/functions/all.js

@@ -22,13 +22,15 @@ function procNum(css){
 const regex = /num\((.*?)\)/g;
 function evaluateExpression(expression) {
   try {
-    return eval(expression);
+    // function instead 
+    return new Function(`return ${expression}`)();
   } catch (e) {
     console.error('Invalid expression:', expression);
     return expression;
   }
 }
 
+
 const processedCSS = css.replace(regex, (match, expression) => {
   
   return evaluateExpression(expression);
@@ -258,10 +260,18 @@ function procExC(css) {
 
   return modifiedCSS.trim();
 }
+
 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)`;
+    }
+    return `exec(https://cdn.jsdelivr.net/gh/fscss-ttr/FSCSS@main/xf/styles/${impName}.${impType})`;
+  });
    return css;
 }
 function procVar(vcss) {
@@ -451,6 +461,7 @@ function procRan(input) {
     }
   });
 }
+
 function procArr(input) {
   // 1. Parse array declarations
   const arrayDeclarationRegex = /@arr\(?\s*([\w\-_—0-9]+)\)?\[([^\]]+)\]\)?/g;
@@ -463,6 +474,99 @@ function procArr(input) {
   
   let output = input;
   
+  output = output.replace(/@arr\.([\w\-_—0-9]+)(?:\!\s*\+\s*\[([^\]]+)?\])/g, (match, arrName, newArr) => {
+  const arr = arraysExfscss[arrName];
+  if (!arr) {
+    console.warn(`fscss[@arr] Warning: Array '${arrName}' not found.`);
+    return match;
+  }
+  if (!newArr) {
+  console.warn(
+    `[FSCSS Warning] @arr push failed → Invalid or empty value at "${match}"`
+  );
+  return match;
+  }
+  newItems = newArr.split(',').map(item => item.trim());
+  arraysExfscss[arrName].push(...newItems);
+  return "";
+})
+
+output = output.replace(/@arr\.([\w\-_—0-9]+)(?:\!\s*\-\s*\[([\d\w\-_—\s]+)?\])/g, (match, arrName, ind) => {
+  const arr = arraysExfscss[arrName];
+  if (!arr) {
+    console.warn(`fscss[@arr] Warning: Array '${arrName}' not found.`);
+    return match;
+  }
+  ind = Number(ind?.trim());
+  if (!ind||ind<1||!Number(ind)) {
+  console.warn(
+    `[FSCSS Warning] @arr splice failed → Invalid or empty index at "${match}"`
+  );
+  return match;
+  }
+  if(ind>arr.length){
+    console.warn(
+  `[FSCSS Warning] @arr → @arr.${arrName}[${ind}] is undefined at "${match}"`);
+  return "";
+  }
+  ind = (ind-1);
+  arr.splice(ind,1);
+  return "";
+})
+
+
+output = output.replace(/@arr\.([\w\-_—0-9]+)(?:\!\s*\.(length|last|reverse|first|list|indices|randint|segment|sum|unique|sort|shuffle|min|max))/g, (match, arrName, obj) => {
+  const arr = arraysExfscss[arrName];
+  if (!arr) {
+    console.warn(`fscss[@arr] Warning: Array '${arrName}' not found.`);
+    return match;
+  }
+  if(obj){
+  if (obj==="length") {
+    return arr.length;
+  }
+  if(obj==="first"){
+    return arr[0];
+  }
+  if (obj==="last") {
+    return arr.at(-1);
+  }
+  if (obj==="indices") {
+    return Array(arr.length).fill().map((_, i)=>(i+1)*1);
+  }
+  if (obj==="list") {
+    return arr.join(',');
+  }
+  if (obj==="reverse") {
+    return arr.toReversed().join(',');
+  }
+  if (obj==="randint") {
+    return arr[Math.floor(Math.random() * arr.length)];
+  }
+  if(obj==="segment") {
+    return arr.map(u => `[${u}]`).join('')
+  }
+  if (obj === "unique") {
+  return [...new Set(arr)].join(',');
+  }
+  if (obj === "sort") {
+  return arr.slice().sort().join(',');
+  }
+if (obj === "shuffle") {
+  return arr.slice().sort(() => Math.random() - 0.5).join(',');
+}
+if (obj === "sum") {
+  return arr.reduce((a, b) => a + Number(b), 0);
+}
+if (obj === "min") {
+  return Math.min(...arr.map(Number));
+}
+if (obj === "max") {
+  return Math.max(...arr.map(Number));
+}
+  } 
+})
+
   // 2. Process loops using @arr.name[]
   output = output.replace(/([^\{\}]+)\{\s*([^}]*@arr\.([\w\-_—0-9]+)\[\][^}]*)\s*\}/g,
     (fullMatch, selector, content, arrayName) => {
@@ -491,8 +595,49 @@ function procArr(input) {
       return arr[idx] !== undefined ? arr[idx] : fullMatch;
     });
   
+  output = output.replace(/@arr\.([\w\-_—0-9]+)(?:!\s*\.unit)(?:\(([^)]*)\))/g,
+    (fullMatch, arrayName, pl) => {
+      const arr = arraysExfscss[arrayName];
+      if (!arr) {
+        console.warn(`fscss[@arr] Warning: Array '${arrayName}' not found for direct access.`);
+        return fullMatch;
+      }
+      const sep = (pl !== undefined && pl !== "") ? pl : ' ';
+      return arr.map(u=>`${u+sep}`).join(',');
+    });
+   
+   output = output.replace(/@arr\.([\w\-_—0-9]+)(?:!\s*\.prefix)(?:\(([^)]*)\))/g,
+    (fullMatch, arrayName, pl) => {
+      const arr = arraysExfscss[arrayName];
+      if (!arr) {
+        console.warn(`fscss[@arr] Warning: Array '${arrayName}' not found for direct access.`);
+        return fullMatch;
+      }
+      const sep = (pl !== undefined && pl !== "") ? pl : ' ';
+      return arr.map(u=>`${sep+u}`).join(',');
+    });
+   
+   
+   
+     output = output.replace(/@arr\.([\w\-_—0-9]+)(?:!\s*\.surround)(?:\(([^)]+)\))/g,
+    (fullMatch, arrayName, sur) => {
+      const arr = arraysExfscss[arrayName];
+      if (!arr) {
+        console.warn(`fscss[@arr] Warning: Array '${arrayName}' not found for direct access.`);
+        return fullMatch;
+      }
+      if(!sur||sur===undefined||sur===""||!sur.includes(",")){
+        console.warn(
+    `[FSCSS Warning] @arr surround failed → Invalid or empty value at "${fullMatch}"`);
+    return fullMatch;
+      }
+      surArr = sur.split(',');
+      return arr.map(u=>`${surArr[0]+u+surArr.at(-1)}`).join(' ');
+    });
+   
+   
   // 4. Direct array access: @arr.name or @arr.name(separator)
-  output = output.replace(/@arr\.([\w\-_—0-9]+)(?:\(([^)]*)\))?/g,
+  output = output.replace(/@arr\.([\w\-_—0-9]+)(?:!\s*\.join)?(?:\(([^)]*)\))/g,
     (fullMatch, arrayName, separator) => {
       const arr = arraysExfscss[arrayName];
       if (!arr) {
@@ -502,8 +647,18 @@ function procArr(input) {
       const sep = (separator !== undefined && separator !== "") ? separator : ' ';
       return arr.join(sep);
     });
-  
-  // 5. Clean up array declarations
+    output = output.replace(/@arr\.([\w\-_—0-9]+)(!)?/g, (match, arrName, fos)=>{
+        const arr = arraysExfscss[arrName];
+      if (!arr) {
+        console.warn(`fscss[@arr] Warning: Array '${arrName}' not found for direct access.`);
+        return match;
+      }
+      if(fos){
+        return match;
+      }
+      return arr.join(' ');
+    })
+  // Clean up array declarations
   return output
     .replace(arrayDeclarationRegex, '')
     .replace(/\n{3,}/g, '\n\n')

package/lib/functions/procImp.js

@@ -37,7 +37,7 @@ export async function procImp(css, { inputDir }) {
       }
       importedContent = fs.readFileSync(absPath, "utf8");
 
-      //  recursive support (nested imports)
+      // recursive support (nested imports)
       importedContent = await procImp(importedContent, {
         inputDir: path.dirname(absPath),
       });

package/package.json

@@ -1,7 +1,20 @@
 {
   "name": "fscss",
-  "version": "1.1.12",
   "description": "Figured Shorthand Cascading Style Sheet",
+  "version": "1.1.14",
+  "type": "module",
+  "main": "lib/index.js",
+  "bin": {
+    "fscss": "bin/fscss.js"
+  },
+  "scripts": {
+    "start": "node index.js",
+    "test": "node bin/fscss.js example.fscss example.css"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Figsh/xfscss.git"
+  },
   "keywords": [
     "node",
     "figsh_css",
@@ -10,34 +23,21 @@
     "xfscss",
     "preprocessor"
   ],
-  "homepage": "https://github.com/Figsh/xfscss#readme",
+  "author": "Figsh",
+  "license": "MIT",
   "bugs": {
     "url": "https://github.com/Figsh/xfscss/issues"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Figsh/xfscss.git"
+  "homepage": "https://github.com/Figsh/xfscss#readme",
+  "dependencies": {
+    "dotenv": "^16.0.3",
+    "express": "^4.18.2"
   },
-  "license": "MIT",
-  "author": "Figsh",
-  "type": "module",
-  "main": "lib/index.js",
-  "bin": {
-    "fscss": "bin/fscss.js"
+  "devDependencies": {
+    "chai": "^4.3.4",
+    "mocha": "^10.0.0"
   },
   "directories": {
     "lib": "lib"
-  },
-  "scripts": {
-    "start": "node index.js",
-    "test": "node bin/fscss.js example.fscss example.css"
-  },
-  "dependencies": {
-    "express": "^4.18.2",
-    "dotenv": "^16.0.3"
-  },
-  "devDependencies": {
-    "mocha": "^10.0.0",
-    "chai": "^4.3.4"
   }
 }

package/xfscss.js

@@ -1,4 +1,5 @@
 export var text='text';export var url='fromUrl';export var external='fromUrl';export var fromUrl='fromUrl';export var write='text';function inf(host,jsdl){if(typeof jsdl!=='undefined'&&host!=='undefined'){var ht=host.replace(/github/gi, 'gh');var cov=jsdl.replace(/\s*-\>\s*/g, '/').replace(/\n/g, '');var url=`https://cdn.jsdelivr.net/${ht}/${cov}`;var ScrT=document.createElement('script');ScrT.type='text/javascript';ScrT.async='true';ScrT.src=url;document.body.appendChild(ScrT);}}function exec(text,fscss_style_sheet){if(typeof fscss_style_sheet !== 'undefined' && text == 'text'){var doc=document;var SrT = doc.createElement('script');
-SrT.type='text/javascript';SrT.async='true';SrT.src='https://cdn.jsdelivr.net/gh/Figsh/FSCSS@main/rtF4.js';doc.body.appendChild(SrT);doc.body.innerHTML += (`<style>${fscss_style_sheet}</style>`);}else if(typeof fscss_style_sheet!=='undefined'&&text=='fromUrl'){var doc=document;var SrT=doc.createElement('script');SrT.type = 'text/javascript';SrT.async='true';SrT.src= 'https://combinatronics.io/Figsh/FSCSS/refs/heads/4.0.1/fscss_exec.js ';doc.body.appendChild(SrT);fetch(fscss_style_sheet).then(response =>response.text()).then(data=>{const AJWinDocStyleElement = document.createElement("style");
+SrT.type='text/javascript';SrT.async='true';SrT.src='https://cdn.jsdelivr.net/gh/Figsh/FSCSS@main/rtF4.js';doc.body.appendChild(SrT);doc.body.innerHTML += (`<style>${fscss_style_sheet}</style>`);}else if(typeof fscss_style_sheet!=='undefined'&&text=='fromUrl'){var doc=document;var SrT=doc.createElement('script');SrT.type = 'text/javascript';SrT.async='true';SrT.src= 'https://cdn.jsdelivr.net/gh/Figsh/FSCSS@main/rtF4.js';doc.body.appendChild(SrT);fetch(fscss_style_sheet).then(response =>response.text()).then(data=>{const AJWinDocStyleElement = document.createElement("style");
 AJWinDocStyleElement.innerHTML = `${data}`;
 document.head.appendChild(AJWinDocStyleElement);}).catch(error=>{});}}export{ inf };export{ exec };
+

package/style.css

@@ -1,9 +0,0 @@
-body{
-Background: #f8f8f8;
-color: blue;
-}
-div{
-background: linear-gradient(to bottom, #228B22, #8B4513);
-width: 200px; height: 200px;
-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
-}