Большинство людей в настоящее время используют препроцессоры CSS, которые могут быть сложными в использовании, и есть две проблемы с этими препроцессорами. Первая проблема заключается в том, что он уже находится в одном пакете, а это означает, что если вы хотите добавить больше, вам придется добавить больше, и вам придется хранить все в пакете, что может увеличить ненужную сложность проекта. Вторая проблема заключается в том, что он на самом деле не соответствует стандарту CSS, что означает, что он несовместим со стандартом W3C, поэтому его нельзя использовать в качестве полифиллов (код, который реализует функцию в веб-браузере, который не поддерживает эту функцию). И вот решение ограничения препроцессора, PostCSS.

Что такое PostCSS на самом деле? «PostCSS — это инструмент для преобразования стилей с помощью подключаемых модулей JS. Эти плагины могут анализировать ваш CSS, поддерживать переменные и миксины, транспилировать будущий синтаксис CSS, встроенные изображения и многое другое».

Короче говоря, PostCSS не изменяет ваш CSS, а вместо этого предоставляет механизм для изменения кода CSS. Таким образом, когда создается плагин для изменения кода CSS, он может изменить этот код. Таким образом, на самом деле это мощный инструмент для внесения изменений в код CSS.

Основная структура PostCSS

  • Парсер CSS, генерирующий дерево объектов (AST) для строки CSS-кода;
  • Набор классов, составляющих дерево;
  • Генератор CSS, формирующий строку CSS для дерева объектов;
  • Генератор карты кода для внесенных изменений CSS.

Итак, как это на самом деле исправить эти проблемы?

Первую проблему можно решить тем, что каждый из плагинов устанавливается отдельно, и вы даже можете создать свой собственный плагин, чтобы у вас был весь функционал, который вам действительно нужен, а это значит, что ваш код может быть максимально компактным и понятным. на самом деле не так уж и сложно создать плагин в PostCSS. Вторая проблема может быть решена, поскольку PostCSS можно использовать для полифилла реальной функции W3C, поскольку существует множество плагинов, которые нацелены на реализацию функций из новых спецификаций W3C. Это позволит вам писать код, соответствующий стандартам и, вероятно, совместимый с будущими версиями CSS.

Для PostCSS доступно более 300 плагинов, и вот четыре самых популярных плагина PostCSS:

  • Autoprefixer для добавления и удаления префиксов браузера. Это самый популярный плагин PostCSS. По данным опроса SitePoint, в марте 2016 года 56% респондентов использовали Autoprefixer.
  • stylelint для анализа CSS-кода на наличие ошибок и проверки единообразия стилей. Его используют Википедия, Facebook и GitHub. Другой плагин, stylefmt, исправляет код CSS в соответствии с настройками stylelint.
  • PreCSS для выполнения некоторых функций предварительной обработки Sass/Less.
  • postcss-cssnext для имитации функций из незавершенных черновиков спецификации CSS. Используется Википедией.

Тем не менее, это не обходится без недостатков. У PostCSS есть три основных недостатка:

  • Сложность настройки. Некоторые разработчики стараются не выбирать плагины и настраивать их для совместной работы. Готовые наборы плагинов — лишь частичное решение проблемы.
  • Нестандартный синтаксис. Поскольку в каждом проекте используется собственный набор подключаемых модулей, новый разработчик может не понять, что неизвестная функция связана с непопулярным подключаемым модулем PostCSS. Рекомендуется указывать файловые плагины с postcss-использованием, но некоторые считают это ненужным.
  • Селекторы и значения, использующие отдельные синтаксические анализаторы. PostCSS сохраняет селекторы CSS и значения свойств в виде строк без их дальнейшего анализа. Для их анализа плагинам приходится использовать дополнительные парсеры. Команда PostCSS собирается исправить это в будущих версиях.
  • Последовательная обработка. Поскольку дерево объектов может реагировать только на один подключаемый модуль за раз, наличие нескольких подключаемых модулей может привести к снижению производительности. Кроме того, есть функции, которые не может обработать ни один плагин. Команда PostCSS собирается исправить это в будущих версиях.

Начало работы с PostCSS:

Репозиторий Github: https://github.com/postcss/postcss#usage

Документация: http://postcss.org/

Установка PostCSS

Перед установкой PostCSS убедитесь, что на вашем устройстве установлены node и npm, поскольку они устанавливаются через npm. Напишите эту команду в терминале, чтобы глобально установить PostCSS на свой компьютер:

npm install -g postcss-cli

Вы можете получить помощь по работе с postCss с помощью этой команды:

postcss --help

Эта команда выдаст список параметров, которые принимает CLI. Его также можно найти в документации репозитория PostCSS.

Запуск PostCSS

После установки PostCSS приступим к работе с ним на простом примере.

1. Создайте файл styles.css в папке вашего проекта и поместите в него код стилей. Например, создайте стиль для контейнера flexbox:

.flex-container {
    display: flex;
    width: 400px;
    height: 250px;
}

Flexbox требует префиксов поставщиков для запуска в определенных браузерах, обычно вам придется делать это вручную, но один из плагинов PostCSS, который является автопрефиксером, поможет автоматически добавлять префиксы для каждого префикса поставщиков.

2. Установите Autoprefixer с помощью этой команды для глобальной установки autoprefixer:

npm install -g autoprefixer

3. Войдите в папку вашего проекта и создайте каталог папки dist, чтобы содержать обработанный CSS. Затем запустите Autoprefixer с помощью этой команды:

postcss -u autoprefixer styles.css -d dist

По сути, он запускает автопрефиксеры в файле styles.css и помещает вывод процесса в файл dist/styles.css. Вот результат работы автопрефиксеров:

.container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 400px;
  height: 250px;
}

Теперь у вас есть файл styles.css, который уже содержит префикс для каждого поставщика.

Источник:

https://en.wikipedia.org/wiki/PostCSS

https://www.sitepoint.com/an-introduction-to-postcss/