71 lines
3.7 KiB
Markdown
71 lines
3.7 KiB
Markdown
|
---
|
|||
|
|
title: PostCSS
|
|||
|
|
description: Установка и настройка CSS-процессора в новом проекте.
|
|||
|
|
keywords: [postcss, postcss.config.mjs, postcss-custom-media, postcss-nesting, autoprefixer, postcss-global-data, csstools, "@custom-media", "@nest", css-процессор]
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# PostCSS
|
|||
|
|
|
|||
|
|
Установка и настройка CSS-процессора в новом проекте.
|
|||
|
|
|
|||
|
|
## Зачем PostCSS
|
|||
|
|
|
|||
|
|
Подключаем ради двух вещей:
|
|||
|
|
|
|||
|
|
- **Вложенность** — `&:hover`, `&::before`, `&._active` и `@media` внутри селектора. Без процессора нативный CSS не покрывает всех нужных кейсов вложенности.
|
|||
|
|
- **`@custom-media`** — единые breakpoints проекта (`@media (--md)`) вместо магических `min-width`. Определяются в одном месте, переиспользуются везде.
|
|||
|
|
|
|||
|
|
Autoprefixer и `@csstools/postcss-global-data` идут довеском под эти две задачи.
|
|||
|
|
|
|||
|
|
## Требования
|
|||
|
|
|
|||
|
|
- Next.js 14+ (App Router).
|
|||
|
|
- Node.js 18+.
|
|||
|
|
|
|||
|
|
CSS Modules поддерживаются Next.js из коробки — отдельной установки не требуют.
|
|||
|
|
|
|||
|
|
## Установка
|
|||
|
|
|
|||
|
|
1. Установить PostCSS-плагины как devDependencies:
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm install -D postcss-custom-media postcss-nesting autoprefixer @csstools/postcss-global-data
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
2. Создать `postcss.config.mjs` в корне проекта (см. «Конфиг»).
|
|||
|
|
|
|||
|
|
## Конфиг
|
|||
|
|
|
|||
|
|
Файл `postcss.config.mjs` в корне проекта.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
// postcss.config.mjs
|
|||
|
|
export default {
|
|||
|
|
plugins: {
|
|||
|
|
'@csstools/postcss-global-data': {
|
|||
|
|
files: ['src/shared/styles/media.css'],
|
|||
|
|
},
|
|||
|
|
'postcss-custom-media': {},
|
|||
|
|
'postcss-nesting': {},
|
|||
|
|
autoprefixer: {},
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### Разбор плагинов
|
|||
|
|
|
|||
|
|
| Плагин | Назначение |
|
|||
|
|
|--------|------------|
|
|||
|
|
| `@csstools/postcss-global-data` | Подгружает определения `@custom-media` из `src/shared/styles/media.css` перед обработкой каждого CSS-модуля. Семантика — «глобальный файл определений, который не импортируется в исходники» |
|
|||
|
|
| `postcss-custom-media` | Поддержка `@custom-media --md (...)` и использования `@media (--md) {}`. Определения берутся из файла, который подгрузил `postcss-global-data` |
|
|||
|
|
| `postcss-nesting` | Нативная CSS-вложенность: `&:hover`, `&::before`, `&._active` |
|
|||
|
|
| `autoprefixer` | Добавление вендорных префиксов по browserslist |
|
|||
|
|
|
|||
|
|
### Почему внешний файл с `@custom-media`, а не `@import`
|
|||
|
|
|
|||
|
|
`@custom-media` — глобальные определения, одинаковые для всего проекта. Держим их в `src/shared/styles/media.css`. `@csstools/postcss-global-data` подгружает этот файл перед каждым модулем, а `postcss-custom-media` заменяет `@media (--md)` на конкретные `@media (min-width: ...)` на этапе сборки. Сами определения в бандл не попадают.
|
|||
|
|
|
|||
|
|
Опция `importFrom` у `postcss-custom-media` удалена в v10+; её роль теперь выполняет `@csstools/postcss-global-data`.
|
|||
|
|
|
|||
|
|
Импортировать `media.css` в файлы компонентов **не нужно** и запрещено правилами (см. [Использование стилей](./styles/styles-usage.md), раздел «Импорт стилей»).
|