Википедия

PostCSS

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

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

Ссылки

править
Источник — https://ru.wiki.x.io/w/index.php?title=PostCSS&oldid=133139541