fscss 1.1.13 → 1.1.15

package/README.md

@@ -1,48 +1,50 @@
 # 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
+- Reusable block → @define name(x,y){...} - https://github.com/fscss-ttr/FSCSS/blob/main/FSCSS_%40define_method.md
+ 
+- Variables ($var, str()) → define reusable values, str(boxBased, "..."), $var:...;
+ 
+- Array Methods (@arr) → define array - https://github.com/fscss-ttr/FSCSS/blob/main/FSCSS_array_method.md
+ 
+- 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 +52,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 +64,7 @@ $(@keyframes trans, .box .card &[3s ease-in infinite]) {
 }
 ```
 
-### 📦 Installation
+### Installation
 
 `npm install -g fscss`
 
@@ -72,7 +74,7 @@ Or locally to your project:
 
 **Browser CDN**
 ```html
-<script src="https://cdn.jsdelivr.net/npm/fscss@1.1.13/exec.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/fscss@1.1.14/exec.min.js" defer></script>
 ```
 Usage
 
@@ -86,7 +88,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.**
 
 
 ---

package/example.fscss

@@ -1,7 +1,25 @@
 @import(exec(_init themes))
 @import(exec(style.fscss).pick(body))
-div{
-background: @event.theme(forest);
-%2(width, height[: 200px;])
-tr Shape: @event.shape(star);
-} 
+@define card(bg, color: white){
+   background: @use(bg);
+   color: @use(color);
+   padding: 10px;
+   border-radius: 10px;
+}
+@arr colors[#1E2783, #8C29B2, #C41348]
+$colors: @arr.colors!;
+ div{
+   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);
+}
+.card{
+   @card(#007999)
+}
+exec(_log, "Hello World!") 

package/lib/functions/all.js

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

package/lib/processor.js

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

package/package.json

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