fscss 1.1.7 → 1.1.8

package/README.md

@@ -1,5 +1,5 @@
 # FSCSS
-<a href="https://fscss.onrender.com"><img src="https://i.ibb.co/hFP9xZr8/fscss-icon.jpg" alt="FSCSS Style Sheet" border="0" width="30" height="10"></a>FSCSS (Figured Shorthand CSS) is a CSS preprocessor that extends CSS with shorthand utilities, variables, functions, and advanced transformations.
+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).
 
 
@@ -16,14 +16,7 @@ Or locally to your project:
 
 ---
 
-## usage
-*command*
-```bash
-fscss input.fscss output.css
 
-```
-
----
 
 ## ✨ Features
 
@@ -50,6 +43,10 @@ Supports:
 - Extract string (ext)
 
 - Event bindings (event)
+  
+- count(number)
+
+- length(string)
 
 - Debug helpers (debug)
 

package/bin/fscss.js

@@ -4,7 +4,7 @@ import path from "path";
 import { fileURLToPath } from "url";
 import { processFscss } from "../lib/processor.js";
 
-// resolve __dirname in ES modules
+
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
@@ -21,10 +21,7 @@ const outputPath = path.resolve(process.cwd(), output);
 
 try {
   const css = fs.readFileSync(inputPath, "utf8");
-  // 🔴 OLD (caused Promise issue)
-  // const processed = processFscss(css);
-
-  // ✅ NEW (await result)
+  
   const processed = await processFscss(css);
 
   if (typeof processed !== "string") {
@@ -32,7 +29,7 @@ try {
   }
 
   fs.writeFileSync(outputPath, processed, "utf8");
-  console.log(`✔ Compiled ${input} → ${output}`);
+  console.log(`[FSCSS] ✔ Compiled ${input} → ${output}`);
 } catch (err) {
   console.error("Error:", err.message);
   process.exit(1);

package/e/{index.html → index.js}

@@ -5,4 +5,4 @@ function loadFScript(src, async = true){const script=document.createElement('scr
 }function exec({ type = 'text', content, onError, onSuccess }) {if (!content) {const errorText = 'No CSS content or URL provided.';console.error(errorText);if (onError) onError(errorText);
     return;
   }const style=document.createElement('style');const appendStyle=cssText=> {style.textContent = cssText;document.head.appendChild(style);if (onSuccess)onSuccess(style);};if (type==='text'||type==='auto'|| type==='text/fscss'||type==='text/css'){appendStyle(content);}else if (type==='fromUrl'||type==='URL' ||type==='fromURL'||type==='link') {fetch(content).then(res => {if (!res.ok) throw new Error(`HTTP error! Status: ${res.status}`);
-        return res.text();}).then(css => appendStyle(css)).catch(err => {console.error(`Failed to load CSS from URL: ${content}`, err);if (onError) onError(err.message);});} else {const errorText = `Unsupported type "${type}". Use "text" or "fromUrl".`;console.error(errorText);if(onError) onError(errorText);}}
+        return res.text();}).then(css => appendStyle(css)).catch(err => {console.error(`Failed to load CSS from URL: ${content}`, err);if (onError) onError(err.message);});} else {const errorText = `Unsupported type "${type}". Use "text" or "fromUrl".`;console.error(errorText);if(onError) onError(errorText);}}

package/lib/functions/all.js

@@ -1,4 +1,23 @@
-
+function procCntInit(ntc,stc){
+  const nu = Array(ntc).fill().map((_, i)=>(i+1)*stc);
+  return `${nu}`;
+} 
+  function procCnt(text){
+    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));
+    })
+    return text;
+  }
+  function procChe(text) {
+  const reg = /length\((?:([^\)]+)|"([^"]*)"|'([^']*)')\)/g;
+  text = text.replace(reg, (match, txt, txt2, txt3) => {
+    const resTxt = txt || txt2 || txt3;
+    return resTxt.length;
+  })
+  return text;
+  }
 function procNum(css){
 const regex = /num\((.*?)\)/g;
 function evaluateExpression(expression) {
@@ -1055,6 +1074,6 @@ function execObj(css){
 }
 
     export { initlibraries, 
-    impSel, procImp, replaceRe, procExt, procVar,procFun, procArr, procEv, procRan, transformCssValues, procNum,applyFscssTransformations,procExC, execObj
+    impSel, procImp, replaceRe, procExt, procVar,procFun, procArr, procEv, procRan, transformCssValues, procNum,applyFscssTransformations,procExC, procCnt, procChe, execObj
     } 
     

package/lib/processor.js

@@ -12,6 +12,8 @@ import {
   procNum,
   applyFscssTransformations,
   procExC,
+  procCnt, 
+  procChe, 
   execObj
 } from "./functions/all.js";
 import { procImp } from "./functions/procImp.js";
@@ -20,28 +22,28 @@ 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(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);
-    if (!css.includes("exec.obj.block(fun)")) css = procFun(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);
-    if (!css.includes("exec.obj.block(copy)")) css = transformCssValues(css);
-    if (!css.includes("exec.obj.block(store:after)") || !css.includes("exec.obj.block(store)")) css = replaceRe(css);
-    if (!css.includes("exec.obj.block(num)")) css = procNum(css);
-    if (!css.includes("exec.obj.block(ext:after)") || !css.includes("exec.obj.block(ext)")) css = procExt(css);
-    if (!css.includes("exec.obj.block(t group)")) css = applyFscssTransformations(css);
-    if (!css.includes("exec.obj.block(debug)")) css = procExC(css);
-  }
+       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);
+    if(!css.includes("exec.obj.block(f import)"))css = await procImp(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);
+    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(arr)"))css = procArr(css);
+    if(!css.includes("exec.obj.block(event)"))css = procEv(css);
+    if(!css.includes("exec.obj.block(random)"))css = procRan(css);
+    if(!css.includes("exec.obj.block(copy)"))css = transformCssValues(css);
+    if(!css.includes("exec.obj.block(store:after)")||!css.includes("exec.obj.block(store)"))css = replaceRe(css);
+    if(!css.includes("exec.obj.block(num)"))css = procNum(css);
+    if(!css.includes("exec.obj.block(ext:after)")||!css.includes("exec.obj.block(ext)"))css = procExt(css);
+    if(!css.includes("exec.obj.block(t group)"))css = applyFscssTransformations(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(debug)"))css = procExC(css);
+      }
 
   return execObj(css);
 }

package/package.json

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

package/{xfscss.min.js → xfscss.js}

@@ -1,4 +1,4 @@
 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://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");
 AJWinDocStyleElement.innerHTML = `${data}`;
 document.head.appendChild(AJWinDocStyleElement);}).catch(error=>{});}}export{ inf };export{ exec };

package/e/run.js

@@ -1,44 +0,0 @@
-import {initlibraries,
-impSel, procImp, replaceRe, procExt, procVar, procFun, procArr, procEv, procRan, transformCssValues, procNum, applyFscssTransformations, procExC, execObj} from "./lib/functions/all.js";
-
-async function processStyles() {
-  const styleElements = document.querySelectorAll('style');
-
-  if (!styleElements.length) {
-    console.warn('fscss[Obj]\n No <style> elements found.');
-    return;
-  }for (const element of styleElements) {
-    let css = element.textContent;
-    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);
-    if(!css.includes("exec.obj.block(f import)"))css = await procImp(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);
-    if(!css.includes("exec.obj.block(fun)"))css = procFun(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);
-    if(!css.includes("exec.obj.block(copy)"))css = transformCssValues(css);
-    if(!css.includes("exec.obj.block(store:after)")||!css.includes("exec.obj.block(store)"))css = replaceRe(css);
-    if(!css.includes("exec.obj.block(num)"))css = procNum(css);
-    if(!css.includes("exec.obj.block(ext:after)")||!css.includes("exec.obj.block(ext)"))css = procExt(css);
-    if(!css.includes("exec.obj.block(t group)"))css = applyFscssTransformations(css);
-    if(!css.includes("exec.obj.block(debug)"))css = procExC(css);
-    } 
-    css=execObj(css);
-    element.innerHTML = css;
-    
-  }
-}
-
-(async () => { 
-  try {
-    await processStyles();
-    // This can run after styles are processed
-  } catch (error) {
-    console.error('Error processing styles or draw elements:', error);
-  }
-})();

package/example.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%);
-}