fscss 1.1.11 → 1.1.13

package/README.md

@@ -5,59 +5,103 @@ It works both in the browser and on the backend (Node.js).
 
 ---
 
-🚀 Installation
 
-`npm install -g fscss`
 
-Or locally to your project:
+## ✨ Features
 
-`npm install fscss`
+Works in browser and backend (Node.js)
+
+Supports:
 
+- Variables ($var, str()) → define reusable values
 
----
+- Style Replacement (%n()) → shorthand repeated properties
+- Repeat Function (rpt()) → repeat values quickly
 
+- Copy Function (copy()) → copy parts of values
 
+- String Extractor (@ext()) → extract substrings from values
 
-## ✨ Features
+- Drops / Shared Properties → reuse style groups
 
-Works in browser and backend (Node.js)
+- Attribute Selectors → dynamic selectors
 
-Supports:
+- Keyframes ($(@keyframes …)) → generate animations easily
+
+- Vendor Prefixing (-*) → auto add prefixes
 
-- `@import(exec(...))` inline imports
+- Function-based (@fun) → reusable function-like blocks
 
-- Variables
+- Array Methods (@arr) → define & loop arrays
 
-- Functions
+- Random Function (@random()) → random values at runtime
 
-- Arrays
-  
-- replace
-  
-- Random values (random)
+- Number Calculation (num()) → evaluate math expressions
 
-- Copy (copy)
+- Import (@import) → include external FSCSS files
 
-- Number operations (num)
+- @event → event-based styling logic
 
-- Extract string (ext)
+- exec() → debugging and runtime helpers
+ 
+- Variable fallback chain (property: $/var || fallback;)
 
-- Event bindings (event)
-  
-- count(number)
 
-- length(string)
+### Example 
+```css
+/* FSCSS, Animation compact */
+$(@keyframes trans, .box .card &[3s ease-in infinite]) {
+  from {
+    %2(width, height [: 0;]) 
+    background: red;
+  } 
+  to {
+    %2(width, height [: 200px;])
+    background: blue;
+  }
+}
+```
 
-- Debug helpers (debug)
+### 📦 Installation
+
+`npm install -g fscss`
+
+Or locally to your project:
+
+`npm install fscss`
+
+**Browser CDN**
+```html
+<script src="https://cdn.jsdelivr.net/npm/fscss@1.1.13/exec.min.js" defer></script>
+```
+Usage
+
+Link FSCSS files directly:
+```html
+<link type="text/fscss" href="style.fscss">
+```
+Or import inside a style block:
+```html
+<style>
+@import(exec(style.fscss))
+</style>
+```
+**⚡ Async or defer is required for script loading.**
+
+
+---
 
 
 Transform shorthand syntax into valid CSS
 
 Extensible with plugins
 
+---
 
+### https://fscss.devtem.org/
 
+---
 
 📜 License
 
-MIT © 2025 Figsh—FSCSS
+MIT © Figsh—FSCSS

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

@@ -3,7 +3,7 @@ function procCntInit(ntc,stc){
   return `${nu}`;
 } 
   function procCnt(text){
-    const reg=/count\(\s*([\d\.]+)\s*(?:\s*,\s*([\d\.]+)?)?\s*\)/g;
+    const reg=/count\((\d+)(?:,(\d+)?)?\)/g;
     text = text.replace(reg, (March, num, step)=>{
       if(step===null)step=1;
       return procCntInit(parseInt(num), parseInt(step?step:1));
@@ -11,7 +11,7 @@ function procCntInit(ntc,stc){
     return text;
   }
   function procChe(text) {
-  const reg = /length\((?:([^\)]+)|\s*"([^"]*)"\s*|\s*'([^']*)'\s*)\)/g;
+  const reg = /length\((?:([^\)]+)|"([^"]*)"|'([^']*)')\)/g;
   text = text.replace(reg, (match, txt, txt2, txt3) => {
     const resTxt = txt || txt2 || txt3;
     return resTxt.length;
@@ -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);
@@ -917,6 +919,43 @@ function escapeRegExp(string) {
   return string.replace(/[.*+?^${}|[\]\\]/g, '\\$&');
 }
 
+/* Variable fallback chain */
+function vfc(fscss){
+  fscss = fscss.replace(
+  /([\w-]+:\s*)(\$\/?[\w-]+!?)(\s*\|\|\s*([^\n\};]+))?/g,
+  (match, pr, variable, fallbackPart, fallback) => {
+    
+    // Invalid variable format
+    if (!/^\$\/[\w-]+!?$/.test(variable)) {
+      console.warn(`fscss[VFC]: Invalid variable escape syntax -> ${variable} at ${match}`);
+      return match;
+    }
+    
+    //  Required variable but has fallback
+    if (variable.endsWith("!") && fallback) {
+      console.warn(`fscss[VFC]: Required variable "${variable}" should not have fallback (${fallback})`);
+    }
+    
+    //  Fallback starts with ||
+    if (fallbackPart && !fallback?.trim()) {
+      console.warn(`fscss[VFC]: Empty fallback in -> ${match}`);
+      return match;
+    }
+    
+    //  Invalid fallback variable syntax
+    if (fallback?.includes("$/") && !/^\$\/[\w-]+!?$/.test(fallback.trim())) {
+      console.warn(`fscss[VFC]: Invalid fallback variable syntax -> ${fallback}`);
+    }
+    
+    // Compile logic
+    if (fallback) {
+      return `${pr}${fallback.trim()};${pr}${variable}`;
+    }
+    
+    return `${pr}${variable}`;
+  })
+  return fscss;
+}
 
 // Applies all FSCSS transformations to CSS content
 function applyFscssTransformations(css) {
@@ -1074,6 +1113,6 @@ function execObj(css){
 }
 
     export { initlibraries, 
-    impSel, procImp, replaceRe, procExt, procVar,procFun, procArr, procEv, procRan, transformCssValues, procNum,applyFscssTransformations,procExC, procCnt, procChe, execObj
+    impSel, procImp, replaceRe, procExt, procVar,procFun, procArr, procEv, procRan, transformCssValues, procNum, vfc, applyFscssTransformations,procExC, procCnt, procChe, execObj
     } 
     

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

@@ -10,6 +10,7 @@ import {
   procRan,
   transformCssValues,
   procNum,
+  vfc, 
   applyFscssTransformations,
   procExC,
   procCnt, 
@@ -18,14 +19,17 @@ import {
 } from "./functions/all.js";
 import { procImp } from "./functions/procImp.js";
 import { impSel } from "./functions/impSel.js";
-export async function processFscss(css, options = {}){
+export async function processFscss(css, options = {}) {
   const { inputDir = process.cwd() } = options;
 
   if (!css.includes("exec.obj.block(all)")) {
        if(!css.includes("exec.obj.block(init lab)"))css = initlibraries(css);
-    if(!css.includes("exec.obj.block(f import)")||!css.includes("exec.obj.block(f import pick)")){css = await impSel(css, {inputDir})};
-    if(!css.includes("exec.obj.block(f import)")){css = await procImp(css, {inputDir});}
-    
+    if(!css.includes("exec.obj.block(f import)")||!css.includes("exec.obj.block(f import pick)")){css = await impSel(css, {inputDir});}
+    if(!css.includes("exec.obj.block(f import)")){css = await procImp(css, {inputDir});} 
+    if(!css.includes("exec.obj.block(init lab)")||css.includes("exec.obj.block(exInit lab)"))css = initlibraries(css);
+    if(!css.includes("exec.obj.block(f import)")||!css.includes("exec.obj.block(f import pick)")){css = await impSel(css, {inputDir});}
+    if(!css.includes("exec.obj.block(f import)")){css = await procImp(css, {inputDir});} 
+    if(!css.includes("exec.obj.block(vfc)")) css = vfc(css);
     if(!css.includes("exec.obj.block(store:before)")||!css.includes("exec.obj.block(store)"))css = replaceRe(css);
     if(!css.includes("exec.obj.block(ext:before)")||!css.includes("exec.obj.block(ext)"))css = procExt(css);
     if(!css.includes("exec.obj.block(f var)"))css = procVar(css);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "fscss",
   "description": "Figured Shorthand Cascading Style Sheet",
-  "version": "1.1.11",
+  "version": "1.1.13",
   "type": "module",
   "main": "lib/index.js",
   "bin": {
@@ -20,7 +20,8 @@
     "figsh_css",
     "fs-css",
     "fscss",
-    "xfscss"
+    "xfscss",
+    "preprocessor"
   ],
   "author": "Figsh",
   "license": "MIT",
@@ -29,12 +30,12 @@
   },
   "homepage": "https://github.com/Figsh/xfscss#readme",
   "dependencies": {
-    "express": "^4.18.2",
-    "dotenv": "^16.0.3"
+    "dotenv": "^16.0.3",
+    "express": "^4.18.2"
   },
   "devDependencies": {
-    "mocha": "^10.0.0",
-    "chai": "^4.3.4"
+    "chai": "^4.3.4",
+    "mocha": "^10.0.0"
   },
   "directories": {
     "lib": "lib"

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 };
+