Jess's at-rules

Jess compiler at-rules use a dash prefix so bare CSS at-rules remain available to the platform.

At-rule	Purpose	Status
@-compose	Load an isolated stylesheet module	Available
@-export	Forward a stylesheet module API	Available
@-import	Fold a stylesheet into shared scope	Available, discouraged
@-use	Load a script or data module namespace	Available
@-from	Import selected script or data exports	Available

The complete module contract and current support status live on Modules & imports. That shared page is the source of truth for both Jess and Less 5.

@-compose

@-compose loads a stylesheet in isolated scope, emits its CSS, and exposes the module's own top-level members through a namespace.

@-compose "./theme.jess";

.box {
  color: $theme.primary-color;
}

The default namespace comes from the file name. Select one with as name, or use as * to expose the module's own members without a namespace:

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

@-compose "./mixins.jess" as *;
.card { $ > card(); }

A module cannot read bindings from its importer. Its own dependencies remain private, so the caller cannot reach through the namespace into a grandchild module.

with and set

Both clauses pass values into optional module declarations:

theme.jess

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

@-compose "./theme.jess" with {
  $primary-color: rebeccapurple;
}

• with applies to one compose edge. Each separately configured edge emits its own result.
• set establishes 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 declarations written with ?: are configurable. A hard $name: declaration rejects configuration.

@-export

@-export forwards a stylesheet module API to downstream consumers:

@-export "./theme.jess";

@-use and @-from

These directives load JavaScript, TypeScript, JSON, and built-in function modules at compile time:

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

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

The directives emit no CSS. JSON needs no script runtime; local and package JavaScript or TypeScript require @jesscss/plugin-js. See Modules & imports for namespace, flat, default, and selected import forms.

@-import

@-import is the legacy source-fold form. It evaluates the imported file in shared scope and warns because names can leak in both directions. Use @-compose for new stylesheet modules.

@-import "./legacy.jess";

A bare @import in a Jess file is always native CSS and passes through to the output:

@import "./browser.css";