Вопрос проверяет, понимаешь ли ты современные подходы к стилизации и разницу между runtime- и build-time CSS.
Vanilla Extract — это инструмент для написания CSS с помощью TypeScript, который генерирует обычный CSS на этапе сборки. В отличие от классического CSS-in-JS, стили не создаются в рантайме и не требуют выполнения JS в браузере. Это даёт лучшую производительность и типизацию, но меньше гибкости для динамических стилей. По сути, это “типизированный CSS”, а не стили, живущие в JS во время выполнения.
Vanilla Extract появился как реакция на проблемы runtime CSS-in-JS.
Определение: Vanilla Extract — это build-time библиотека, позволяющая писать стили на TypeScript, которые компилируются в статический CSS.
Стили пишутся в .css.ts файлах
Используются обычные JS/TS-объекты
На этапе сборки:
генерируются CSS-файлы
в код попадают только className
// styles.css.ts
import { style } from "@vanilla-extract/css";
export const button = style({
padding: "8px 12px",
borderRadius: "6px",
});
<button className={button}>Click</button>
Время выполнения
Vanilla Extract: build-time
CSS-in-JS: runtime
Производительность
Нет генерации стилей в браузере
Нет зависимости от порядка рендеринга
Типизация
Полноценный TypeScript
Ошибки ловятся при сборке
Динамика
Подходит для тем, токенов, вариантов
Не подходит для стилей, зависящих от runtime-данных (scroll, размеры DOM)
Vanilla Extract — хороший выбор для дизайн-систем и крупных приложений, где важны производительность, предсказуемость и типизация, а не максимальная динамичность стилей.