ПостCSS
 | |
| Разработчик(и) | Andrey Sitnik, Ben Briggs, Bogdan Chadkin |
|---|---|
| Первоначальный выпуск | 4 ноября 2013 г |
| Стабильная версия | 8.4.40 [1]  / 24 июля 2024 г |
| Репозиторий | постcss |
| Написано в | JavaScript |
| Операционная система | Кросс-платформенный |
| Доступно в | Английский |
| Тип | инструмент разработки CSS |
| Лицензия | МОЯ лицензия [2] |
| Веб-сайт | постcss |
PostCSS — это инструмент разработки программного обеспечения , который использует JavaScript на основе плагины для автоматизации рутинных CSS . операций [3] Его разработал Андрей Ситник, идея которого зародилась в его работе над интерфейсом Evil Martians. [4]
Функциональность
[ редактировать ]
PostCSS — это платформа для разработки инструментов CSS. [5] Его можно использовать для разработки языка шаблонов, такого как Sass и LESS. [6]
Ядро PostCSS состоит из: [7]
- CSS- парсер , генерирующий абстрактное синтаксическое дерево.
- Набор классов, составляющих дерево
- Генератор CSS , который генерирует строку CSS для дерева объектов.
- Генератор карты кода для внесенных изменений CSS
Функции доступны через плагины. Плагины — это небольшие программы, работающие с деревом объектов . После того как ядро преобразует строку CSS в дерево объектов, плагины анализируют и изменяют дерево. Затем PostCSS генерирует новую строку CSS для дерева, измененного плагином.
PostCSS и его плагины написаны на JavaScript и распространяются через npm , который предлагает API для низкоуровневых операций JavaScript.
Существуют официальные инструменты, позволяющие использовать PostCSS с такими системами сборки, как Webpack , [8] Глоток , [9] и Грант . [10] Также доступен консольный интерфейс. [11] Browserify или Webpack можно использовать для открытия PostCSS в браузере. [12]
Синтаксис
[ редактировать ]PostCSS позволяет менять парсер и генератор. В этом случае PostCSS можно использовать для работы с Less. [13] и СКСС [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 была предложена Т. Дж. Головайчуком 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. Однако некоторые разработчики считают, что термин постпроцессор лучше подходит для инструментов браузера (например, -prefix-free). [41] Ситуация еще больше усложнилась после выхода PreCSS. Теперь вместо постпроцессора команда PostCSS использует термин «процессор». [42]
Ссылки
[ редактировать ]- ^ «Выпуск 8.4.40» . 24 июля 2024 г. Проверено 25 июля 2024 г.
- ^ «postcss/LICENSE в основном · postcss/postcss» . Гитхаб . 24 сентября 2013 г. Проверено 19 марта 2021 г.
- ^ Брейси, Кезз (23 сентября 2015 г.). «Глубокое погружение в PostCSS: что вам нужно знать» . Энвато Тутс+ . Проверено 19 марта 2021 г.
- ^ Ситник, Андрей (13 декабря 2014 г.). «Добавить значок «Злые марсиане» · postcss/postcss@513f9c1» . Гитхаб . Проверено 19 марта 2021 г.
- ^ уМаксмаксимус; Ситник, Андрей (04 августа 2016 г.). «Зачем нам PostCSS, если у нас есть Webpack o_O? · Проблема № 861 · postcss/postcss» . Гитхаб . Проверено 19 марта 2021 г.
- ^ Брейси, Кезз (21 октября 2015 г.). «Глубокое погружение в PostCSS: предварительная обработка с помощью «PreCSS» » . Гитхаб . Проверено 19 марта 2021 г.
- ^ Ситник, Андрей (24 июня 2015 г.). Андрей Ситник — PostCSS: Будущее после Sass и LESS — YouTube . Ютуб (Видео). ООО Бокуп . Проверено 19 марта 2021 г.
- ^ вебпак-вклад (03.10.2014). «webpack-contrib/postcss-loader: загрузчик PostCSS для веб-пакета» . Гитхаб . Проверено 19 марта 2021 г.
- ^ Кузьмин, Андрей (17 августа 2014 г.). «postcss/gulp-postcss: передача CSS через процессоры PostCSS с помощью одного синтаксического анализа» . Гитхаб . Проверено 19 марта 2021 г.
- ^ Никитенко, Дмитрий (25 сентября 2014 г.). «nDmitry/grunt-postcss: примените несколько постпроцессоров к вашему CSS с помощью PostCSS» . Гитхаб . Проверено 19 марта 2021 г.
- ^ Кшеминский, Дамиан; Циммерман, Райан; Цинявский, Майкл (11 марта 2015 г.). «postcss/postcss-cli: CLI для postcss» . Гитхаб . Проверено 19 марта 2021 г.
- ^ Ниемеля, Матиас (23 сентября 2016 г.). «Запуск postcss в браузере · Проблема № 830 · postcss/postcss» . Гитхаб . Проверено 19 марта 2021 г.
- ^ Пауэлл, Эндрю (26 января 2016 г.). «shellscape/postcss-less: Синтаксис PostCSS для анализа LESS» . Гитхаб . Проверено 19 марта 2021 г.
- ^ Ситник, Эндрю (9 августа 2015 г.). «postcss/postcss-scss: парсер SCSS для PostCSS» . Гитхаб . Проверено 19 марта 2021 г.
- ^ Ситник, Эндрю (4 января 2016 г.). «postcss/sugarss: синтаксис CSS на основе отступов для PostCSS» . Гитхаб . Проверено 20 марта 2021 г.
- ^ «postcss/autoprefixer: анализируйте CSS и добавляйте вендорные префиксы к правилам с помощью «Могу ли я использовать»» . Гитхаб . Проверено 19 марта 2021 г.
- ^ «css-modules/css-modules: Документация о css-модулях» . Гитхаб . Проверено 19 марта 2021 г.
- ^ «css-loader/package.json по адресу 5a003e00645d2ed0b3e759db06f58a08fbdd6745 · webpack-contrib/css-loader» . Гитхаб . 15 августа 2016 г. Проверено 19 марта 2021 г.
- ^ "стильлинт/стильлинт" . Гитхаб . Проверено 19 марта 2021 г.
- ^ «morishitter/stylefmt: stylefmt — это инструмент, который автоматически форматирует таблицы стилей» . Гитхаб . Проверено 19 марта 2021 г.
- ^ «jonathantneal/precss: используйте разметку в стиле Sass в своем CSS» . Гитхаб . Проверено 19 марта 2021 г.
- ^ «csstools/postcss-preset-env: конвертируйте современный CSS в то, что понимают браузеры» . Гитхаб . Проверено 19 марта 2021 г.
- ^ «cssnano/cssnano: модульный минификатор, построенный на основе экосистемы PostCSS» . Гитхаб . Проверено 19 марта 2021 г.
- ^ «MohammadYounes/rtlcss: Платформа для преобразования каскадных таблиц стилей (CSS) из направления слева направо (LTR) в письмо справа налево (RTL)» . Гитхаб . Проверено 19 марта 2021 г.
- ^ «borodean/postcss-assets: менеджер ресурсов для PostCSS» . Гитхаб . Проверено 19 марта 2021 г.
- ^ «TrySound/postcss-inline-svg: плагин PostCSS для ссылки на файл SVG и управления его атрибутами с помощью синтаксиса CSS» . Гитхаб . Проверено 19 марта 2021 г.
- ^ «2createStudio/postcss-sprites: генерировать спрайты из таблиц стилей» . Гитхаб . Проверено 19 марта 2021 г.
- ^ Головайчук, Т.Дж. (1 сентября 2012 г.). «Первоначальная фиксация · reworkcss/rework@0a7be25» . Гитхаб . Проверено 21 июля 2019 г.
- ^ Головайчук, Т.Дж. (28 февраля 2013 г.). «Модульная предварительная обработка CSS с доработкой — Ти Джей Холовайчук» . Тамблер . Архивировано из оригинала 18 сентября 2014 г. Проверено 18 сентября 2014 г.
- ^ Ситник, Андрей (14 марта 2013 г.). «Первоначальная фиксация · postcss/autoprefixer@d36346e» . Гитхаб . Проверено 21 июля 2019 г.
- ^ Ситник, Андрей (28 марта 2013 г.). «Переименуйте проект в autoprefixer · postcss/autoprefixer@419a77d» . Гитхаб . Проверено 21 июля 2019 г.
- ^ Галлахер, Николас (4 июня 2014 г.). «Облегчение потребностей в автопрефиксере · Проблема № 20 · reworkcss/css» . Гитхаб . Проверено 21 июля 2019 г.
- ^ Ситник, Андрей (07.09.2013). «Инициализировать проект · postcss/postcss@2d96cea» . Гитхаб . Проверено 21 июля 2019 г.
- ^ Ситник, Андрей (07.09.2015). «Второй день рождения PostCSS — Марсианские хроники, блог команды Evil Martians» . Марсианские хроники, блог команды Evil Marsians . Проверено 21 июля 2019 г.
- ^ Роб, Вежбовски (14 декабря 2013 г.). «Первоначальная фиксация · robwierzbowski/grunt-pixrem@0f7b662» . Гитхаб . Проверено 21 июля 2019 г.
- ^ [ Ситник, Андрей (21 декабря 2013 г.). «Релиз 1.0 «Плюс ультра» · postcss/autoprefixer» . Гитхаб . Проверено 20 июля 2019 г.
- ^ Тисатер, Маркус (31 декабря 2015 г.). «Макет · Выпуск № 4 · postcss/postcss.org» . Гитхаб . Проверено 21 июля 2019 г.
- ^ @PostCSS (14 августа 2015 г.). «Логотип PostCSS — это алхимический знак философского камня, который может превращать металлы в золото» ( Tweet ) — через Twitter .
- ^ @Autoprefixer (17 декабря 2013 г.). «Кодовое имя каждой версии PostCSS взято из списка демонов в книге по алхимии «Lemegeton Clavicula Salomonis» » ( Твит ) – через Twitter .
- ^ Марохнич, Матия (07 сентября 2014 г.). «Предварительная и постобработка CSS | Блог Сильвенона» . Блог Сильвенона . Архивировано из оригинала 09.11.2017 . Проверено 9 ноября 2017 г.
- ^ Проблема с предварительной обработкой на основе будущих спецификаций
- ^ @PostCSS (28 июля 2015 г.). «Пришло время признать мои ошибки. Термин «Постпроцессор» был плохим. Команда PostCSS перестала его использовать» ( Tweet ) – через Twitter .