PostCSS

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

PostCSS
Тип Автоматизация работы с CSS
Разработчики Андрей Ситник, Бэн Бриггс, Богдан Чадкин[1]
Написана на JavaScript
Операционная система Кроссплатформенная
Первый выпуск 4 ноября 2013[2]
Последняя версия 8.0.0 (Президент Осе) (15 сентября 2020[3])
Состояние активное
Лицензия Лицензия MIT[4]
Сайт postcss.org

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

Структура

Схема работы 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 написано более 300 расширений[25]. Расширения PostCSS могут решить большинство задач обработки CSS — от анализа и сортировки свойств до сжатия. При этом качество и популярность расширений сильно разнятся.

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

  • Автопрефиксер[26] — добавляет и чистит браузерные префиксы. Это самое популярное расширение для PostCSS — согласно оценке SitePoint[27], в марте 2016 им пользовалось 56% разработчиков.
  • CSS Modules[28] — автоматическая система изоляции CSS-селекторов и организации кода. Встроена в популярный сборщик Webpack[29].
  • Stylelint[30]анализирует CSS-код на предмет наличия в нем ошибок, а также следования принятому стилю. Используется в Википедии[7], Facebook[8] и GitHub[10]. Другое расширение stylefmt[31] исправляет CSS-код согласно настройкам Stylelint.
  • PreCSS[32] — набор расширений, которые повторяют часть функций препроцессоров типа Sass или LESS.
  • postcss-preset-env[33] — набор расширений для эмуляции функций из незаконченных черновиков CSS-спецификаций.
  • cssnano[34] — уменьшает размер CSS-кода, убирая пробелы и переписывая код в сжатой форме. Используется в Webpack, BBC и JSFiddle[35].
  • RTLCSS[36] — изменяет CSS-код так, чтобы дизайн подходил для письма справа налево (как в арабском и иврите). Используется в WordPress[37].
  • postcss-assets[38], postcss-inline-svg[39] и postcss-sprites[40] для работы с графикой.

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

Критика

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

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

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

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

  • Функциональность. Многие расширения 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].

История

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

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

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

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

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

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

Примечания

  1. Разработчики, которые могут выкладывать версии PostCSS в npm
  2. Коммит обновления версии PostCSS до 0.1
  3. Выпуски PostCSS
  4. Лицензия в репозитории PostCSS
  5. Первая статья курса по PostCSS от Tuts+
  6. Изменение, добавляющее PostCSS в систему сборку портала Википедии
  7. Wikimedia Stylelint Config
  8. Improving CSS quality at Facebook and beyond
  9. Настройки PostCSS в системе сборки GitHub Архивировано 23 августа 2016 года.
  10. Primer Stylelint Config
  11. Сравнения количества загрузок препроцессоров
  12. Добавление спонсора в описание проекта
  13. Обсуждение, что такое PostCSS
  14. PostCSS Deep Dive: Preprocessing with “PreCSS”
  15. Andrey Sitnik - PostCSS: The Future After Sass and LESS
  16. postcss-loader
  17. gulp-postcss
  18. grunt-postcss
  19. postcss-cli
  20. Running postcss in the browser
  21. postcss-less
  22. postcss-scss
  23. Oleh Aloshkin. A Sass parser for PostCSS, using gonzales-pe. https://www.npmjs.com/package/postcss-sass. — 2018-01-25.
  24. sugarss
  25. Список расширений PostCSS
  26. autoprefixer
  27. The Results of The Ultimate CSS Survey
  28. css-modules
  29. Зависимости css-loader
  30. Stylelint
  31. stylefmt
  32. precss
  33. preset-env.cssdb.org
  34. cssnano.co
  35. Список пользователей cssnano
  36. rtlcss.com
  37. RTL CSS generation: Switch from CSSJanus to RTLCSS
  38. postcss-assets
  39. postcss-inline-svg
  40. postcss-sprites
  41. Встроенные расширения в Webpack
  42. The Trouble With Preprocessing Based on Future Specs
  43. Set Up Your Build Tools (недоступная ссылка). Дата обращения: 20 августа 2016. Архивировано 14 апреля 2020 года.
  44. An Introduction To PostCSS
  45. Extending Sass with PostCSS
  46. Breaking up with Sass: it’s not you, it’s me
  47. Обсуждение SugarSS на форуме Meteor
  48. Используем PostCSS правильно | FrontTalks 2015
  49. PostCSS Mythbusting: Four PostCSS Myths Busted
  50. Using PostCSS Together with Sass, Stylus, or LESS
  51. Stylelint — Как и зачем линтить CSS
  52. Обсуждение производительности PostCSS в Твиттере
  53. PostCSS – Sass Killer or Preprocessing Pretender?
  54. PostCSS parsers benchmark
  55. PostCSS preprocessors benchmark
  56. PostCSS becomes 1.5x faster
  57. The Sad State of Web Development Архивировано 25 сентября 2016 года.
  58. Статистика загрузок postcss-use
  59. Integrate value & selector parsing into PostCSS core
  60. Event based API
  61. Первый коммит в Rework
  62. Modular CSS preprocessing with rework Архивировано 18 сентября 2014 года.
  63. Первый коммит Автопрефиксера
  64. Коммит переименования проекта в Автопрефиксер
  65. Facilitate autoprefixer needs
  66. Первый коммит в PostCSS
  67. PostCSS Second Birthday
  68. Первый коммит в grunt-pixrem
  69. Autoprefixer release 1.0 “Plus ultra”
  70. Обсуждение дизайна сайта PostCSS
  71. Твит про логотип PostCSS
  72. Твит про версии PostCSS
  73. CSS pre- vs. post-processing Архивировано 27 августа 2016 года.
  74. Андрей Ситник: «Будущее за CSS постпроцессорами!»
  75. Твит про отказ от термина постпроцессор

Ссылки

This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.