Введение в PostCSS

Вступление

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

https://preset-env.cssdb.org/
Этот плагин — PostCSS Preset Env позволяет вам конвертировать современный CSS в то, что большинство браузеров может понять, определяя необходимые вам заполнения на основе ваших целевых браузеров или сред выполнения, используя cssdb.

• добавляет префиксы с помощью Autoprefixer (поэтому, если вы используете это, нет необходимости использовать Autoprefixer напрямую)
• позволяет использовать CSS-переменные
• позволяет использовать вложенность, как в Sass
  и намного больше!

CSS Модули

Модули CSS позволяют использовать модули CSS.

Модули CSS не являются частью стандарта CSS, но они представляют собой процесс сборки с использованием селекторов области действия.

csslint

Linting поможет вам написать правильный CSS и избежать ошибок или подводных камней. Плагин stylint позволяет накладывать CSS во время сборки.

cssnano

cssnano минимизирует ваш CSS и оптимизирует код, чтобы обеспечить наименьшее количество кода в продакшене.

Другие полезные плагины

В репозитории PostCSS GitHub есть полный список доступных плагинов.

Вот некоторые из тех, которые мне нравятся:

• LostGrid является сеточной системой PostCSS
• postcss-sassy предоставляет Sass-подобные миксины
• postcss-nested предоставляет возможность использовать вложенные правила Sass
• postcss-nested-ancestors, ссылка на любой селектор предков во вложенном CSS
• postcss-simple-vars, используйте переменные, подобные Sass
• PreCSS предоставляет вам множество возможностей Sass, и это то, что наиболее близко к полной замене Sass.

Чем он отличается от Sass?

Или от любого другого CSS-препроцессора?

Основным преимуществом PostCSS по сравнению с CSS-препроцессорами, такими как Sass или Less, является возможность выбирать собственный путь и выбирать нужные функции, одновременно добавляя новые возможности. Sass или Less «зафиксированы», вы в комплекте с ними получаете множество функций, которые вы можете или не можете использовать, и вы не можете их расширить.

Тот факт, что вы «выбираете свой путь», означает, что вы все равно можете использовать любой другой инструмент, который вам нравится, помимо PostCSS. Вы по-прежнему можете использовать Sass, если это то, что вам нужно, и использовать PostCSS для выполнения других задач, которые Sass не может сделать, таких как автоприставка или линтирование.

Вы можете написать свой собственный плагин PostCSS, чтобы делать все, что вы хотите.