Vanilla Extract: CSS-in-JS без среды выполнения
Пишите типобезопасный CSS с помощью Vanilla Extract, который во время сборки создаёт статические файлы CSS.
«Vanilla Extract: CSS-in-JS без среды выполнения» — бесплатный урок CSS Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Что такое Vanilla Extract?
Vanilla Extract — библиотека CSS-in-JS, не создающая накладных расходов во время выполнения. CSS определяется в TypeScript и во время сборки компилируется в статические CSS-файлы, обеспечивая типобезопасность без внедрения стилей во время выполнения.
Основной принцип
В отличие от styled-components и Emotion, Vanilla Extract полностью работает на этапе сборки. Импорт JavaScript служит программным интерфейсом для написания стилей, а результатом являются обычные CSS-файлы. На клиенте JavaScript не выполняется для применения стилей.
Соглашение об именовании файлов
Файлы Vanilla Extract используют расширение .css.ts:
// button.css.ts
import { style } from '@vanilla-extract/css';
export const button = style({
background: 'royalblue',
color: 'white',
padding: '10px 20px',
borderRadius: '4px',
cursor: 'pointer',
':hover': {
background: '#2563eb'
}
});Использование в компонентах
Импортируйте экспортированное имя класса и примените его:
import { button } from './button.css.ts';
function Button({ children }) {
return <button className={button}>{children}</button>;
}Тематические contract
Самая мощная возможность Vanilla Extract: определите contract темы (форму токенов) и создайте несколько тем, реализующих его:
import { createTheme, createThemeContract } from '@vanilla-extract/css';
const contract = createThemeContract({
color: { primary: null, bg: null }
});
export const lightTheme = createTheme(contract, {
color: { primary: '#3b82f6', bg: '#ffffff' }
});
export const darkTheme = createTheme(contract, {
color: { primary: '#60a5fa', bg: '#111827' }
});styleVariants
Создавайте несколько вариантов стиля без повторения:
import { styleVariants } from '@vanilla-extract/css';
export const variants = styleVariants({
primary: { background: 'royalblue' },
danger: { background: 'crimson' },
ghost: { background: 'transparent', border: '1px solid royalblue' }
});
// <Button className={variants[variant]}>Рецепты с @vanilla-extract/recipes
Функция recipe из пакета рецептов элегантно объединяет базовые стили и варианты:
import { recipe } from '@vanilla-extract/recipes';
export const button = recipe({
base: { padding: '10px 20px', borderRadius: '4px' },
variants: {
color: {
primary: { background: 'royalblue', color: 'white' },
danger: { background: 'crimson', color: 'white' }
},
size: {
sm: { fontSize: '0.875rem' },
lg: { fontSize: '1.25rem' }
}
}
});Sprinkles для служебных классов
@vanilla-extract/sprinkles создаёт служебные классы из набора токенов — это типобезопасный Tailwind без затрат во время выполнения:
Типобезопасность
Поскольку стили являются объектами TypeScript, вы получаете полноценное автодополнение в IDE и проверку типов для имён и значений свойств CSS. Опечатки в именах свойств обнаруживаются во время сборки, а не во время выполнения.
Интеграция с инструментами сборки
Vanilla Extract интегрируется с Vite, webpack, esbuild и Next.js с помощью специальных адаптеров. Извлечённый CSS отдаётся как статический файл.
Когда выбирать Vanilla Extract
Выбирайте Vanilla Extract, если вам нужны:
- Полная типобезопасность TypeScript для стилей
- Нулевые накладные расходы CSS-in-JS во время выполнения
- Статический вывод CSS для максимальной производительности
- Надёжная система тем с проверяемыми по типам contract токенов
Быстрая проверка
В чём заключается ключевое преимущество Vanilla Extract по производительности перед CSS-in-JS во время выполнения, например styled-components?
Повторение
Vanilla Extract — библиотека CSS-in-JS, ориентированная прежде всего на TypeScript и не создающая затрат во время выполнения. Определяйте стили в файлах .css.ts с помощью типобезопасных объектов JavaScript. Во время сборки создаются статические CSS-файлы. Тематические contract обеспечивают поддержку нескольких тем с проверкой типов. styleVariants и recipe элегантно обрабатывают варианты компонентов. Отсутствие затрат во время выполнения делает библиотеку идеальной для приложений, критичных к производительности.
Изучай CSS с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 40
- Уроки
- 159
Часто задаваемые вопросы
Урок «Vanilla Extract: CSS-in-JS без среды выполнения» бесплатный?
Да — полный текст урока «Vanilla Extract: CSS-in-JS без среды выполнения» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Vanilla Extract: CSS-in-JS без среды выполнения»?
Пишите типобезопасный CSS с помощью Vanilla Extract, который во время сборки создаёт статические файлы CSS. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Vanilla Extract: CSS-in-JS без среды выполнения»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Styled-components: литералы шаблонов с тегами
- Emotion: css() и styled()
- Модули CSS: изолированные стили
- Vanilla Extract: CSS-in-JS без среды выполнения