Stylus

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

Основная идея интеграции заключается в том, что Parcel не требует ручной настройки для обработки .styl файлов: достаточно установить компилятор Stylus, после чего файлы автоматически включаются в граф зависимостей и проходят трансформацию в CSS на этапе сборки.

Обработка Stylus в Parcel активируется при наличии пакета stylus в зависимостях проекта.

npm install stylus

или

yarn add stylus

После установки Parcel распознаёт файлы с расширением .styl и применяет встроенный трансформер без дополнительной конфигурации.

Подключение Stylus-файлов в проект

Stylus-файлы могут импортироваться из JavaScript, TypeScript или других стилей.

import './styles/main.styl';

Parcel регистрирует импорт как часть графа зависимостей и компилирует Stylus в CSS, после чего результат включается в итоговый бандл.

Также возможно использование импорта внутри других Stylus-файлов:

@import 'variables.styl'
@import 'mixins.styl'

Базовый синтаксис Stylus

Stylus отличается минималистичным синтаксисом, допускающим отсутствие фигурных скобок, двоеточий и точек с запятой.

body
  font-family Arial, sans-serif
  margin 0
  padding 0

После компиляции Parcel преобразует этот код в стандартный CSS.

Переменные

Переменные позволяют централизованно управлять значениями стилей.

primary-color = #3498db
padding-base = 16px

button
  background primary-color
  padding padding-base

Parcel не изменяет семантику Stylus, а передаёт код компилятору без модификаций.

Вложенность селекторов

Stylus поддерживает вложенные правила, упрощающие структуру стилей.

nav
  ul
    list-style none

  li
    display inline-block

  a
    text-decoration none

Результат компиляции превращается в плоскую структуру CSS.

Миксины и переиспользование логики

Миксины позволяют создавать переиспользуемые блоки стилей.

border-radius(n)
  -webkit-border-radius n
  -moz-border-radius n
  border-radius n

.card
  border-radius(8px)

Parcel не интерпретирует миксины самостоятельно, а делегирует их обработку компилятору Stylus.

Функции Stylus

Stylus поддерживает функции с параметрами и вычислениями.

sum(a, b)
  return a + b

.box
  width sum(100px, 50px)

Функции выполняются на этапе компиляции, до попадания в CSS-бандл.

Импорты и модульная структура

Stylus поддерживает разбиение стилей на модули через @import.

@import 'reset'
@import 'variables'
@import 'components/button'

Parcel автоматически отслеживает зависимости импортируемых файлов, включая изменения вложенных модулей, что обеспечивает корректный Hot Module Replacement.

Работа Parcel с Stylus

Интеграция Stylus в Parcel включает несколько ключевых этапов обработки:

  • обнаружение .styl файлов в графе зависимостей
  • передача содержимого в компилятор Stylus
  • трансформация в CSS
  • постобработка через встроенные плагины Parcel
  • инъекция результата в бандл или выделение в отдельный CSS-файл

Parcel сохраняет исходные source maps, что позволяет отлаживать стили напрямую в браузере.

Hot Module Replacement

При изменении .styl файлов Parcel выполняет частичное обновление стилей без полной перезагрузки страницы. Изменённые стили заменяются в runtime через динамическую подмену <style> или обновление CSS-модуля в зависимости от режима сборки.

Использование с CSS Modules

Stylus может работать совместно с CSS Modules в Parcel. При использовании соответствующего именования файлов или конфигурации классы становятся локально скоупированными.

.button
  background blue
  color white

При импорте в Jav * aScript:

import styles from './button.styl';

element.className = styles.button;

Parcel генерирует уникальные имена классов для предотвращения конфликтов.

Поддержка PostCSS после Stylus

После компиляции Stylus результат CSS может проходить через PostCSS-плагины, встроенные в Parcel или добавленные пользователем. Это включает автопрефиксы, минификацию и оптимизацию.

Source Maps

Parcel автоматически генерирует source maps для Stylus, связывая итоговый CSS с исходными .styl файлами. Это обеспечивает корректную отладку в DevTools.

Типичные проблемы и их причины

Некорректная обработка Stylus обычно связана не с Parcel, а с окружением проекта.

Отсутствие зависимости stylus

При отсутствии пакета stylus Parcel не может выполнить трансформацию.

Error: Cannot find module 'stylus'

Решение заключается в установке компилятора в зависимости проекта.

Конфликты путей импортов

При использовании @import без корректных относительных путей возможны ошибки резолвинга модулей. Parcel использует алгоритм разрешения, аналогичный Node.js, включая поддержку node_modules.

Ошибки синтаксиса Stylus

Поскольку Stylus чувствителен к отступам, нарушение структуры может привести к ошибкам компиляции:

body
font-size 16px

Корректная форма требует вложенности через отступ:

body
  font-size 16px

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

В production-режиме Parcel выполняет дополнительную оптимизацию:

  • минификация CSS
  • удаление неиспользуемых правил
  • объединение файлов стилей при необходимости
  • кэширование результатов компиляции Stylus

Сборка остаётся детерминированной: одинаковый входной Stylus-код всегда приводит к одинаковому CSS-выходу.

Производительность и кэширование

Parcel использует инкрементальную систему кэширования. Stylus-файлы компилируются повторно только при изменении содержимого или зависимостей. Это снижает время пересборки при больших стилевых кодовых базах.

Кэш хранится между запусками сборщика и учитывает:

  • содержимое .styl файлов
  • граф импортов
  • конфигурацию проекта

Совместимость с экосистемой Parcel

Stylus интегрируется в общий pipeline Parcel наряду с другими препроцессорами и форматами стилей. Возможна одновременная работа с Sass, Less и PostCSS при условии корректного разделения точек входа.

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

Оглавление