Оглавление
PostCSS
Инструмент для обработки CSS плагинами: Autoprefixer, минификация, будущие возможности CSS.
1.Начало работы
- Что такое PostCSSPostCSS — это парсер CSS и система плагинов. Как он устроен, чем отличается от препроцессора и какие задачи решает.
- Установка и запуск postcss-cliКак установить PostCSS и postcss-cli через npm, обработать файл плагином из командной строки, следить за изменениями и сохранить команды в package.json.
- Файл postcss.config.jsКак перенести список плагинов из командной строки в postcss.config.js, передать плагину настройки и почему важен порядок плагинов.
- PostCSS в ViteVite уже содержит PostCSS: как подключить плагины через postcss.config.js, что Vite делает с CSS сам и как с ним связаны Tailwind CSS 4 и Lightning CSS.
2.Совместимость с браузерами
- Browserslist: список браузеровКак задать в package.json, какие браузеры должен поддерживать сайт, проверить список командой npx browserslist и обновить данные о браузерах.
- AutoprefixerКак Autoprefixer добавляет вендорные префиксы по списку Browserslist, убирает устаревшие и почему префиксы не нужно писать вручную.
- postcss-preset-env: новый CSS уже сегодняКак postcss-preset-env переводит современный CSS в код для старых браузеров по списку Browserslist, на примере логических свойств, oklch и clamp.
- Вложенность CSSКак писать вложенные правила по стандарту CSS Nesting и получать плоские селекторы для старых браузеров с помощью postcss-preset-env или postcss-nesting.
- Именованные медиазапросы @custom-mediaКак дать медиазапросу имя через @custom-media, использовать его во всём проекте и получить обычные медиазапросы с помощью postcss-preset-env.
3.Сборка и оптимизация
- postcss-import: сборка из нескольких файловКак разбить стили на файлы и склеить их в один через @import с плагином postcss-import, подключить CSS из пакета npm и почему плагин ставят первым.
- cssnano: сжатие CSSКак плагин cssnano уменьшает CSS для продакшена: удаляет пробелы и комментарии, сокращает значения и объединяет одинаковые правила.
- Карты исходниковЧто такое карта исходников, как PostCSS записывает её внутрь CSS или в отдельный файл .map и как браузер показывает по ней исходные строки.
- Сборка для продакшенаПолная цепочка PostCSS для сайта: postcss-import, postcss-preset-env и cssnano, разные настройки для разработки и публикации и скрипты npm.
4.Экосистема
- Другие полезные плагиныКраткий обзор плагинов PostCSS сверх основной цепочки: postcss-pxtorem для перевода px в rem, удаление неиспользуемых стилей и Stylelint как отдельный инструмент.
- Свой плагин за пять минутКак написать собственный плагин PostCSS: объект с именем и обработчиком Declaration, изменение свойства, предупреждение и подключение в postcss.config.js.
- PostCSS, Sass или Lightning CSSЧем различаются PostCSS, Sass и Lightning CSS, как они сочетаются друг с другом и какой инструмент выбрать для своего проекта.