JavaScript API Reference

runtime.js is for plain HTML pages. It auto-scans the document for [type*="fscss"] links and <style>/[style] content, processes them, and reveals the page once done — no setup required. xfscss.reboot() is still available on it for re-running after you inject markup dynamically.

esm.js is for module-based use: an FSCSS-to-CSS conversion tool, build-time processing, or any manipulation that shouldn't automatically run against the live page. It never auto-boots and never touches page loading — you call xfscss.reboot() (or the individual methods) yourself, optionally from DOMContentLoaded if you do want page-code behavior.

Pin whichever release you're on in the URL — the paths below (runtime.js / runtime.min.js / esm.js) stay the same from v1.2.0 onward, only the version number changes.

Browser, auto-run:

<link type="fscss" href="/style.fscss">
<script src="https://cdn.jsdelivr.net/npm/fscss@1.2.0/runtime.min.js" async></script>

Module, manual control:

import xfscss from "https://cdn.jsdelivr.net/npm/fscss@1.2.0/esm.js";

// call whichever method you need
xfscss.reboot();

Async. Finds every <style> element on the page and processes its FSCSS content in place, replacing each element's contents with compiled CSS. Logs a warning and exits early if no <style> elements are found. Errors during processing are caught and logged rather than thrown.

await xfscss.run();

Strips selectors and braces from a block of CSS, returning just the declarations inside. Used internally to turn a processed rule block into a flat string suitable for a style attribute.

const flat = xfscss.inline(".btn{ color: red; }");
// " color: red; "

Async. The core FSCSS compiler. Takes a raw FSCSS string and runs it through the full pipeline — imports, variables, functions, @define blocks, arrays, events, random values, patterns, extensions, and transformations — then returns the compiled CSS string. This is the method to reach for when you want FSCSS-to-CSS conversion without touching the DOM (e.g. inside esm.js tooling).

Individual pipeline stages can be skipped per input by including a matching exec.obj.block(...) marker in the source (for example exec.obj.block(all) skips the entire pipeline). See the full marker list below. All markers are stripped from the output regardless.

const compiled = await xfscss.process(rawFscssString);

Async. Bootstraps FSCSS on the current page: fetches and injects any [type*="fscss"] linked stylesheets, runs process()/run() across all <style> elements once, then processes any inline style attributes found in the document. This is what runtime.js calls automatically on load.

await xfscss.assign();

Alias for assign(). Use this name when you want to explicitly re-run FSCSS processing — for example after injecting new markup into the DOM, or as the manual entry point on esm.js, which never calls it for you.

document.addEventListener("DOMContentLoaded", () => {
  xfscss.reboot();
});

Injects a new <style> element from either an FSCSS/CSS text string or an external URL, then re-runs the bootstrap so it gets processed immediately.

xfscss.exec({
  type: "text",
  content: ".btn { background: $primary-color; }",
  onSuccess: (el) => console.log("injected", el),
  onError: (msg) => console.error(msg)
});

Inside any FSCSS source, a matching exec.obj.block(...) marker tells process() to skip that stage of the pipeline — useful for debugging or when only a subset of features is needed. All markers are stripped from the compiled output regardless of whether they matched anything.

/* Skip the entire pipeline */
exec.obj.block(all);

/* Or skip individual stages */
exec.obj.block(f import);
exec.obj.block(f import pick);
exec.obj.block(f import from);
exec.obj.block(vfc);
exec.obj.block(pattern);
exec.obj.block(store);
exec.obj.block(store:before);
exec.obj.block(store:after);
exec.obj.block(ext);
exec.obj.block(ext:before);
exec.obj.block(ext:after);
exec.obj.block(f var);
exec.obj.block(fun);
exec.obj.block(obj);
exec.obj.block(length);
exec.obj.block(count);
exec.obj.block(define);
exec.obj.block(arr);
exec.obj.block(event);
exec.obj.block(random);
exec.obj.block(copy);
exec.obj.block(num);
exec.obj.block(t group);
exec.obj.block(debug);