PostCSS - PostCSS

PostCSS
Философский камень, логотип PostCSS
Разработчики)Андрей Ситник, Бен Бриггс, Богдан Чадкин[1]
изначальный выпуск4 ноября 2013 г.; 7 лет назад (2013-11-04)
Стабильный выпуск
8.0.0, Президент Осе / 15 сентября 2020 г.; 2 месяца назад (2020-09-15)[2]
Репозиторийgithub.com/ postcss/ postcss
Написано вJavaScript
Операционная системаКроссплатформенность
Доступно ванглийский
ТипИнструмент разработки CSS
ЛицензияЛицензия MIT[3]
Интернет сайтpostcss.org

PostCSS это инструмент разработки программного обеспечения который использует JavaScript -основан плагины автоматизировать рутину CSS операции.[4] Его разработал Андрей Ситник, идея которого зародилась в его фронтенд-работе над Evil Martians.[5]

Функциональность

Рабочий процесс PostCSS

PostCSS - это рамки для разработки инструментов CSS.[6] Его можно использовать для разработки языка шаблонов, такого как Sass и LESS.[7]

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

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

PostCSS и его плагины написаны на JavaScript и распространяется через npm, которые предлагают API для низкоуровневых операций JavaScript.

Существуют официальные инструменты, позволяющие использовать PostCSS с системами сборки, такими как Webpack,[9] Глоток,[10] и Ворчание.[11] Также доступен консольный интерфейс.[12] Browserify или же Webpack можно использовать для открытия PostCSS в браузере.[13]

Синтаксис

PostCSS позволяет изменять парсер и генератор. В этом случае PostCSS можно использовать для работы с Меньше[14] и SCSS[15] источники. Однако PostCSS сам по себе не может скомпилировать Sass или Less в CSS. Он меняет исходные файлы, например, путем сортировки свойств CSS или проверки кода на наличие ошибок. PostCSS поддерживает SugarSS.

Плагины

Плагины PostCSS выполняют различные задачи обработки CSS, начиная от анализа и сортировки свойств до минификация.

Полный список плагинов можно найти на postcss.parts, а некоторые примеры приведены ниже.

  • Автоприставка для добавления и удаления префиксов браузера.[16]
  • Модули CSS чтобы изолировать селекторы CSS и упорядочить код. Поставляется в составе Webpack.[17][18]
  • stylelint к анализировать Код CSS на наличие ошибок и проверка согласованности стиля.[19]
  • stylefmt исправляет код CSS в соответствии с настройками stylelint.[20]
  • PreCSS выполнить некоторые Sass /Меньше функции предварительной обработки.[21]
  • postcss-preset-env для имитации функций из незаконченных черновиков спецификации CSS.[22]
  • cssnano чтобы уменьшить размер CSS, избавившись от пробелов и переписав код.[23]
  • RTLCSS изменить код CSS так, чтобы дизайн подходил для справа налево письменной форме (применяется в арабский и иврит ).[24]
  • postcss-активы, postcss-встроенный-svg и postcss-спрайты работать с графикой.[25][26][27]

История

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

14 марта 2013 года Андрей Ситник разработал интерфейс для Evil Martians и создал плагин на основе Rework - Autoprefixer.[30] Изначально название плагина было rework-vendors.[31]

По мере роста Autoprefixer Rework больше не мог удовлетворить его потребности.[32] 7 сентября 2013 г.,[33] Андрей Ситник приступил к разработке PostCSS на основе идей Rework.[34]

Через 3 месяца был выпущен первый плагин PostCSS, grunt-pixrem.[35] 22 декабря 2013 года Autoprefixer версии 1.0 перешел на PostCSS.[36]

Для PostCSS основное внимание уделяется стилю алхимия.[37] Логотип проекта представляет собой философский камень.[38] Основные и второстепенные версии PostCSS получают свои имена после Арс Гоэтия демоны.[39] Например, версия 1.0.0 называется Marquis Decarabia.

Термин «постпроцессор» вызвал некоторую путаницу.[40] Команда PostCSS использовала этот термин, чтобы показать, что PostCSS - это не язык шаблонов (препроцессор), а инструмент CSS. Однако некоторые разработчики считают, что термин «постпроцессор» лучше подходит для инструментов браузера (например, без префиксов).[41] Ситуация еще более осложнилась после выхода PreCSS. Теперь вместо постпроцессора команда PostCSS использует термин процессор.[42]

Рекомендации

  1. ^ Кто может выпустить PostCSS на npm
  2. ^ Релизы PostCSS
  3. ^ Лицензия в репозитории PostCSS
  4. ^ Первая статья о курсе PostCSS in Tuts +
  5. ^ Злые марсиане совершают коммит в репозитории PostCSS
  6. ^ Что такое обсуждение PostCSS
  7. ^ PostCSS Deep Dive: предварительная обработка с помощью PreCSS
  8. ^ Андрей Ситник - PostCSS: будущее после Sass и LESS
  9. ^ postcss-загрузчик
  10. ^ глоток-postcss
  11. ^ grunt-postcss
  12. ^ postcss-cli
  13. ^ Запуск postcss в браузере
  14. ^ postcss-без
  15. ^ postcss-scss
  16. ^ автопрефиксатор
  17. ^ css-модули
  18. ^ зависимости css-loader
  19. ^ stylelint
  20. ^ stylefmt
  21. ^ Precss
  22. ^ preset-env.cssdb.org
  23. ^ cssnano.co
  24. ^ rtlcss.com
  25. ^ postcss-активы
  26. ^ postcss-встроенный-svg
  27. ^ postcss-спрайты
  28. ^ Головайчук, Т.Дж. (01.09.2012). "Начальная фиксация · reworkcss / rework @ 0a7be25". GitHub. Получено 2019-07-21.
  29. ^ Головайчук, Т.Дж. (28.02.2013). «Модульная предварительная обработка CSS с доработкой - Т.Я. Головайчук». Tumblr. Архивировано из оригинал на 2014-09-18. Получено 2014-09-18.
  30. ^ Ситник, Андрей (14.03.2013). «Начальная фиксация · postcss / autoprefixer @ d36346e». GitHub. Получено 2019-07-21.
  31. ^ Ситник, Андрей (28.03.2013). "Переименовать проект в autoprefixer · postcss / autoprefixer @ 419a77d". GitHub. Получено 2019-07-21.
  32. ^ Галлахер, Николас (04.06.2014). «Облегчение потребности в автопрефиксе · Проблема №20 · reworkcss / css». GitHub. Получено 2019-07-21.
  33. ^ Ситник, Андрей (07.09.2013). «Инициировать проект · postcss / postcss @ 2d96cea». GitHub. Получено 2019-07-21.
  34. ^ Ситник, Андрей (07.09.2015). "Второй день рождения PostCSS - Марсианские хроники, блог команды злых марсиан". Марсианские хроники, блог команды злых марсиан. Получено 2019-07-21.
  35. ^ Роб, Вежбовски (14 декабря 2013 г.). "Начальная фиксация · robwierzbowski / grunt-pixrem @ 0f7b662". GitHub. Получено 2019-07-21.
  36. ^ [Ситник, Андрей (21.12.2013). "Релиз 1.0" Plus ultra "· postcss / autoprefixer". GitHub. Получено 2019-07-20.
  37. ^ Тисэтер, Маркус (31 декабря 2015 г.). «Мокап · Выпуск №4 · postcss / postcss.org». Получено 2019-07-21.
  38. ^ @PostCSS (14 августа 2015 г.). «Логотип PostCSS - это алхимический знак философского камня, который может превращать металлы в золото» (Твитнуть) - через Twitter.
  39. ^ @Autoprefixer (17.12.2013). "Кодовое название каждой версии PostCSS взято из списка демонов в книге по алхимии" Lemegeton Clavicula Salomonis"" (Твитнуть) - через Twitter.
  40. ^ Марохнич, Матия (07.09.2014). "Пре- и постобработка CSS | Блог Сильвенона". Блог Сильвенона. Архивировано из оригинал на 2017-11-09. Получено 2017-11-09.
  41. ^ Проблема с предварительной обработкой на основе будущих спецификаций
  42. ^ @PostCSS (28.07.2015). «Пора признать свои ошибки. Термин« постпроцессор »был плохим. Команда PostCSS перестала его использовать» (Твитнуть) - через Twitter.

внешняя ссылка