JS-in-CSS

Script runtime

JSON imports work without a script runtime. JavaScript and TypeScript imports require the optional @jesscss/plugin-js package and run in its Deno sandbox. Set disableScriptModules to reject executable script imports.

Jess evaluates JS/TS at compile time using @-use for Sass-module-style namespace imports or @-from for ESM-style imports, so token data and feature flags can stay in one place while CSS output stays deterministic.

For example:

@-use './tokens.ts';

.box {
  width: $tokens.boxWidth;
}

This produces:

.box {
  width: 2px;
}

A namespace can be renamed with as:

@-use './tokens.ts' as t;

.box {
  width: $t.boxWidth;
}

@-from is the ESM-style spelling, including named imports and a namespace import:

@-from './tokens.ts' import (boxWidth);

.box {
  width: $boxWidth;
}

@-from './tokens.ts' import * as t;

.box {
  width: $t.boxWidth;
}

The intent is to keep runtime metadata in JS while still compiling deterministic CSS output.

Current boundaries

Module loading and value/function binding are available. One shape remains outside the current surface:

A JS function returning a style object (for example { display: 'flex' }) used as a mixin. There is no 2.x splat form for applying a JS object as a rule body.

See Modules & imports for the canonical module status and at-rule reference.

Current boundaries​

Current boundaries