Skip to main content


The Stylable @st-import at-rule is used to reference definitions from other .st.css or .js modules in a similar way to JavaScript Imports.


@st-import Default, [namedA, namedB as localB] from 'request';
re-declare symbol
  • import local names must be unique.
  • Imports are hoisted above local definitions.

Default import

In order to reference the the default export of a module, provide a local name after the @st-import.

@st-import DefaultLocalName from 'request';

Named import

To reference named exports of a module, in square brackets (after the optional default import), provide a comma separated list of requested names.

/* named imports */
@st-import [partA, partB] from 'request';

/* default + named imports */
@st-import Default, [partA, partB] from 'request';

Local alias

Use the as keyword to map an export name to a local name.

@st-import [part as localPartName] from 'request';

Stylable stylesheet

When importing from a stylesheet, the root class is mapped to the default export, and several named symbols can be referenced by name:
/* define symbols */
.part {
--customProp: yellow;
container-name: part;
@keyframes anim {}
@layer comps, theme;
:vars {
stVar: green;
@st-import OriginRoot, [
part, /* part class name */
--customProp, /* custom property */
stVar /* build var */
] from './';
Stylesheet default capitalization

When importing a default value from a stylable stylesheet, you should use a capital letter to signify that the value represents a component root.

Named type assertion

To import keyframes, layers or containers from another stylesheet, a special keyframes(), layer(), or container() assertion is required.
/* import keyframe and layer */
@st-import [
] from './';

/* multiple */
@st-import [
keyframes(anim1, anim2),
layer(comps, theme),
container(panel, header)
] from './';


To import Javascript definitions for values, mixins, and formatters, use the @st-import statement in the same way as you would for a stylesheet.

@st-import DefaultExport, [namedA, namedB as localB] from './code.js';

Legacy syntax

An older variation for @st-import is the :import (pseudo-import). While it still works, it is highly discouraged for usage, verbose and will be deprecated in the future.

:import {
-st-from: 'request';
-st-default: DefaultLocalName;
-st-named: namedA, namedB as localB;

A code-mod to migrate to the new syntax is available (see doc)