fscss 1.1.13 → 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`
 
@@ -72,7 +72,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 +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.**
 
 
 ---

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/lib/functions/all.js

@@ -260,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) {
@@ -453,6 +461,7 @@ function procRan(input) {
     }
   });
 }
+
 function procArr(input) {
   // 1. Parse array declarations
   const arrayDeclarationRegex = /@arr\(?\s*([\w\-_—0-9]+)\)?\[([^\]]+)\]\)?/g;
@@ -465,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) => {
@@ -493,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) {
@@ -504,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/package.json

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