Файл postcss.config.js

Перечислять плагины в каждой команде неудобно, а настройки плагинов через -u не передать. Поэтому плагины описывают в файле postcss.config.js в корне проекта. Его автоматически находят postcss-cli, Vite и другие инструменты.

Создание файла

Создайте postcss.config.js рядом с package.json:

blog/
├── postcss.config.js
├── styles/
│   └── main.css
└── package.json

Файл экспортирует объект с массивом plugins. Каждый плагин импортируется и вызывается как функция:

// postcss.config.js
import autoprefixer from 'autoprefixer';
 
export default {
  plugins: [autoprefixer()],
};

Теперь команда становится короче — флаг -u больше не нужен:

npx postcss styles/main.css -o css/main.css

Результат в css/main.css тот же, что в прошлом уроке, но без строки sourceMappingURL: при наличии файла настроек карты исходников включаются его параметром map, об этом — в отдельном уроке.

Настройки плагина

Настройки передаются аргументом при вызове плагина. Например, у Autoprefixer есть параметр cascade: по умолчанию он выравнивает свойства с префиксами пробелами, а false отключает выравнивание:

// postcss.config.js
import autoprefixer from 'autoprefixer';
 
export default {
  plugins: [autoprefixer({ cascade: false })],
};

.post-card {
  padding: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

Свойства больше не сдвинуты вправо. Список настроек каждого плагина есть в его README.

Порядок плагинов

Плагины выполняются строго в порядке массива: второй получает CSS, уже изменённый первым. Обычная последовательность выглядит так:

Если поставить cssnano первым, следующие плагины получат уже сжатый CSS, и их добавления останутся несжатыми.

Короткая запись

Встречается и вторая форма — объект, где ключ — имя пакета, а значение — его настройки:

// postcss.config.js
export default {
  plugins: {
    autoprefixer: {},
  },
};

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

Частая ошибка

Скопировать из старой статьи конфигурацию в формате CommonJS — module.exports = ... и require(...) — в проект с "type": "module". Команда упадёт с ошибкой module is not defined in ES module scope. Либо перепишите файл через import и export default, либо переименуйте его в postcss.config.cjs.