Вступление
PostCSS — очень популярный инструмент, который позволяет разработчикам писать CSS-препроцессоры или
пост-процессоры, называемые плагинами. Существует огромное количество плагинов, которые
предоставляют множество функций и иногда термин «PostCSS» означает сам инструмент плюс экосистему
плагинов.
Плагины PostCSS можно запускать в командной строке, но они обычно вызываются исполнителями задач (taskrunners) во время сборки (билда).
Архитектура на основе плагинов обеспечивает общую основу для всех необходимых вам операций с CSS.
Примечание: PostCSS, несмотря на название, не является постпроцессором CSS и его можно
использовать для CSS билда, а также для других целей. PostCSS — это инструмент для
преобразования CSS с помощью JavaScript.
Сам PostCSS очень маленький. Он включает только синтаксический анализатор CSS, API дерева узлов CSS, генератор исходной карты и строковый преобразователь дерева узлов. Вся магия происходит с помощью плагинов.
Причина популярности PostCSS
PostCSS предоставляет несколько функций, которые улучшат ваш CSS и он действительно хорошо интегрируется с любым инструментом сборки.
Установка CLI PostCSS
Используя Yarn:
yarn global add postcss-cli
или npm:
npm install -g postcss-cli
Как только это будет сделано, команда postcss будет доступна в вашей командной строке.
Например, эта команда запускает плагин autoprefixer для CSS-файлов, содержащихся в папке css /, и сохраняет результат в файле main.css:
postcss --use autoprefixer -o main.css css/*.css
Дополнительная информация о CLI PostCSS здесь: https://github.com/postcss/postcss-cli.
Самые популярные плагины PostCSS
PostCSS предоставляет общий интерфейс для нескольких отличных инструментов для обработки CSS.
Вот некоторые из самых популярных плагинов, для представления о том, что можно делать с PostCSS.
Автопрефиксер
Autoprefixer анализирует ваш CSS и определяет, требуется ли для некоторых правил вендор префиксы.
Это делается в соответствии с данными Сaniuse, поэтому вам не нужно беспокоиться, если какой-то компонент нуждается в префиксе или если префиксы, которые вы используете, теперь не нужны, поскольку устарели.
Вы можете написать более чистый CSS.
Пример:
a {
display: flex;
}
компилируется в
a {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
Preset-env
Этот плагин — PostCSS Preset Env позволяет вам конвертировать современный CSS в то, что большинство браузеров может понять, определяя необходимые вам заполнения на основе ваших целевых браузеров или сред выполнения, используя cssdb.
- добавляет префиксы с помощью Autoprefixer (поэтому, если вы используете это, нет необходимости
использовать Autoprefixer напрямую)
- позволяет использовать [CSS-переменные](https://modx.ws/css-peremennyie)
- позволяет использовать вложенность, как в Sass
и [намного больше](http://cssnext.io/features/)!
CSS Модули
Модули CSS позволяют использовать модули CSS.
Модули CSS не являются частью стандарта CSS, но они представляют собой процесс сборки с использованием селекторов области действия.
csslint
Linting поможет вам написать правильный CSS и избежать ошибок или подводных камней. Плагин stylint позволяет накладывать CSS во время сборки.
cssnano
cssnano минимизирует ваш CSS и оптимизирует код, чтобы обеспечить наименьшее количество кода в продакшене.
Другие полезные плагины
В репозитории PostCSS GitHub есть полный список доступных плагинов.
Вот некоторые из тех, которые мне нравятся:
- [LostGrid](https://github.com/peterramsing/lost)
является сеточной системой PostCSS
- [postcss-sassy](https://github.com/andyjansson/postcss-sassy-mixins)
предоставляет Sass-подобные миксины
- [postcss-nested](https://github.com/postcss/postcss-nested)
предоставляет возможность использовать вложенные правила Sass
- [postcss-nested-ancestors](https://github.com/toomuchdesign/postcss-nested-ancestors),
ссылка на любой селектор предков во вложенном CSS
- [postcss-simple-vars](https://github.com/postcss/postcss-simple-vars),
используйте переменные, подобные Sass
- [PreCSS](https://github.com/jonathantneal/precss)
предоставляет вам множество возможностей Sass, и это то, что наиболее близко к полной замене
Sass.
Чем он отличается от Sass?
Или от любого другого CSS-препроцессора?
Основным преимуществом PostCSS по сравнению с CSS-препроцессорами, такими как Sass или Less, является возможность выбирать собственный путь и выбирать нужные функции, одновременно добавляя новые возможности. Sass или Less «зафиксированы», вы в комплекте с ними получаете множество функций, которые вы можете или не можете использовать, и вы не можете их расширить.
Тот факт, что вы «выбираете свой путь», означает, что вы все равно можете использовать любой другой инструмент, который вам нравится, помимо PostCSS. Вы по-прежнему можете использовать Sass, если это то, что вам нужно, и использовать PostCSS для выполнения других задач, которые Sass не может сделать, таких как автоприставка или линтирование.
Вы можете написать свой собственный плагин PostCSS, чтобы делать все, что вы хотите.