PostCSS

Схема работы PostCSS

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

Ядро PostCSS состоит из:[15]

• парсера 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[16], Gulp[17], Grunt[18]. Отдельно поставляется консольный интерфейс[19]. С помощью сборщика Browserify или Webpack, PostCSS может быть запущен в браузере[20].

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

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

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

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