JS-in-CSS

Jess can evaluate 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 would produce:

.box {
  width: 2px;
}

Using JS values in conditional styles

@-use './feature-flags.ts' as flags;

.card {
  $if (flags.enableShadow) {
    box-shadow: 0 12px 30px rgb(15 23 42 / 0.22);
  }
}

This keeps runtime feature metadata in JS while still compiling deterministic CSS output.

Use @-from when you want ESM-style imports, including named exports:

@-from './feature-flags.ts' import (enableShadow);

.card {
  $if (enableShadow) {
    box-shadow: 0 12px 30px rgb(15 23 42 / 0.22);
  }
}

Or a namespace import:

@-from './feature-flags.ts' import * as flags;

.card {
  $if (flags.enableShadow) {
    box-shadow: 0 12px 30px rgb(15 23 42 / 0.22);
  }
}