Understanding exec() in FSCSS — Two Completely Different Jobs

Question

Understanding exec() in FSCSS

In FSCSS, exec() serves two completely different purposes depending on where you write it:

1. Inside your stylesheet: as a utility / debugging function
2. In JavaScript / HTML: to load and compile the styles

Let’s break both down clearly.

---

1. Inside Stylesheets: Debugging & Logging

When used inside an @event block or after processing an array, exec() lets you run small JavaScript helpers directly from your CSS.
Its main job here is printing debug information to the browser console so you can check if your logic is working.

Console Logging

You can pass flags like _log, _warn, _info, or _error:

@event scaleSize(e) {
  if e >= 8 {
    return| num(8*2)em exec(_log, "Scaling to 16em for optimal readability")
  }
}

Checking Array Data

You can also inspect the current values inside an FSCSS array:

@arr fruits[ apple, orange, banana ]

/* Prints: apple orange banana straight to your browser console */
exec(_log, "@arr.fruits")

This is extremely useful while building complex logic with @event, @arr, or calculated values.

---

2. In JavaScript & Imports: Compilation Engine

Outside the stylesheet, exec is the core engine that compiles and runs FSCSS source code.

CDN Initialization (HTML)

The compiler file loaded via CDN is named exec.min.js:

<script src="https://cdn.jsdelivr.net/npm/fscss@1.1.25/exec.min.js" defer></script>

<style>
  /* Tells the engine to execute the initialization for a module */
  @import(exec(_init circle-progress))
</style>

Programmatic JavaScript Usage

You can also import and control the compiler directly from JavaScript:

import { exec } from "https://cdn.jsdelivr.net/npm/fscss@1.1.25/e/xfscss.min.js";

new exec({
  type: "URL",
  content: "styles.fscss",
  onSuccess: "Styles loaded successfully!",
  onError: "Oops, style compilation failed!"
});

This gives you full control over loading, success messages, and error handling.

---

Quick Summary

Location	Purpose	Common Use Case
Inside .fscss	Debugging & console logging	Check @event logic or array values
In HTML / JavaScript	Compile and run FSCSS	Load styles or initialize modules

Two different jobs. Same name.
Once you know the context, exec() becomes much clearer.

---

Useful links

• Docs → fscss.devtem.org
• vscode extention FSCSS Support
• npm → npmjs.com/package/fscss