PostCSS: обзор

PostCSS — инструмент для трансформации CSS через плагины на JavaScript: он разбирает CSS в AST (абстрактное синтаксическое дерево), применяет плагины и генерирует новый CSS.

Зачем нужно

PostCSS решает проблемы, которые не решает нативный CSS: автопрефиксы для кросс-браузерной совместимости, будущий синтаксис CSS сегодня, оптимизация и минификация, модульность через CSS Modules. В отличие от Sass, PostCSS не привносит своего синтаксиса — он работает с обычным CSS.

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

  • Автопрефиксация через autoprefixer (встроен в большинство сборщиков)
  • CSS Modules (изоляция стилей в компонентах)
  • postcss-preset-env — использование будущих CSS-возможностей
  • Минификация через cssnano

Основные плагины

autoprefixer — автоматические вендорные префиксы

/* Исходник */
.card {
  display: flex;
  user-select: none;
}

/* После autoprefixer */
.card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

postcss-preset-env — будущий CSS сегодня

/* Нативные вложенные селекторы (CSS Nesting) */
.card {
  color: black;

  & .title {
    font-size: 1.5rem;
  }

  &:hover {
    background: #f5f5f5;
  }
}

CSS Modules — локальные классы

/* Button.module.css */
.button {
  padding: 8px 16px;
  background: blue;
}

import styles from './Button.module.css';
// styles.button = "Button_button__xY2kL" — уникальное имя
<button className={styles.button}>Нажми</button>

Настройка

postcss.config.js

module.exports = {
  plugins: [
    require('postcss-preset-env')({
      stage: 2, // уровень стабильности CSS-спецификации
    }),
    require('autoprefixer'),
    require('cssnano')({
      preset: 'default',
    }),
  ],
};

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

// vite.config.js
import autoprefixer from 'autoprefixer';

export default {
  css: {
    postcss: {
      plugins: [autoprefixer],
    },
  },
};

PostCSS vs Sass

Критерий PostCSS Sass/SCSS
Синтаксис Стандартный CSS Расширенный (переменные, @mixin)
Гибкость Плагины под любую задачу Фиксированный набор функций
Скорость Быстрее Медленнее
Совместимость Стандарт по умолчанию в Vite/CRA Требует компилятора

Частые ошибки

  1. Неправильный порядок плагинов — autoprefixer должен идти после postcss-preset-env, иначе префиксы будут добавлены к уже трансформированному коду
  2. CSS Modules без сборщика — CSS Modules работают только в связке с webpack/Vite, не в браузере напрямую
  3. Использование PostCSS вместо встроенных CSS-переменных — для переменных (--color) не нужен PostCSS; это нативный CSS

Связанные темы

Ресурсы