@import

The @import directive imports declarations from another .ecss file. It is declared at the top level of a file.

Syntax

@import { Name1, Name2 } from "./path/to/file.ecss";

From a single file — one @import, with multiple names separated by commas. For different files — separate lines:

@import { Variant, Size } from "./tokens.ecss";
@import { Shadow } from "./Shadow.ecss";

What can be imported

• @enum — used as a type in @param
• @block — inherited via extends (or augmented via @external)
• @const — used in CSS values and @if conditions

Renaming (as)

An imported name can be renamed with as — handy when there is a name conflict in the current file:

@import { Variant as ButtonVariant } from "./tokens.ecss";
@import { --primary as --brand } from "./theme.ecss";

Further in the file, the declaration is available under the new name (ButtonVariant, --brand).

Importing the whole file (*)

@import * from brings in all the file's exported declarations without listing names:

@import * from "./tokens.ecss";

Convenient for shared files with tokens and enums that are needed in full.

Importing @enum

// tokens.ecss
@enum Variant {
  values: "primary", "danger", "ghost";
}

@enum Size {
  values: "sm", "md", "lg";
}

// Button.ecss
@import { Variant, Size } from "./tokens.ecss";

@block Button {
  @param --variant Variant;
  @param --size Size;

  @if (--variant == "primary") {
    background: #646cff;
  }

  @if (--size == "sm") {
    padding: 4px 8px;
  }

  @if (--size == "md") {
    padding: 8px 16px;
  }

  @if (--size == "lg") {
    padding: 14px 28px;
  }
}

Importing @block

An imported @block can be used as a parent via extends. It cannot be called directly — only inherited:

// Shadow.ecss
@enum ShadowLevel {
  values: "sm", "md", "lg";
}

@block Shadow {
  @param --shadow ShadowLevel;

  @if (--shadow == "sm") {
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
  }

  @if (--shadow == "md") {
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
  }

  @if (--shadow == "lg") {
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.2);
  }
}

// Button.ecss
@import { Shadow, ShadowLevel } from "./Shadow.ecss";

@block Button extends Shadow {
  @param --variant string;

  display: inline-flex;
  padding: 8px 16px;
  border-radius: 6px;
}

Importing @const

// tokens.ecss
@const --primary color: #646cff;
@const --danger color: #e53e3e;

// Button.ecss
@import { --primary, --danger } from "./tokens.ecss";

@block Button {
  @param --variant Variant;

  @if (--variant == "primary") {
    background: --primary;
  }

  @if (--variant == "danger") {
    background: --danger;
  }
}

Example

// design-tokens.ecss
@enum Variant {
  values: "primary", "danger", "ghost";
}

@enum Size {
  values: "sm", "md", "lg";
}

@const --primary color: #646cff;
@const --danger color: #e53e3e;

// Button.ecss
@import { Variant, Size, --primary, --danger } from "./design-tokens.ecss";

@block Button {
  @param --variant Variant;
  @param --size? Size: "md";
  @param --disabled boolean;

  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;

  @if (--disabled) {
    opacity: 0.4;
    cursor: not-allowed;
  }

  @if (--variant == "primary") {
    background: --primary;
    color: #fff;
  }

  @if (--variant == "danger") {
    background: --danger;
    color: #fff;
  }

  @if (--variant == "ghost") {
    background: transparent;
    border: 1px solid currentColor;
  }

  @if (--size == "sm") {
    padding: 4px 8px;
    font-size: 12px;
  }

  @if (--size == "md") {
    padding: 8px 16px;
    font-size: 14px;
  }

  @if (--size == "lg") {
    padding: 14px 28px;
    font-size: 16px;
  }
}

See also

• @external — augment a block's styles without inheritance
• @block — inheritance via extends
• @enum — parameter types
• @const — constants
• Module system — the concept of splitting into files