Другие полезные плагины

У PostCSS сотни плагинов, но большинству проектов хватает цепочки из прошлой главы. Ниже — несколько инструментов, которые встречаются чаще других, и одна идея, которую удобно показать на примере.

postcss-pxtorem: px в rem

Единица rem считается от размера шрифта корневого элемента. Если пользователь увеличил шрифт в настройках браузера, размеры в rem вырастут вместе с ним, а в px — нет. Плагин postcss-pxtorem позволяет писать привычные пиксели и получать rem:

npm install --save-dev postcss-pxtorem

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

/* styles/main.css */
.post-title {
  font-size: 24px;
  margin-bottom: 16px;
  border: 1px solid #ddd;
}

.post-title {
  font-size: 1.5rem;
  margin-bottom: 16px;
  border: 1px solid #ddd;
}

По умолчанию плагин делит на 16 (параметр rootValue) и меняет только свойства шрифта, межстрочного и межбуквенного интервала (параметр propList). Чтобы переводить все свойства, кроме тонких рамок, передайте настройки:

// postcss.config.js
import pxtorem from 'postcss-pxtorem';
 
export default {
  plugins: [pxtorem({ propList: ['*'], minPixelValue: 2 })],
};

.post-title {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  border: 1px solid #ddd;
}

minPixelValue: 2 оставляет значения меньше 2 пикселей как есть, поэтому рамка в 1px не превратилась в дробный rem.

Ещё несколько инструментов

PurgeCSS полезен, когда вы подключили большую библиотеку вроде Bootstrap, а используете малую часть её классов. Настраивайте его осторожно: классы, которые добавляет JavaScript, он может принять за ненужные.

Stylelint — отдельный инструмент

Stylelint — линтер, то есть программа, которая ищет ошибки и нарушения правил оформления в CSS. Он разбирает стили парсером PostCSS, но в postcss.config.js его не добавляют: он ничего не меняет в результате, а только сообщает о проблемах. Устанавливается и запускается он отдельно:

npm install --save-dev stylelint stylelint-config-standard

Создайте в корне проекта .stylelintrc.json:

{
  "extends": "stylelint-config-standard"
}

npx stylelint "styles/**/*.css"

Команда выводит список замечаний с номерами строк, например о неизвестном свойстве или повторяющемся селекторе. Флаг --fix исправляет то, что можно исправить автоматически.

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

Добавлять плагин под каждую мелочь. Каждый лишний плагин замедляет сборку и требует обновлений. Прежде чем ставить новый пакет, проверьте, не умеет ли этого postcss-preset-env или сам браузер.