fscss 1.1.11 → 1.1.12

package/README.md

@@ -5,59 +5,104 @@ 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`
+
+**CDN**
+```html
+<script src="https://cdn.jsdelivr.net/npm/fscss@1.1.12/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/
+### https://opencollective.com/fscss
 
+---
 
 📜 License
 
-MIT © 2025 Figsh—FSCSS
+MIT © Figsh—FSCSS

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;
@@ -917,6 +917,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 +1111,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,33 +1,37 @@
 {
   "name": "fscss",
+  "version": "1.1.12",
   "description": "Figured Shorthand Cascading Style Sheet",
-  "version": "1.1.11",
-  "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",
     "fs-css",
     "fscss",
-    "xfscss"
+    "xfscss",
+    "preprocessor"
   ],
-  "author": "Figsh",
-  "license": "MIT",
+  "homepage": "https://github.com/Figsh/xfscss#readme",
   "bugs": {
     "url": "https://github.com/Figsh/xfscss/issues"
   },
-  "homepage": "https://github.com/Figsh/xfscss#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Figsh/xfscss.git"
+  },
+  "license": "MIT",
+  "author": "Figsh",
+  "type": "module",
+  "main": "lib/index.js",
+  "bin": {
+    "fscss": "bin/fscss.js"
+  },
+  "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"
@@ -35,8 +39,5 @@
   "devDependencies": {
     "mocha": "^10.0.0",
     "chai": "^4.3.4"
-  },
-  "directories": {
-    "lib": "lib"
   }
 }

package/style.css

@@ -0,0 +1,9 @@
+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%);
+}