Skip to main content

This page is the source of truth for stylesheet and script modules in Jess and Less 5. The two module families have different jobs and different support status:

Module familyJessLess 5Current status
Stylesheets@-compose@compose or @-composeAvailable
Scripts and data@-use / @-from@use or @-useAvailable

Jess always writes its compiler at-rules with a leading dash. Less 5 accepts every Less-specific at-rule with or without the dash.

The compose family loads stylesheet code, exposes that stylesheet's own public members, and may emit CSS. @use and @from are reserved for JavaScript, TypeScript, JSON, and built-in function modules. They do not replace one another.

Stylesheet modules in Jess

Jess spells compiler directives with a dash. Use @-compose for a stylesheet dependency with isolated scope:

theme.jess
$primary?: #3366ff;
$spacing: {
compact: 4px;
normal: 8px;
}

.theme-base {
color: $primary;
}
app.jess
@-compose "./theme.jess";

.button {
color: $theme.primary;
padding: $theme.spacing.normal;
}

The default namespace comes from the file name. as name selects another namespace, and as * exposes the module's own members without a namespace.

@-compose "./theme.jess" as brand;
.button { color: $brand.primary; }

@-compose "./layout.jess" as *;
.card { gap: $card-gap; }

Composed scope is isolated and non-transitive. A module cannot read the importer's variables, and its dependencies do not become members of the importer's namespace.

Configuration with with and set​

Jess uses the same two configuration lifetimes as Less 5:

@-compose "./theme.jess" with {
$primary: rebeccapurple;
}
  • with configures one compose edge; each configured edge emits its own CSS.
  • set establishes one shared configuration for the resolved module. Later plain composes reuse it, and a conflicting second set is an error.
  • Plain and shared set modules emit once per compilation.

Only optional declarations are configuration knobs in Jess. Declare a default with ?::

theme.jess
$primary?: blue;
.theme { color: $primary; }

Trying to configure a hard $primary: declaration is an error.

Forwarding and legacy imports​

@-export "./theme.jess" forwards a stylesheet module's API to downstream consumers. @-import is the legacy source-fold bridge; it warns because it uses shared scope. A bare @import in a .jess file is always native CSS and passes through to the output.

@-export "./theme.jess";
@-import "./legacy.jess";
@import "./browser.css";

Script and data modules​

Script and data imports are compile-time dependencies. The directive itself is removed from the emitted CSS. Write these directives at the stylesheet top level, before the rules that consume their bindings.

Jess supports namespace, flat, and selected imports:

@-use "./tokens.json" as tokens;
@-use "./functions.js" as fn;
@-use "./functions.js" as *;

@-from "./functions.js" import (double);
@-from "./functions.js" import (double as twice);
@-from "./functions.js" import * as fn;

Read data members through the namespace and call imported functions through an explicit $ reference:

@-use "./tokens.json" as tokens;
@-from "./functions.js" import (double as twice);

.card {
color: $tokens.color;
width: $twice(10px);
}

Namespace and flat callable imports follow the same rule: $fn.double(10px) and $double(10px). A bare double(10px) remains a CSS-shaped call; importing double never changes its meaning.

When @-use has no as clause, the namespace comes from the file name. as * exposes every export without a namespace. Prefer a namespace when several modules can export the same name.

JSON modules are data-only and need no script runtime. Strings, numbers, booleans, arrays, nested objects, and null become stylesheet values. Cyclic objects and unsupported export values are errors.

Local and package JavaScript or TypeScript modules require the optional @jesscss/plugin-js package. It runs scripts in its Deno sandbox; use jsReadRoot and the other plugin policy options to grant only the access a module needs. Set disableScriptModules to reject executable script imports entirely. Built-in compiler modules such as SCSS sass:math are trusted package modules and do not require @jesscss/plugin-js.

A module is loaded once per compilation and its bindings are lexical to that stylesheet. Missing exports, unsupported values, and unavailable script runtimes are compile errors.

Native CSS imports​

A native CSS @import targets a URL or CSS file and stays in the emitted CSS so the browser can fetch it:

@import url("https://fonts.example/css?family=Inter");
@import "reset.css";

In Jess, every bare @import is native CSS. In Less, the existing extension and option rules still decide whether a bare import is native CSS or a legacy source fold.