PostCSS — программа , которая автоматизирует рутинные операции с CSS с помощью расширений , написанных на языке JavaScript . Используется при разработке Википедии , Facebook и GitHub . Один из самых часто загружаемых с npm инструментов для работы с CSS . Разработана Андреем Ситником в компании «Злые марсиане» .

Принцип работы

Структура

В отличие от Sass и LESS , PostCSS не является языком шаблонов, компилируемых в CSS. PostCSS — платформа, на которой можно создать разные инструменты работы CSS . В частности, на PostCSS можно создать и язык шаблонов, такой как Sass и LESS .

Ядро PostCSS состоит из:

• парсера CSS , который генерирует дерево объектов ( AST ) из строки CSS-кода;
• набора классов , из которого состоит это дерево;
• генератора CSS , который генерирует строку CSS по дереву объектов;
• генератора карт кода для сделанных в CSS изменений.

Все полезные функции предоставляются расширениями — небольшими программами, которые работают с деревом объектов . После того, как ядро преобразует CSS-строку в дерево объектов, расширения по очереди анализируют и изменяют это дерево. Затем ядро PostCSS генерирует новую CSS-строку по дереву, которое было изменено расширениями.

Использование

И ядро, и расширения PostCSS написаны на языке JavaScript . Все они распространяются через систему npm .

PostCSS предоставляет API для низкоуровневой работы на языке JavaScript:

// Загружаем ядро и расширения из npm
const postcss = require('postcss')
const autoprefixer = require('autoprefixer')
const precss = require('precss')

// Указываем, какие расширения мы хотим использовать
const processor = postcss([autoprefixer, precss])

// Указываем CSS-код и имя входящего/исходящего файла
processor.process('a {}', { from: './app.css', to: './app.build.css' })
  // Используем Promise API на случай асинхронных расширений
  .then(result => {
    // Выводим CSS-код после обработки
    console.log(result.css)
    // Выводим предупреждения от расширений
    for ( let message of result.warnings() ) {
      console.warn(message.toString())
    }
  })

Существуют официальные инструменты для использования PostCSS с такими системами сборки, как Webpack , Gulp , Grunt . Отдельно поставляется консольный интерфейс . С помощью сборщика Browserify или Webpack, PostCSS может быть запущен в браузере .

Синтаксисы

Разработчик, использующий PostCSS, может сменить парсер и генератор — тогда PostCSS будет работать с такими исходниками как: LESS , SCSS , Sass . Но сам PostCSS не может компилировать LESS, SCSS или Sass в CSS, он лишь изменяет оригинальные исходные файлы — например, сортирует CSS-свойства или ищет ошибки в коде.

Также в нём можно использовать синтаксис SugarSS, вдохновлённый компактным синтаксисом Sass и Stylus .

Расширения

Для PostCSS написано более 300 расширений . Расширения PostCSS могут решить большинство задач обработки CSS — от анализа и сортировки свойств до сжатия. При этом качество и популярность расширений сильно разнятся.

Полный список расширений можно найти на . Несколько примеров:

• Автопрефиксер — добавляет и чистит браузерные префиксы. Это самое популярное расширение для PostCSS — согласно оценке , в марте 2016 им пользовалось 56% разработчиков.
• CSS Modules — автоматическая система изоляции CSS-селекторов и организации кода. Встроена в популярный сборщик Webpack .
• Stylelint — анализирует CSS-код на предмет наличия в нем ошибок, а также следования принятому стилю. Используется в Википедии , Facebook и GitHub . Другое расширение stylefmt исправляет CSS-код согласно настройкам Stylelint.
• PreCSS — набор расширений, которые повторяют часть функций препроцессоров типа Sass или LESS.
• postcss-preset-env — набор расширений для эмуляции функций из незаконченных черновиков CSS-спецификаций.
• cssnano — уменьшает размер CSS-кода, убирая пробелы и переписывая код в сжатой форме. Используется в Webpack, BBC и JSFiddle .
• RTLCSS — изменяет CSS-код так, чтобы дизайн подходил для письма справа налево (как в арабском и иврите ). Используется в WordPress .
• postcss-assets , postcss-inline-svg и postcss-sprites для работы с графикой.

Некоторые инструменты, не являясь расширениями PostCSS, используют PostCSS для своей работы. Например, популярный сборщик Webpack содержит PostCSS для работы с CSS .

Критика

Хотя отдельные расширения и подвергались критике , другие стали стандартом «де-факто». Например, Google рекомендует Автопрефиксер для решения проблемы браузерных префиксов в CSS .

В целом, PostCSS был тепло встречен индустрией . Даже разработчики Sass считают PostCSS хорошим дополнением к Sass .

Главный обсуждаемый вопрос — стоит ли сделать систему сборки CSS только на расширениях PostCSS. С одной стороны, расширения PreCSS или postcss-cssnext могут заменить многие функции Sass и LESS . Синтаксис SugarSS может заменить компактный синтаксис Sass и Stylus . Но с другой стороны, сам автор PostCSS не советует уходить от Sass и LESS в старых проектах .

Преимущества

• Функциональность. Многие расширения PostCSS не имеют аналогов . Поэтому PostCSS используется даже в тех проектах, где уже есть Sass или LESS .
• Унификация. Расширения PostCSS позволяют решать практически все задачи сборки CSS — от поиска ошибок в коде до сжатия. В итоге все инструменты для CSS могут использовать один парсер, единую архитектуру и общие инструменты разработки. Все расширения будут использовать единожды разобранное дерево объектов, что положительно сказывается на производительности .
• Модульность. Каждый пользователь сам выбирает расширения PostCSS и может отключить ненужные расширения ради производительности . Поскольку для решения одних и тех же проблем существуют разные расширения, пользователь может выбрать наиболее подходящие ему инструменты . Автор PostCSS считает, что конкуренция расширений стимулирует их развитие .
• Скорость работы. PostCSS обладает одним из самых быстрых парсеров CSS, среди написанных на JS . На базовых задачах препроцессора он может работать в 20 раз быстрее Ruby Sass и в 4 раза быстрее LESS . Но реальная производительность сильно зависит от количества расширений. Даже сами авторы PostCSS замечают, что современные препроцессоры и так работают слишком быстро, и ускорение часто будет не видно .

Недостатки

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

История

Впервые идея модульного инструмента для CSS была предложена TJ Holowaychuk 1 сентября 2012 в проекте Rework . 28 февраля 2013 TJ рассказал о ней публично .

14 марта 2013 Андрей Ситник в компании «Злые марсиане» сделал расширение Автопрефиксер на базе Rework . Изначально расширение даже называлось «rework-vendors» .

При росте Автопрефиксера были обнаружены проблемы в реализации Rework . Поэтому 7 сентября 2013 Андрей Ситник начал разработку PostCSS на основе идей Rework .

Через 3 месяца вышел первый плагин для PostCSS — grunt-pixrem . 22 декабря 2013 в версии 1.0 Автопрефиксер перешёл на PostCSS.

PostCSS активно использует тему алхимии в своей символике . Логотипом проекта является знак философского камня . Мажорные и минорные версии PostCSS получают имена демонов «Гоетии» . Например, имя версии 1.0.0 — «Маркиз Декарабиа».

Определённые проблемы возникли с термином «постпроцессор» . Команда PostCSS использовала этот термин, чтобы показать, что PostCSS не является языком шаблонов (препроцессором), а работает с CSS . Но другие разработчики считают, что термин «постпроцессор» лучше подходит для инструментов, которые работают в браузере (например, ). Выпуск расширения PreCSS окончательно усложнил ситуацию. Теперь команда PostCSS использует термин «процессор», вместо «постпроцессор» .

Примечания

Ссылки

• (англ.)
• на сайте GitHub
• в социальной сети « ВКонтакте »
• (англ.) в « Твиттере »
• для PostCSS