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

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

Функциональность [ править ]

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

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

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

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

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

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

Синтаксисы [ править ]

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

Плагины [ править ]

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

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

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

История [ править ]

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

14 марта 2013 года работа Андрея Ситника по интерфейсу для Evil Martians привела к созданию Autoprefixer, плагина на основе Rework. [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 получили свои имена в честь демонов Ars Goetia . [39] Например, версия 1.0.0 называется Marquis Decarabia.

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

Ссылки [ править ]

  1. ^ "Выпуск 8.2.8 · postcss / postcss" . GitHub . 2021-03-09 . Проверено 19 марта 2021 .
  2. ^ "postcss / ЛИЦЕНЗИЯ на главном · postcss / postcss" . GitHub . 2013-09-24 . Проверено 19 марта 2021 .
  3. ^ Брейси, Кезз (2015-09-23). «Глубокое погружение в PostCSS: что вам нужно знать» . Envato Tuts + . Проверено 19 марта 2021 .
  4. ↑ Ситник, Андрей (13 декабря 2014). «Добавить значок Злых марсиан · postcss / postcss @ 513f9c1» . GitHub . Проверено 19 марта 2021 года - через GitHub.
  5. ^ uMaxmaxmaximus; Ситник, Андрей (04.08.2016). «Зачем нам нужен PostCSS, если у нас есть Webpack o_O? · Проблема № 861 · postcss / postcss» . GitHub . Проверено 19 марта 2021 года - через GitHub.
  6. ^ Bracey, Kezz (2015-10-21). «PostCSS Deep Dive: предварительная обработка с помощью« PreCSS » » . GitHub . Проверено 19 марта 2021 года - через GitHub.
  7. ^ Ситник, Андрей (2015-06-24). Андрей Ситник - PostCSS: будущее после Sass и LESS - YouTube . YouTube (Видеозапись). BocoupLLC . Проверено 19 марта 2021 .
  8. ^ webpack-contrib (03.10.2014). "webpack-contrib / postcss-loader: загрузчик PostCSS для webpack" . GitHub . Проверено 19 марта 2021 года - через GitHub.
  9. ^ Кузьмин, Андрей (2014-08-17). «postcss / gulp-postcss: конвейер CSS через процессоры PostCSS с помощью одного синтаксического анализа» . GitHub . Проверено 19 марта 2021 года - через GitHub.
  10. ↑ Никитенко, Дмитрий (25 сентября 2014 г.). «nDmitry / grunt-postcss: примените несколько постпроцессоров к вашему CSS с помощью PostCSS» . GitHub . Проверено 19 марта 2021 года - через GitHub.
  11. ^ Krzeminski, Дамиан; Циммерман, Райан; Ciniawsky, Майкл (2015-03-11). "postcss / postcss-cli: интерфейс командной строки для postcss" . GitHub . Проверено 19 марта 2021 года - через GitHub.
  12. ^ Niemelä, Матиас (2016-09-23). «Запуск postcss в браузере. · Проблема № 830 · postcss / postcss» . GitHub . Проверено 19 марта 2021 года - через GitHub.
  13. ^ Пауэлл, Эндрю (2016-01-26). "shellscape / postcss-less: синтаксис PostCSS для МЕНЬШЕГО синтаксического анализа" . GitHub . Проверено 19 марта 2021 года - через GitHub.
  14. ^ Ситник, Эндрю (2015-08-09). "postcss / postcss-scss: парсер SCSS для PostCSS" . GitHub . Проверено 19 марта 2021 года - через GitHub.
  15. ^ Ситник, Андрей (2016-01-04). "postcss / sugarss: CSS-синтаксис на основе отступов для PostCSS" . GitHub . Проверено 20 марта 2021 года - через GitHub.
  16. ^ «postcss / autoprefixer: проанализируйте CSS и добавьте префиксы поставщиков в правила с помощью« Могу ли я использовать » . GitHub . Проверено 19 марта 2021 года - через GitHub.
  17. ^ "css-modules / css-modules: Документация по css-модулям" . GitHub . Проверено 19 марта 2021 года - через GitHub.
  18. ^ "css-loader / package.json в 5a003e00645d2ed0b3e759db06f58a08fbdd6745 · webpack-contrib / css-loader" . GitHub . 2016-08-15 . Проверено 19 марта 2021 года - через GitHub.
  19. ^ "stylelint / stylelint" . GitHub . Проверено 19 марта 2021 года - через GitHub.
  20. ^ "morishitter / stylefmt: stylefmt - это инструмент, который автоматически форматирует таблицы стилей" . GitHub . Проверено 19 марта 2021 года - через GitHub.
  21. ^ "jonathantneal / precss: Используйте Sass-подобную разметку в вашем CSS" . GitHub . Проверено 19 марта 2021 года - через GitHub.
  22. ^ "csstools / postcss-preset-env: преобразовать современный CSS в то, что понимают браузеры" . GitHub . Проверено 19 марта 2021 года - через GitHub.
  23. ^ «cssnano / cssnano: модульный минификатор, созданный на основе экосистемы PostCSS» . GitHub . Проверено 19 марта 2021 года - через GitHub.
  24. ^ "MohammadYounes / rtlcss: Платформа для преобразования каскадных таблиц стилей (CSS) слева направо (LTR) в справа налево (RTL)" . GitHub . Проверено 19 марта 2021 года - через GitHub.
  25. ^ "borodean / postcss-assets: менеджер активов для PostCSS" . GitHub . Проверено 19 марта 2021 года - через GitHub.
  26. ^ "TrySound / postcss-inline-svg: плагин PostCSS для ссылки на файл SVG и управления его атрибутами с помощью синтаксиса CSS" . GitHub . Проверено 19 марта 2021 года - через GitHub.
  27. ^ «2createStudio / postcss-sprites: Создание спрайтов из таблиц стилей» . GitHub . Проверено 19 марта 2021 года - через GitHub.
  28. ^ Holowaychuk, TJ (2012-09-01). «Начальная фиксация · reworkcss / rework @ 0a7be25» . GitHub . Проверено 21 июля 2019 г. - через GitHub.
  29. ^ Holowaychuk, TJ (2013-02-28). «Модульная предобработка CSS с доработкой - Т.Я. Головайчук» . Tumblr . Архивировано из оригинала на 2014-09-18 . Проверено 18 сентября 2014 .
  30. ↑ Ситник, Андрей (14 марта 2013 г.). «Начальная фиксация · postcss / autoprefixer @ d36346e» . GitHub . Проверено 21 июля 2019 г. - через GitHub.
  31. ↑ Ситник, Андрей (28 марта 2013). «Переименовать проект в autoprefixer · postcss / autoprefixer @ 419a77d» . GitHub . Проверено 21 июля 2019 г. - через GitHub.
  32. ^ Галлахер, Николас (2014-06-04). «Облегчить необходимость автопрефикса. · Проблема №20 · reworkcss / css» . GitHub . Проверено 21 июля 2019 г. - через GitHub.
  33. ^ Ситник, Андрей (2013-09-07). «Инициировать проект · postcss / postcss @ 2d96cea» . GitHub . Проверено 21 июля 2019 г. - через GitHub.
  34. ^ Ситник, Андрей (2015-09-07). «Второй день рождения PostCSS - марсианские хроники, блог команды злых марсиан» . Марсианские хроники, блог команды злых марсиан . Проверено 21 июля 2019 .
  35. ^ Роб, Вежбовски (2013-12-14). «Начальная фиксация · robwierzbowski / grunt-pixrem @ 0f7b662» . GitHub . Проверено 21 июля 2019 г. - через GitHub.
  36. ^ [ Ситник, Андрей (21.12.2013). "Релиз 1.0" Plus ultra "· postcss / autoprefixer" . GitHub . Проверено 20 июля 2019 г. - через GitHub.
  37. ^ Tisäter, Marcus (2015-12-31). «Мокап · Выпуск №4 · postcss / postcss.org» . Проверено 21 июля 2019 .
  38. ^ @PostCSS (14.08.2015). «Логотип PostCSS - это алхимический знак философского камня, который может превращать металлы в золото» (твит) - через Twitter .
  39. ^ @Autoprefixer (17 декабря 2013 г.). «Кодовое название каждой версии PostCSS взято из списка демонов в книге по алхимии« Lemegeton Clavicula Salomonis » » (твит) - через Твиттер .
  40. ^ Marohnić, Матия (2014-09-07). «Пре- и постобработка CSS | Блог Сильвенона» . Блог Сильвенона . Архивировано из оригинала на 2017-11-09 . Проверено 9 ноября 2017 .
  41. ^ Проблема с предварительной обработкой на основе будущих спецификаций
  42. ^ @PostCSS (28.07.2015). «Пора признать свои ошибки. Термин« постпроцессор »был плохим. Команда PostCSS перестала его использовать» (Tweet) - через Twitter .

Внешние ссылки [ править ]

  • Официальный веб-сайт