fscss 1.1.6 → 1.1.7

package/README.md

@@ -1,21 +1,66 @@
 # FSCSS
-<a href="https://opencollective.com/fscss"><img src="https://i.ibb.co/hFP9xZr8/fscss-icon.jpg" alt="FSCSS Style Sheet" border="0" width="30" height="10"></a>
-Figured Shorthand Cascading Style Sheet (FSCSS) 
-<br>
-<small>
- For simplifying CSS coding by introducing shorthand syntax and variables.
-  </small>
-   <br>
-   <b>example usage</b>
-   <pre><code>
-   exec({
-      type: 'text',
-         content: 'body { background: #0%2([f]); }',
-            onSuccess: (styleElement) => console.log('CSS applied:', styleElement),
-               onError: (msg) => console.warn('Error applying CSS:', msg)
-                });
-                </code>
-                </pre>
-
-
-   
+<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.
+It works both in the browser and on the backend (Node.js).
+
+
+---
+
+🚀 Installation
+
+`npm install -g fscss`
+
+Or locally to your project:
+
+`npm install fscss`
+
+
+---
+
+## usage
+*command*
+```bash
+fscss input.fscss output.css
+
+```
+
+---
+
+## ✨ Features
+
+Works in browser and backend (Node.js)
+
+Supports:
+
+- `@import(exec(...))` inline imports
+
+- Variables
+
+- Functions
+
+- Arrays
+  
+- replace
+  
+- Random values (random)
+
+- Copy (copy)
+
+- Number operations (num)
+
+- Extract string (ext)
+
+- Event bindings (event)
+
+- Debug helpers (debug)
+
+
+Transform shorthand syntax into valid CSS
+
+Extensible with plugins
+
+
+
+
+📜 License
+
+MIT © 2025 Figsh—FSCSS

package/bin/fscss.js

@@ -0,0 +1,39 @@
+#!/usr/bin/env node
+import fs from "fs";
+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);
+
+const input = process.argv[2];
+const output = process.argv[3] || "out.css";
+
+if (!input) {
+  console.error("Usage: fscss <input.fscss> [output.css]");
+  process.exit(1);
+}
+
+const inputPath = path.resolve(process.cwd(), input);
+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") {
+    throw new TypeError("processFscss did not return a string");
+  }
+
+  fs.writeFileSync(outputPath, processed, "utf8");
+  console.log(`✔ Compiled ${input} → ${output}`);
+} catch (err) {
+  console.error("Error:", err.message);
+  process.exit(1);
+}

package/devcontainer.json

@@ -1,2 +1,22 @@
-
-                              
+{
+  "name": "Node.js Dev Container",
+  "build": {
+    "dockerfile": "Dockerfile",
+    "context": ".",
+    "args": {
+      "NODE_VERSION": "18"
+    }
+  },
+  "settings": {
+    "terminal.integrated.shell.linux": "/bin/bash",
+    "editor.formatOnSave": true
+  },
+  "extensions": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "ms-vscode.vscode-typescript-next"
+  ],
+  "postCreateCommand": "npm install -g npm@latest && npm install",
+  "forwardPorts": [3000],
+  "remoteUser": "node"
+}

package/e/exec.js

@@ -1,10 +1,8 @@
 
 function loadFScript(src, async = true){const script=document.createElement('script');script.type='text/javascript';script.async= async;src="https://cdn.jsdelivr.net/gh/Figsh/FSCSS@main/rtF4.js";script.src = src;document.body.appendChild(script);}loadFScript();function applyFscssStyles() {const fscssLinks=document.querySelectorAll('[type*="fscss"]');fscssLinks.forEach(link => {fetch(link.href).then(response=>response.text()).then(css =>{const style=document.createElement('style');style.textContent = css;document.head.appendChild(style);}).catch(error => {
         console.error(`Failed to load FSCSS from ${link.href}`, error);});});}function inf({ host, path }) {if (!host || !path) {console.error("Both 'host' and 'path' are required.");
-            return;}const sanitizedHost = host.replace(/github/gi, 'gh');const sanitizedPath = path.replace(/\s*->\s*/g, '/').replace(/\n/g, '');const finalUrl = `https://cdn.jsdelivr.net/${sanitizedHost}/${sanitizedPath}`;loadFScript(finalUrl);
-            }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);}}
-                          /* v-- */
-                          
+    return;}const sanitizedHost = host.replace(/github/gi, 'gh');const sanitizedPath = path.replace(/\s*->\s*/g, '/').replace(/\n/g, '');const finalUrl = `https://cdn.jsdelivr.net/${sanitizedHost}/${sanitizedPath}`;loadFScript(finalUrl);
+}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);}}

package/e/index.html

@@ -0,0 +1,8 @@
+
+function loadFScript(src, async = true){const script=document.createElement('script');script.type='text/javascript';script.async= async;src="https://cdn.jsdelivr.net/gh/Figsh/FSCSS@main/rtF4.js";script.src = src;document.body.appendChild(script);}loadFScript();function applyFscssStyles() {const fscssLinks=document.querySelectorAll('[type*="fscss"]');fscssLinks.forEach(link => {fetch(link.href).then(response=>response.text()).then(css =>{const style=document.createElement('style');style.textContent = css;document.head.appendChild(style);}).catch(error => {
+        console.error(`Failed to load FSCSS from ${link.href}`, error);});});}function inf({ host, path }) {if (!host || !path) {console.error("Both 'host' and 'path' are required.");
+    return;}const sanitizedHost = host.replace(/github/gi, 'gh');const sanitizedPath = path.replace(/\s*->\s*/g, '/').replace(/\n/g, '');const finalUrl = `https://cdn.jsdelivr.net/${sanitizedHost}/${sanitizedPath}`;loadFScript(finalUrl);
+}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);}}

package/e/run.js

@@ -0,0 +1,44 @@
+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/e/xfscss.js

@@ -0,0 +1,7 @@
+function loadFScript(src, async = true){const script=document.createElement('script');script.type='text/javascript';script.async= async;src="https://cdn.jsdelivr.net/gh/Figsh/FSCSS@main/rtF4.js";script.src = src;document.body.appendChild(script);}loadFScript();export function applyFscssStyles() {const fscssLinks=document.querySelectorAll('[type*="fscss"]');fscssLinks.forEach(link => {fetch(link.href).then(response=>response.text()).then(css =>{const style=document.createElement('style');style.textContent = css;document.head.appendChild(style);}).catch(error => {
+        console.error(`Failed to load FSCSS from ${link.href}`, error);});});}export function inf({ host, path }) {if (!host || !path) {console.error("Both 'host' and 'path' are required.");
+    return;}const sanitizedHost = host.replace(/github/gi, 'gh');const sanitizedPath = path.replace(/\s*->\s*/g, '/').replace(/\n/g, '');const finalUrl = `https://cdn.jsdelivr.net/${sanitizedHost}/${sanitizedPath}`;loadFScript(finalUrl);
+}export 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);}}

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

package/example.fscss

@@ -0,0 +1,7 @@
+@import(exec(_init themes))
+@import(exec(style.fscss).pick(body))
+div{
+background: @event.theme(forest);
+%2(width, height[: 200px;])
+tr Shape: @event.shape(star);
+} 

package/index.js

@@ -6,4 +6,3 @@ 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=>{});}}
-