@enum

The @enum directive declares a named set of allowed values. It is used as a parameter type in @param.

Syntax

@enum Name {
  values: "value1", "value2", "value3";
}

With inheritance:

@enum Child extends Parent {
  values: "extra1", "extra2";
}

Name

The name must start with a capital letter (PascalCase): Variant, Size, Status. All @enum names within a single file must be unique.

Values

Values are quoted strings or identifiers, separated by commas. A trailing comma is allowed:

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

Quoted strings are preferred: they allow hyphens, spaces, and any characters.

Usage in @param

@enum sets the type of a parameter in a @block. Passing a value outside the declared set is a TypeScript error:

@enum Variant {
  values: "primary", "danger", "ghost";
}

@block Button {
  @param --variant Variant;

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

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

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

Inheritance (extends)

An @enum can extend another @enum — the descendant gets all the parent's values plus its own. The parent @enum must be declared in the same file or imported via @import.

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

@enum ExtendedSize extends BaseSize {
  values: "xl", "2xl";
  // resulting values: "sm", "md", "lg", "xl", "2xl"
}

The parent's values come first, followed by the descendant's own values. Values already present in the parent are silently ignored when specified again.

Inheritance chain

@enum Base {
  values: "a", "b";
}

@enum Extended extends Base {
  values: "c";
}

@enum Specialized extends Extended {
  values: "d";
}
// Specialized: "a", "b", "c", "d"

JSDoc

A comment before @enum is carried over to the IDE as documentation for the type:

/** Button color variants. */
@enum Variant {
  values: "primary", "danger", "ghost";
}

Importing from another file

An @enum can be declared in one file and imported into others:

// 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: "md";
}

Example

@enum Status {
  values: "idle", "loading", "success", "error";
}

@enum ExtendedStatus extends Status {
  values: "cancelled", "timeout";
}

@block Notification {
  @param --status ExtendedStatus;

  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 8px;

  @if (--status == "success") {
    background: #f0fff4;
    color: #276749;
  }

  @if (--status == "error") {
    background: #fff5f5;
    color: #9b2c2c;
  }

  @if (--status == "loading") {
    opacity: 0.7;
  }
}

See also

• @param — using @enum as a parameter type
• @import — importing enums from other files
• @if — conditions based on enum values