@enum

Директива @enum объявляет именованный набор допустимых значений. Используется как тип параметра в @param.

Синтаксис

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

С наследованием:

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

Имя

Имя обязательно начинается с заглавной буквы (PascalCase): Variant, Size, Status. Все имена @enum в одном файле должны быть уникальными.

Значения

Значения — строки в кавычках или идентификаторы, разделённые запятыми. Завершающая запятая допустима:

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

Строки в кавычках предпочтительнее: они допускают дефисы, пробелы и любые символы.

Использование в @param

@enum задаёт тип параметра в @block. Передать значение вне объявленного набора — ошибка TypeScript:

@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;
  }
}

Наследование (extends)

@enum может расширять другой @enum — потомок получает все значения родителя плюс добавляет свои. Родительский @enum должен быть объявлен в том же файле или импортирован через @import.

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

@enum ExtendedSize extends BaseSize {
  values: "xl", "2xl";
  // итоговые значения: "sm", "md", "lg", "xl", "2xl"
}

Значения родителя идут первыми, затем собственные значения потомка. Значения, уже присутствующие в родителе, при повторном указании молча игнорируются.

Цепочка наследования

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

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

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

JSDoc

Комментарий перед @enum переносится в IDE как документация для типа:

/** Цветовые варианты кнопки. */
@enum Variant {
  values: "primary", "danger", "ghost";
}

Импорт из другого файла

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

Пример

@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;
  }
}

См. также

• @param — использование @enum как тип параметра
• @import — импорт перечислений из других файлов
• @if — условия по значениям перечисления