Skip to main content

Imports

Jess imports are intentionally practical: bring in stylesheet APIs, pull values from JS/TS, and keep source boundaries explicit.

// JavaScript example
@-from './constants.js' import (WIDTH);

.box {
  width: $(WIDTH)px;
}
// Jess example
@-from './mixins.jess' import (myMixin);

.box {
  @include myMixin();
}

Ignoring imports​

Imports that do not use the ESM-style pattern are treated as passthrough and emitted as-is. So this stays exactly what you wrote:

@import url("fonts.css");

Importing stylesheets​

You can import / mixin entire stylesheets using the default export.

@import nav from './nav.jess';
@include nav();

Importing into JS Components​

caution

Historically this section described an older runtime/module shape. The current rollup-plugin-jess behavior is intentionally minimal.

Using with React​

Given the following Jess stylesheet component.jess...

// component.jess
@mixin myMixin(something) {
  width: $something;
  color: white;
}
.box {
  display: flex;
  align-items: center;
}

...rollup-plugin-jess compiles it, emits a CSS asset, and returns the compiled CSS as the default JS export:

import cssText from './component.jess';

console.log(cssText);

Today this is not a CSS Modules-style named export API. If you need that shape, layer it in at the bundler/runtime boundary.