rollup-plugin-postcss: конфигурация и возможности

rollup-plugin-postcss представляет собой плагин для Rollup, предназначенный для обработки CSS-файлов и их интеграции в JavaScript-бандл. Его ключевая задача — дать возможность импортировать стили напрямую в JavaScript-модули, обрабатывать их через PostCSS-пайплайн и контролировать способ вывода CSS: инлайн в JS, отдельным файлом или в виде нескольких чанков.

В экосистеме Rollup этот плагин решает проблему отсутствия встроенной поддержки CSS, аналогичной той, что есть в Webpack. Он обеспечивает гибкость при работе со стилями, сохраняя философию Rollup — прозрачную и предсказуемую сборку.

Базовая установка и подключение

Плагин устанавливается стандартным способом через npm:

npm install rollup-plugin-postcss --save-dev

Подключение в конфигурации Rollup:

import postcss from 'rollup-plugin-postcss';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm'
  },
  plugins: [
    postcss()
  ]
};

В таком виде плагин уже способен обрабатывать импорт CSS:

import './styles.css';

Основная конфигурация плагина

Плагин принимает объект конфигурации, который определяет поведение обработки CSS.

Пример базовой конфигурации

postcss({
  extract: true,
  minimize: true,
  sourceMap: true
})

Каждая опция влияет на способ генерации и обработки CSS.

Параметр extract: управление выводом CSS

extract определяет, будет ли CSS вынесен в отдельный файл.

Значение true

postcss({
  extract: true
})

Результат:

  • создаётся отдельный .css файл
  • стили не попадают в JavaScript
  • повышается производительность загрузки в браузере

Указание имени файла

postcss({
  extract: 'dist/styles.css'
})

Такой вариант используется при строгом контроле структуры build-артефактов.

Поведение при false

postcss({
  extract: false
})

CSS инлайнится в JavaScript и вставляется в DOM во время выполнения.

Инлайн-режим и его особенности

При отключённом extract стили внедряются через runtime-инъекцию:

const style = document.createElement('style');
style.innerHTML = "body { margin: 0; }";
document.head.appendChild(style);

Такой подход:

  • увеличивает размер JS-бандла
  • упрощает деплой (меньше файлов)
  • подходит для библиотек и компонентов

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

Опция minimize включает сжатие CSS.

postcss({
  minimize: true
})

Минификация включает:

  • удаление пробелов и комментариев
  • объединение правил
  • оптимизацию селекторов

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

Явное подключение cssnano

import cssnano from 'cssnano';

postcss({
  minimize: true,
  plugins: [cssnano()]
})

Source maps для CSS

Поддержка source map позволяет отслеживать исходные стили в devtools.

postcss({
  sourceMap: true
})

При использовании:

  • сохраняется соответствие между SCSS/PostCSS и итоговым CSS
  • упрощается отладка
  • корректно отображаются исходные файлы в браузере

Поддержка PostCSS-плагинов

Главная сила rollup-plugin-postcss заключается в интеграции с PostCSS-экосистемой.

Пример подключения плагинов

import autoprefixer from 'autoprefixer';
import nested from 'postcss-nested';

postcss({
  plugins: [
    autoprefixer(),
    nested()
  ]
})

Автопрефиксы

.button {
  display: flex;
}

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

.button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

Поддержка препроцессоров

Плагин поддерживает Sass, Less и Stylus через дополнительные пакеты.

Sass

npm install sass
postcss({
  extensions: ['.css', '.scss'],
  use: ['sass']
})

Less

postcss({
  extensions: ['.css', '.less'],
  use: ['less']
})

Stylus

postcss({
  extensions: ['.css', '.styl'],
  use: ['stylus']
})

Опция modules: CSS Modules

Поддержка CSS Modules позволяет изолировать стили по компонентам.

postcss({
  modules: true
})

Использование в коде

import styles from './button.css';

console.log(styles.button);

Пример CSS

.button {
  color: red;
}

После обработки класс может быть преобразован в уникальный идентификатор:

.button_3x9a2 {
  color: red;
}

Настройка генерации имен классов

CSS Modules позволяет управлять форматом генерации имен:

postcss({
  modules: {
    generateScopedName: '[name]__[local]___[hash:base64:5]'
  }
})

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

  • читаемость в dev-режиме
  • уникальность в production

Интеграция с TypeScript

Для проектов на TypeScript можно генерировать типы для CSS Modules.

Пример конфигурации

postcss({
  modules: {
    generateScopedName: '[local]_[hash:base64:5]'
  }
})

Дополнительно используется декларационный файл:

declare module '*.css' {
  const classes: { [key: string]: string };
  export default classes;
}

Условная обработка файлов

Плагин позволяет фильтровать CSS-файлы:

postcss({
  include: '**/*.css',
  exclude: 'node_modules/**'
})

Это полезно при:

  • разделении внутренних и внешних стилей
  • исключении библиотечных CSS

Опция inject: кастомная вставка стилей

Можно переопределить механизм внедрения CSS в DOM.

postcss({
  inject: false
})

Или задать кастомную функцию:

postcss({
  inject: (css) => {
    const style = document.createElement('style');
    style.setAttribute('data-custom', 'true');
    style.appendChild(document.createTextNode(css));
    document.head.appendChild(style);
  }
})

Это используется для:

  • SSR-совместимых решений
  • микрофронтендов
  • библиотек компонентов

Опция plugins как функция

Конфигурация может быть динамической:

postcss({
  plugins: (defaultPlugins) => [
    ...defaultPlugins,
    autoprefixer()
  ]
})

Это позволяет:

  • расширять стандартный набор
  • адаптировать сборку под окружение

Поддержка multiple entries и code splitting

При использовании нескольких входных точек Rollup плагин способен:

  • объединять CSS из разных модулей
  • либо разделять стили по чанкам
export default {
  input: {
    app: 'src/app.js',
    admin: 'src/admin.js'
  },
  output: {
    dir: 'dist',
    format: 'esm'
  },
  plugins: [
    postcss({
      extract: true
    })
  ]
};

Поведение в режиме разработки

В dev-режиме плагин часто используется без минификации:

postcss({
  minimize: false,
  sourceMap: true,
  extract: false
})

Особенности:

  • быстрые пересборки
  • инлайн-стили
  • удобная отладка

Поведение в production

Типичная production-конфигурация:

postcss({
  extract: 'dist/styles.css',
  minimize: true,
  sourceMap: false,
  modules: true,
  plugins: [autoprefixer()]
})

Характерные свойства:

  • выделенный CSS-файл
  • минимальный размер
  • оптимизированные селекторы
  • отсутствие runtime-инъекций

Ограничения и особенности поведения

При использовании rollup-plugin-postcss важно учитывать ряд архитектурных особенностей:

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

Взаимодействие с другими Rollup-плагинами

rollup-plugin-node-resolve

Позволяет корректно обрабатывать стили из зависимостей:

import resolve from '@rollup/plugin-node-resolve';

rollup-plugin-commonjs

Обеспечивает поддержку CommonJS-библиотек, содержащих CSS-инъекции.

babel и postcss

Порядок важен:

plugins: [
  postcss(),
  babel(),
]

Архитектурные сценарии использования

Компонентная архитектура

Каждый компонент имеет собственный CSS:

Button/
  index.js
  style.css

Библиотеки UI

Использование extract и modules для изоляции:

  • минимизация конфликтов
  • предсказуемая сборка

SSR

Отключение inject и использование extract для серверной подготовки CSS.

Поведение при ошибках

Типичные ошибки:

  • отсутствующий препроцессор
  • неверный путь импорта CSS
  • конфликт CSS Modules и глобальных стилей

Плагин обычно сообщает:

  • имя файла
  • строку ошибки
  • причину сбоя обработки PostCSS

Производственные практики конфигурации

  • разделение dev/prod конфигураций
  • использование environment variables
  • явное указание extract для production
  • отключение source maps в финальной сборке
  • минимизация количества PostCSS-плагинов

Внутренний процесс обработки

Пайплайн обработки включает этапы:

  1. Поиск CSS-импортов в JS
  2. Передача содержимого в PostCSS
  3. Применение цепочки плагинов
  4. Генерация итогового CSS
  5. Встраивание или экспорт файла

Роль в экосистеме Rollup

rollup-plugin-postcss выполняет функцию связующего слоя между JavaScript-модульностью Rollup и декларативной природой CSS. Он обеспечивает единый процесс сборки, где стили становятся частью графа модулей и подчиняются тем же правилам зависимости и оптимизации.

Оглавление