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 family | Jess | Less 5 | Current status |
|---|---|---|---|
| Stylesheets | @-compose | @compose or @-compose | Available |
| Scripts and data | @-use / @-from | @use or @-use | Available |
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:
$primary?: #3366ff;
$spacing: {
compact: 4px;
normal: 8px;
}
.theme-base {
color: $primary;
}
@-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;
}
withconfigures one compose edge; each configured edge emits its own CSS.setestablishes one shared configuration for the resolved module. Later plain composes reuse it, and a conflicting secondsetis an error.- Plain and shared
setmodules emit once per compilation.
Only optional declarations are configuration knobs in Jess. Declare a default
with ?::
$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.