CSS Custom Properties и их обработка

Природа CSS Custom Properties

CSS Custom Properties (переменные CSS) представляют собой механизм хранения значений, доступных на уровне каскада стилей. Они объявляются через префикс -- и используются через функцию var().

Ключевая особенность заключается в том, что такие переменные обрабатываются в рантайме браузера, а не на этапе сборки. Это фундаментально отличает их от переменных препроцессоров (Sass, Less), которые компилируются в статические значения до попадания в браузер.

:root {
  --main-color: #4f46e5;
  --spacing-unit: 8px;
}

.button {
  background: var(--main-color);
  padding: calc(var(--spacing-unit) * 2);
}

Для системы сборки это означает, что значения переменных, как правило, недоступны для статического анализа и подстановки без дополнительных инструментов.

Общая модель обработки CSS в Parcel

Parcel рассматривает CSS как часть графа зависимостей. Каждый CSS-файл проходит через несколько стадий:

  • парсинг CSS-модуля
  • анализ зависимостей (@import, url(), @value и др.)
  • применение трансформеров (PostCSS-плагины)
  • оптимизация и минификация
  • генерация итоговых бандлов
  • привязка к HMR (Hot Module Replacement)

CSS Custom Properties не выделяются в отдельную сущность на уровне Parcel, но их поведение определяется контекстом всей цепочки обработки CSS.

Роль Parcel в работе с CSS переменными

Parcel не выполняет подстановку значений CSS Custom Properties, так как это нарушило бы семантику каскада и наследования. Вместо этого система обеспечивает корректную передачу переменных в итоговый CSS без изменения их логики.

При сборке происходит следующее:

  • имена переменных --variable-name остаются неизменными
  • вызовы var(--variable-name) не трансформируются в статические значения
  • структура каскада сохраняется полностью
  • порядок правил не нарушается

Это обеспечивает идентичное поведение в development и production средах.

Взаимодействие с PostCSS

Parcel использует PostCSS как основной механизм расширения возможностей CSS. Через него подключаются плагины, влияющие на обработку стилей.

postcss-preset-env

Наиболее значимым инструментом является postcss-preset-env, который может:

  • добавлять полифилы для новых CSS-фич
  • трансформировать экспериментальные синтаксические конструкции
  • частично работать с fallback-значениями

CSS Custom Properties при этом не компилируются, но могут участвовать в генерации fallback-логики:

.button {
  color: var(--text-color, black);
}

Fallback-значение остаётся нетронутым и используется браузером напрямую, без участия сборщика.

Минификация и оптимизация

В production-сборке Parcel применяет CSS minifier (обычно cssnano через PostCSS). При этом поведение Custom Properties имеет ограничения:

  • имена переменных не сокращаются
  • значения переменных не инлайнится
  • дублирующиеся объявления могут быть удалены только при строгом совпадении контекста
  • безопасное слияние правил не затрагивает переменные

Пример:

:root {
  --spacing: 10px;
  --spacing: 10px;
}

После минификации возможно сокращение до одного объявления, но только при полной эквивалентности контекста.

CSS Modules и Custom Properties

При использовании CSS Modules Parcel изолирует классы, но CSS Custom Properties ведут себя иначе, поскольку они наследуются через DOM.

/* styles.module.css */
.card {
  --card-padding: 16px;
  padding: var(--card-padding);
}

После компиляции:

  • имя класса .card может быть хешировано
  • --card-padding остаётся глобально доступным внутри DOM-ветки
  • наследование переменной сохраняется независимо от модульной изоляции

Это создаёт гибридную модель: локальная область видимости классов и глобальная семантика переменных.

Каскад, наследование и Parcel runtime

Parcel не вмешивается в механизмы каскада, однако его бандлинг влияет на итоговую структуру CSS:

  • порядок подключения файлов сохраняется в зависимости от графа импортов
  • @import инлайнятся в итоговый бандл
  • переменные из :root могут попадать в общий глобальный слой

CSS Custom Properties активно используют наследование:

.theme-dark {
  --bg: #111;
  --text: #eee;
}

.panel {
  background: var(--bg);
  color: var(--text);
}

Parcel сохраняет эту модель без преобразований, так как любое вмешательство нарушило бы динамическое поведение темы.

Hot Module Replacement и CSS переменные

В режиме разработки Parcel использует HMR для CSS. При изменении файла:

  • обновляется соответствующий CSS-модуль
  • изменения внедряются без полной перезагрузки страницы
  • состояние DOM сохраняется

CSS Custom Properties особенно хорошо подходят для HMR-сценариев, поскольку:

  • изменение значения переменной в :root мгновенно отражается во всех зависимых стилях
  • нет необходимости пересчитывать статические классы
  • обновление происходит через замену style-тега

Пример поведения:

:root {
  --accent: red;
}

После изменения на:

:root {
  --accent: blue;
}

все элементы, использующие var(--accent), обновляются без перерасчёта классов или повторной компиляции логики.

Влияние дерева зависимостей Parcel

Parcel строит граф зависимостей CSS, но CSS Custom Properties не образуют явных связей:

  • var(--x) не создаёт зависимость от места объявления --x
  • анализ ограничивается только синтаксическим уровнем
  • переменные рассматриваются как runtime-значения

Это означает отсутствие возможности:

  • трейсинга использования переменной
  • удаления “неиспользуемых” custom properties
  • оптимизации на уровне значений

Интеграция с современными CSS-подходами

CSS Custom Properties в связке с Parcel часто используются вместе с:

  • CSS-in-CSS архитектурой
  • дизайн-токенами
  • темизацией через классы или атрибуты
  • адаптивными системами на calc(), clamp(), min(), max()

Parcel в этих сценариях выступает как транспортер, обеспечивающий:

  • корректную сборку многомодульного CSS
  • предсказуемый порядок каскада
  • совместимость с PostCSS-экосистемой
  • минимальное вмешательство в runtime-логику

Особенности работы с производственной сборкой

В production режиме Parcel ориентируется на стабильность CSS Custom Properties:

  • сохраняется полная семантика каскада
  • отсутствуют агрессивные трансформации
  • обеспечивается детерминированный порядок правил
  • минимизируются только синтаксические избыточности

Такой подход поддерживает сложные системы темизации, где переменные используются как основа архитектуры стилей, а не как статические значения для компиляции.

Оглавление