Как ECSS компилируется

ECSS работает на этапе сборки. У языка нет тяжёлого рантайма: .ecss-файл превращается в обычный статический CSS плюс небольшой типизированный JS-модуль. Понимание этого снимает ощущение «магии».

Что во что превращается

Из одного @block рождаются три вещи:

1. Статический CSS — все правила блока, включая ветви @if, выгруженные в обычный CSS.
2. Типизированный JS-модуль — объект blocks и компоненты адаптера (EButton).
3. Декларации типов (.d.ts) — чтобы импорт .ecss был типизирован (см. Интеграция с TypeScript).

Пример (схематично)

@block Button {
  @param --variant Variant;

  padding: 8px 16px;

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

Компилируется примерно в такой CSS:

.Button-x7 {
  padding: 8px 16px;
}

.Button-x7[data-variant='primary'] {
  background: #646cff;
}

А компонент при рендере просто проставляет класс и нужные data-атрибуты по значению params:

<button class="Button-x7" data-variant="primary">Нажми меня</button>

TIP

Имена классов и атрибутов здесь сокращены для наглядности — в реальной сборке они уникальны (с хешем), чтобы стили не конфликтовали между блоками.

Так каждая ветвь @if становится обычным CSS-правилом, «включаемым» через data-атрибут. Никакого вычисления стилей в браузере не происходит — в бандл попадает только крошечный хелпер, который собирает класс и атрибуты.

Конвейер

1. Компилятор разбирает .ecss и формирует CSS, JS и типы.
2. Адаптер оборачивает блоки в компоненты вашего фреймворка.
3. Плагин сборщика (@ecss/vite-plugin и др.) подключает CSS на страницу и связывает импорты .ecss.

Что дальше?

• Core API: blocks — что именно экспортирует скомпилированный модуль
• Конфигурация — управление сборкой
• Интеграция с TypeScript — генерация типов