Skip to main content

Import

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.

Syntax​

@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:

origin.st.css
/* define symbols */
.part {
  --customProp: yellow;
  container-name: part;
}
@keyframes anim {}
@layer comps, theme;
:vars {
  stVar: green;
}
entry.st.css
@st-import OriginRoot, [
  part,         /* part class name */
  --customProp, /* custom property */
  stVar         /* build var */
] from './origin.st.css';
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.

entry.st.css
/* import keyframe and layer */
@st-import [
  keyframes(anim),
  layer(theme),
  container(panel)
] from './origin.st.css';

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

Javascript​

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)