PostCSS в Vite

Vite — инструмент для разработки и сборки сайтов. PostCSS встроен в него: отдельно ставить postcss и postcss-cli не нужно. Если в корне проекта есть postcss.config.js, Vite применяет его ко всем стилям, которые импортирует JavaScript.

Создание проекта

Создайте проект Vite 8 из шаблона на чистом JavaScript и установите нужный плагин:

npm create vite@latest blog -- --template vanilla
cd blog
npm install
npm install --save-dev postcss-preset-env

Шаблон уже содержит src/style.css и импорт import './style.css' в src/main.js. Пакет postcss устанавливать не нужно — он приходит вместе с Vite.

Подключение плагинов

Создайте postcss.config.js в корне проекта, рядом с vite.config.js (если его нет — рядом с package.json):

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

Замените содержимое src/style.css стилями списка постов. Здесь используется @custom-media — именованный медиазапрос, которому посвящён отдельный урок:

/* src/style.css */
@custom-media --tablet (width >= 768px);
 
.post-list {
  display: grid;
  gap: 16px;
}
 
@media (--tablet) {
  .post-list {
    grid-template-columns: 1fr 1fr;
  }
}

Запустите npm run dev и откройте http://localhost:5173: Vite пропустит файл через PostCSS при первом запросе и после каждого сохранения. Перезапуск нужен только после правки самого postcss.config.js.

Сборка

Команда npm run build записывает в dist/assets/ файл вроде index-A2CrBKVv.css:

.post-list{grid-gap:16px;gap:16px;display:grid}@media (width>=768px){.post-list{grid-template-columns:1fr 1fr}}

Без postcss.config.js в файле остались бы непонятные браузеру @custom-media и @media (--tablet).

Что Vite делает сам

Lightning CSS — быстрый инструмент для CSS, написанный на Rust. При сборке Vite сжимает им CSS и заодно подгоняет код под цель сборки (по умолчанию baseline-widely-available — версии основных браузеров примерно за последние два с половиной года): добавляет нужные префиксы и разворачивает вложенность. Поэтому cssnano в проект на Vite ставить не нужно.

Плагины можно описать и прямо в vite.config.js, в параметре css.postcss.plugins, но отдельный файл привычнее: его понимают и другие инструменты.

Tailwind CSS 4 и Lightning CSS

Tailwind CSS 4 подключается к Vite собственным плагином @tailwindcss/vite, а не через PostCSS. Для сборщиков без такого плагина есть пакет @tailwindcss/postcss — он добавляется в postcss.config.js как обычный плагин. Префиксы и @import Tailwind 4 обрабатывает сам, поэтому Autoprefixer и postcss-import рядом с ним не нужны.

Vite также умеет полностью заменить PostCSS на Lightning CSS параметром css.transformer: 'lightningcss' (пока экспериментальным). Тогда postcss.config.js не читается.

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

Поставить в проект на Vite postcss-cli и запускать его параллельно с npm run dev. CSS обработается дважды, а страница всё равно подключит исходный файл через импорт в src/main.js. В Vite достаточно postcss.config.js — всё остальное он сделает сам.