Установка и запуск postcss-cli

Сам PostCSS — это библиотека для JavaScript. Чтобы запускать его из терминала, нужна программа postcss-cli: она читает файл CSS, прогоняет его через плагины и записывает результат. Понадобится Node.js версии 20 или новее.

Установка

Создайте папку для блога и установите PostCSS, его CLI и первый плагин — Autoprefixer:

mkdir blog
cd blog
npm init -y
npm pkg set type=module
npm install --save-dev postcss postcss-cli autoprefixer
npx postcss --version

Вторая команда npm включает модули ES (import/export) — они понадобятся для файла настроек в следующем уроке. Последняя команда выводит версию postcss-cli, например 12.0.0.

Структура проекта

Исходные стили лежат в styles/, обработанные попадают в css/, а страница подключает только css/main.css:

blog/
├── index.html
├── css/
│   └── main.css      ← создаёт PostCSS
├── styles/
│   └── main.css      ← правите вы
└── package.json

Создайте styles/main.css:

/* styles/main.css */
.post-card {
  padding: 16px;
  user-select: none;
}

Первый запуск

Команда принимает исходный файл, путь результата после -o и плагины после -u (от слова use):

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

Появится файл css/main.css:

.post-card {
  padding: 16px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
 
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLC... */

Последняя строка — встроенная карта исходников (здесь она сокращена). postcss-cli добавляет её по умолчанию, подробнее — в уроке о картах исходников. Флаг --no-map её отключает.

Если не указать -o, результат выводится в терминал — удобно для экспериментов:

npx postcss styles/main.css -u autoprefixer --no-map

Слежение за изменениями

Флаг --watch оставляет программу работать и обрабатывает файл после каждого сохранения:

npx postcss styles/main.css -o css/main.css -u autoprefixer --watch

Остановить слежение — Ctrl+C.

Скрипты в package.json

Чтобы не набирать флаги каждый раз, сохраните команды в package.json:

{
  "scripts": {
    "css:dev": "postcss styles/main.css -o css/main.css -u autoprefixer --watch",
    "css:build": "postcss styles/main.css -o css/main.css -u autoprefixer --no-map"
  }
}

Теперь во время работы запускайте npm run css:dev, а перед публикацией — npm run css:build. Внутри скриптов npx не нужен.

Несколько файлов

Если исходных файлов несколько, вместо -o укажите папку результата через --dir:

npx postcss styles/*.css --dir css -u autoprefixer

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

Указать плагин в -u, но забыть его установить. Команда завершится сообщением, которое начинается с Plugin Error: Cannot find package 'autoprefixer'. Каждый плагин — отдельный пакет npm: сначала npm install --save-dev имя-плагина, потом запуск.