Что такое Vanilla Extract и чем он отличается от CSS-in-JS?

Question

Vanilla Extract — это инструмент для написания CSS с помощью TypeScript, который генерирует обычный CSS на этапе сборки. В отличие от классического CSS-in-JS, стили не создаются в рантайме и не требуют выполнения JS в браузере. Это даёт лучшую производительность и типизацию, но меньше гибкости для динамических стилей. По сути, это “типизированный CSS”, а не стили, живущие в JS во время выполнения.

YeaHub · Accepted Answer

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