Поддержка обычного CSS

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

Автоматическое распознавание CSS

Parcel анализирует импортируемые файлы и автоматически определяет их тип по расширению. При встрече с .css-файлом он:

  • подключает встроенный CSS-пайплайн;
  • анализирует зависимости внутри файла;
  • обрабатывает @import;
  • извлекает ресурсы (например, шрифты и изображения);
  • подключает стили к итоговому бандлу.

Импорт CSS в JavaScript выполняется напрямую:

import './styles.css';

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

Обработка CSS как модуля

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

Каждый CSS-файл:

  • анализируется как отдельный модуль;
  • может импортировать другие CSS-файлы;
  • участвует в tree-shaking на уровне зависимостей;
  • автоматически включается в нужный бандл.

Пример вложенных импортов:

/* base.css */
@import './reset.css';
@import './typography.css';

body {
  margin: 0;
}

Parcel рекурсивно разрешает все @import и формирует единый оптимизированный результат.

Поддержка стандартного синтаксиса CSS

Parcel поддерживает весь современный CSS без необходимости включения дополнительных плагинов:

  • CSS Variables (--var)
  • Nesting (в зависимости от версии и конфигурации)
  • Media queries
  • Keyframes
  • Custom properties
  • Calc-выражения

Пример использования переменных:

:root {
  --primary-color: #4a90e2;
}

.button {
  background: var(--primary-color);
}

Parcel не изменяет семантику CSS, а лишь оптимизирует его и подготавливает к продакшену.

Обработка @import и зависимостей

Одной из ключевых возможностей является глубокая обработка директивы @import. В отличие от классических сборщиков, Parcel не просто склеивает файлы, а строит полноценный граф зависимостей.

@import './buttons.css';
@import './forms.css';

Каждый импортируемый файл:

  • проходит отдельную стадию анализа;
  • может содержать свои импорты;
  • оптимизируется независимо;
  • объединяется на финальном этапе.

Parcel также поддерживает импорт через URL (при соответствующей конфигурации), рассматривая такие ресурсы как внешние зависимости.

Автоматическая обработка префиксов

Parcel включает PostCSS-пайплайн с автоматическим добавлением вендорных префиксов при сборке для production-режима. Это избавляет от необходимости вручную подключать autoprefixer.

Пример исходного CSS:

.box {
  display: flex;
  user-select: none;
}

В результате сборки могут добавляться префиксы для совместимости с различными браузерами.

Минификация CSS

В production-сборке Parcel автоматически выполняет минификацию CSS:

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

Исходный код:

.button {
  padding: 10px 20px;
  color: #ffffff;
}

После сборки:

.button{padding:10px 20px;color:#fff}

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

Инлайн CSS в JavaScript

Parcel поддерживает импорт CSS непосредственно в JavaScript-модули. Такой подход используется для компонентов или изолированных стилей.

import './component.css';

export function Button() {
  return `<button class="button">Click</button>`;
}

При этом Parcel может:

  • инжектировать стили в <style>-тег;
  • выделять CSS в отдельный файл в production;
  • разделять стили по чанкам при code splitting.

Поведение зависит от режима сборки и структуры проекта.

Code splitting для CSS

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

Пример динамического импорта:

import('./admin.js');

Если admin.js импортирует CSS, Parcel создаёт отдельный CSS-чанк, связанный с этим модулем.

Это обеспечивает:

  • уменьшение начального размера бандла;
  • ленивую загрузку стилей;
  • изоляцию стилей между частями приложения.

Поддержка CSS внутри зависимостей

Если сторонняя библиотека содержит CSS-файлы, Parcel автоматически их подключает при импорте JavaScript-модуля.

import 'library/styles.css';

Parcel:

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

Это избавляет от необходимости вручную подключать стили библиотек через HTML.

Обработка ассетов внутри CSS

CSS-файлы в Parcel могут содержать ссылки на ресурсы:

.hero {
  background-image: url('./images/bg.png');
}

Parcel автоматически:

  • определяет путь к файлу;
  • обрабатывает изображение как модуль;
  • оптимизирует и копирует в выходную директорию;
  • подставляет корректный хешированный путь.

То же касается шрифтов:

@font-face {
  font-family: 'MyFont';
  src: url('./fonts/myfont.woff2');
}

Оптимизация и хеширование

Для production-сборки Parcel применяет хеширование имён файлов:

  • CSS получает уникальный hash в имени;
  • ресурсы внутри CSS также переименовываются;
  • кэширование становится более эффективным.

Пример результата:

styles.8f3a1c.css

Это обеспечивает корректное обновление ресурсов в браузере без конфликтов кеша.

Совместимость и расширяемость

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

Однако базовая конфигурация уже включает:

  • PostCSS pipeline;
  • автопрефиксы;
  • минификацию;
  • обработку ассетов;
  • поддержку современных спецификаций CSS.

Такой подход позволяет работать с CSS без явной настройки инструментов, сохраняя при этом возможность масштабирования проекта.

Оглавление