postcss-preset-env: новый CSS уже сегодня

postcss-preset-env — набор из нескольких десятков плагинов в одном пакете. Он позволяет писать современный CSS, а для браузеров из вашего списка Browserslist, которые что-то не поддерживают, переписывает код в старый эквивалент. Внутри уже есть Autoprefixer.

Установка

Установите пакет и замените им Autoprefixer в настройках:

npm install --save-dev postcss-preset-env
npm uninstall autoprefixer

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

Список браузеров по-прежнему "browserslist": ["defaults"] в package.json.

Логические свойства

Логические свойства задают отступы и рамки не по сторонам экрана (left, top), а по направлению текста: inline — вдоль строки, block — поперёк строк. Оформим карточку поста:

/* styles/main.css */
.post-card {
  margin-block: 16px;
  padding-inline: 24px;
  border-inline-start: 4px solid #2563eb;
}

После npx postcss styles/main.css -o css/main.css:

.post-card {
  margin-top: 16px;
  margin-bottom: 16px;
  padding-left: 24px;
  padding-right: 24px;
  border-left: 4px solid #2563eb;
}

Логические свойства заменены физическими. Причина — Opera Mini, которая входит в defaults и их не понимает. Замена рассчитана на текст слева направо.

<style>
  .post-card {
    margin-top: 16px;
    margin-bottom: 16px;
    padding-left: 24px;
    padding-right: 24px;
    border-left: 4px solid #2563eb;
  }
</style>
 
<article class="post-card">
  <h2>Знакомство с PostCSS</h2>
  <p>Анна рассказывает, как настроить плагины за десять минут.</p>
</article>

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

Другие возможности

Тот же плагин обрабатывает цвета и математические функции:

/* styles/main.css */
.post-tag {
  color: oklch(55% 0.2 260);
  font-size: clamp(0.75rem, 2vw, 0.875rem);
}

.post-tag {
  color: rgb(28, 105, 227);
  font-size: max(0.75rem, min(2vw, 0.875rem));
}

Цвет oklch() пересчитан в rgb(), а clamp() выражен через max() и min().

Результат зависит от списка

Замените список на "browserslist": ["baseline widely available"] и соберите снова: карточка останется с margin-block и padding-inline, а цвет — в oklch(). Все браузеры из нового списка это понимают, и плагину нечего менять. Когда старые браузеры перестанут быть нужны, вы просто обновите список — исходный CSS переписывать не придётся.

Настройки

Параметр	Что делает
`stage`	Насколько «сырые» возможности включать: от 0 (черновики) до 4 (стандарт), по умолчанию 2
`features`	Включить или выключить отдельную возможность по её имени
`browsers`	Задать список браузеров прямо здесь, в обход Browserslist

Например, так отключается замена логических свойств:

// postcss.config.js
import postcssPresetEnv from 'postcss-preset-env';
 
export default {
  plugins: [
    postcssPresetEnv({
      features: { 'logical-properties-and-values': false },
    }),
  ],
};

Имена всех возможностей перечислены на сайте cssdb.org.

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

Включать логические свойства на сайте с арабским или ивритским текстом и не замечать замену. Плагин превращает border-inline-start в border-left, и в тексте справа налево полоса окажется не с той стороны. Для таких сайтов исключите Opera Mini из списка или отключите эту возможность через features.

Спасибо, что читаете!