От автора: могу поспорить, что когда вы думаете о PostCSS CSS, вам приходит на ум что-то типа…
Дни с момента выхода последнего JavaScript фреймворка. Регулярные обновления по поводу того, сколько дней прошло с момента выхода JavaScript фреймворка или библиотеки dayssincelastjavascriptframework.com. Но правда в том, что PostCSS существует практически так же долго, как и React!
Почему PostCSS?
Самый распространённый вид использования PostCSS – это полная интеграция с Autoprefixer (Просто один из многих PostCSS плагинов. Сам по себе не является библиотекой.)
|
1 2 3 4 5 6 |
display: flex; // становится display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; |
Написать такую логику вне более традиционных SASS / LESS миксинов и автоматически сделать её частью приложения – это же гениально.
Это действительно круто звучит и остаётся основной причиной того, что этот плагин, по данным NPM, скачивается 11,103,982 раз в месяц.
Очевидно, что отрасль нуждается в идеях, которые предлагает PostCSS. Один лишь плагин PostCSS скачивают больше, чем самые популярные JavaScript фреймворки / библиотеки… Можете проверить эту информацию на NPM. PostCSS не связан с другими фреймворками / библиотеками. Это Front-End инструмент.
Babel для CSS
PostCSS с плагинами, или лучше сказать с набором плагинов, можно использовать точно так же, как мы используем Babel в JavaScript.
CSSnext – это набор плагинов, которые среди других элементов могут трансформировать пользовательские свойства CSS в те, которые могут интерпретировать браузеры. Альтернативой CSSnext (которая лучше поддерживается) является postcss-preset-env…
|
1 2 3 4 5 6 7 |
:root { --fontSize: 1rem; } h1 { font-size: var(--fontSize); } |
Он, очевидно, не будет работать в большинстве браузеров, но с помощью PostCSS, его можно преобразовать.
|
1 2 3 |
h1 { font-size: 1rem; } |
PostCSS – это «всего лишь» парсер для CSS. Это значит, что с его API, он может сделать всё возможное. Stylelint основан на PostCSS! Ознакомьтесь с этим восхитительным инструментом CSS здесь.
В чём суть PostCSS?
Странно, но суть PostCSS заключается не в CSS, а в том, что JavaScript может сделать с CSS. Давайте сделаем простое преобразование единственного свойства display: flex в множественные определения для конкретного браузера.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
// требуем, чтобы postcss работал для нашего плагина const postcss = require('postcss'); // экспортируем плагин module.exports = postcss.plugin('postcss-flex', (opts) => { opts = opts || {}; return (css) => { // определяем новые значения const values = [ '-webkit-box', '-webkit-flex', '-ms-flexbox', ]; // проводим итерацию через объявления css.walkDecls('display', decl => { // игнорирование всего прочего, кроме flex if (decl.value !== 'flex') return; // сопоставляем значения с актуальной строкой const newDecls = values.map((value) => { return ` display: ${value}`; }).join(';'); // добавляем новые объявления перед текущими decl.before(newDecls); }); }; }); |
В сущности, PostCSS воспринимает источник CSS (или SASS / LESS) как вводные данные, даёт вам возможность изменять их и выдаёт конечный результат. Проще некуда.
Больше подробностей по поводу PostCSS API можно узнать здесь. Но помните, что документация автоматически генерируются из JSdoc (Если кто-нибудь когда-нибудь спросит у вас, зачем вам использовать JSdocs, просто скажите ему — PostCSS API docs). Хоть они и познавательные, ИМХО лучше бы они были написаны вручную.
Тематическое оформление
Если для поддержки вашей темы требуются разные палитры, вместе с другими переменными, которые нужно адаптировать, например, размеры шрифтов, или радиус границ, или… Одним из самых лёгких способов добиться этого является раздельное отображение переменных, например, цветов, радиуса страниц… в файле темы.
Для этого сценария мы можем задать @import только для файла темы по умолчанию и переместить import в конкретный файл темы во время создания, посредством PostCSS. В результате этого мы сможем легко создать тематические наборы CSS и никогда не добавлять ссылки на них в базу кода SASS.
|
1 2 3 4 |
@import './variables'; .button--color-primary { background-color: $primary; } |
Где variables.scss имеют такой маппинг.
|
1 2 |
@import '~styles/colors/colors'; $primary: $green; |
variables.blue.scss темы имеют различный маппинг.
|
1 2 |
@import '~styles/colors/colors'; $primary: $blue; |
Сам по себе SASS не поддерживает динамические импорты (импорты с переменными в их пути). Проблема #279 на Github SASS. Так что такие действия практически невозможны, если вы используете SASS. По крайней мере, без PostCSS…
PostCSS плагин для рерайта пути переменных в @importwww.npmjs.com
Этот маленький плагин является только одним примером креативного использования PostCSS. Как это работает?
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* пример вариантов const opts = { originalValue: './variables', targetValue: './variables.blue' }; */ css.walkAtRules((node) => { const isImport = (node.name === 'import'); const isOriginalValue = node.params.includes(opts.originalValue); if (isImport && isOriginalValue) { node.params = `"${opts.targetValue}";`; } }); |
Забавный факт
Autoprefixer, возможно, устареет…
Автор: Develoger
Источник: //develoger.com/
Редакция: Команда webformyself.
