PostCSS: новая дата игры Sass

В последнее время PostCSS — это инструмент, который широко используется во фронтенде веб-разработки.

PostCSS разработан Андреем Ситником, создателем Autoprefixer. Это пакет Node.js, разработанный как инструмент для преобразования всего вашего CSS с помощью JavaScript, благодаря чему достигается гораздо более быстрое время сборки, чем у других процессоров.

Несмотря на то, что, по-видимому, подразумевает его название, это не постпроцессор (и не препроцессор), а скорее транспилятор, преобразующий синтаксис, специфичный для PostCSS (или, если быть более точным, для плагина PostCSS) в Ванильный CSS.

При этом это не означает, что PostCSS и другие процессоры CSS не могут работать вместе. На самом деле, если вы новичок во всем мире предварительной/постобработки CSS, использование PostCSS вместе с Sass может избавить вас от многих головных болей, о которых мы вскоре поговорим.

PostCSS не заменяет другие процессоры CSS; скорее смотрите на него как на еще один инструмент, который может пригодиться в случае необходимости, еще одно дополнение к вашему набору инструментов.

Использование PostCSS в последнее время начало экспоненциально расти, и сегодня его используют некоторые из крупнейших предприятий технологической отрасли, такие как Twitter, JetBrains и Wikipedia. Его широкое распространение и успех во многом обусловлены его модульностью.

Плагины, плагины, плагины

PostCSS — это все о плагинах.

Он позволяет вам выбирать плагины, которые вы будете использовать, отбрасывая ненужные зависимости и предоставляя вам быструю и легкую настройку для работы с основными характеристиками других препроцессоров. Кроме того, это позволяет вам создавать более настраиваемую структуру для вашего рабочего процесса, сохраняя при этом его эффективность.

На момент написания этого поста в PostCSS имеется репозиторий из более чем 200 плагинов, каждый из которых отвечает за разные задачи. В репозитории PostCSS на GitHub плагины классифицируются по категориям «Решение глобальных проблем CSS», «Используйте CSS будущего уже сегодня», «Улучшение читаемости CSS», «Изображения и шрифты», «Линтеры» и «Другие».

Однако в каталоге плагинов вы найдете более точную классификацию. Советую вам заглянуть туда самостоятельно, чтобы лучше понять возможности некоторых из них; они довольно широкие и довольно внушительные.

Вы, наверное, слышали о самом популярном плагине PostCSS, Autoprefixer, который является популярной автономной библиотекой. Вторым по популярности плагином является CSSNext, плагин, который позволяет вам использовать новейший на сегодняшний день синтаксис CSS, например, новые пользовательские свойства CSS, не беспокоясь о поддержке браузера.

Однако не все плагины PostCSS настолько новаторские. Некоторые просто предоставляют вам возможности, которые, вероятно, поставляются из коробки с другими процессорами. Возьмем, к примеру, parent selector . С Sass вы можете начать использовать его сразу после установки Sass. С PostCSS вам нужно использовать postcss-nested-ancestors . То же самое может относиться к extends или mixins .

Итак, в чем преимущество использования PostCSS и его плагинов? Ответ прост — вы можете сами выбирать битвы. Если вы чувствуете, что единственная часть Sass, которую вы когда-либо будете использовать, — это parent selector , вы можете избавить себя от необходимости реализовывать что-то вроде установки библиотеки Sass в своей среде для компиляции вашего CSS и ускорить процесс с помощью только PostCSS и postcss-nested-ancestors .

Это всего лишь один пример использования PostCSS, но как только вы начнете проверять его самостоятельно, вы, несомненно, поймете много других вариантов его использования.

Базовое использование PostCSS

Во-первых, давайте рассмотрим некоторые основы PostCSS и посмотрим, как он обычно используется. Хотя PostCSS чрезвычайно эффективен при использовании с исполнителем задач, таким как Gulp или Grunt, его также можно использовать непосредственно из командной строки с помощью postcss-cli.

Рассмотрим простой пример использования. Предположим, мы хотим использовать плагин postcss-color-rgba-fallback, чтобы добавить резервное шестнадцатеричное значение ко всем нашим цветам в формате RGBA.

После того, как мы установили postcss , postcss-cli и postcss-color-rgba-fallback , нам нужно выполнить следующую команду:

 postcss --use postcss-color-rgba-fallback -o src/css/all.css dist/css/all.css

С помощью этой инструкции мы говорим PostCSS использовать postcss-color-rgba-fallback , обрабатывать любой CSS внутри src/css/all.css и выводить его в dist/css/all.css .

Хорошо, это было легко. Теперь давайте рассмотрим более сложный пример.

Использование PostCSS вместе с таск-раннерами и Sass

PostCSS можно довольно легко включить в ваш рабочий процесс. Как уже упоминалось, он отлично интегрируется с такими исполнителями задач, как Grunt, Gulp или Webpack, и его даже можно использовать со сценариями NPM. Пример использования PostCSS вместе с Sass и Gulp так же прост, как следующий фрагмент кода:

 var gulp = require('gulp'), concatcss = require('gulp-concat-css'), sass = require('gulp-sass'), postcss = require('gulp-postcss'), cssnext = require('postcss-cssnext'); gulp.task('stylesheets', function () { return ( gulp.src('./src/css/**/*.scss') .pipe(sass.sync().on('error', sass.logError)) .pipe(concatcss('all.css')) .pipe(postcss([ cssNext() ])) .pipe(gulp.dest('./dist/css')) ) });

Давайте разберем приведенный выше пример кода.

Он хранит ссылки на все необходимые модули (Gulp, Contact CSS, Sass, PostCSS и CSSNext) в наборе переменных.

Затем он регистрирует новую задачу Gulp под названием stylesheets . Эта задача отслеживает файлы в ./src/css/ с расширением .scss (независимо от того, насколько глубоко они находятся в структуре подкаталогов), Sass компилирует их и объединяет все в один файл all.css .

После создания файла all.css он передается в PostCSS для переноса всего кода, связанного с PostCSS (и плагинами), в фактический CSS, а затем полученный файл помещается в ./dist/css .

Итак, установка PostCSS с помощью средства запуска задач и препроцессора — это здорово, но достаточно ли этого, чтобы в первую очередь оправдать работу с PostCSS?

Скажем так: несмотря на то, что Sass является стабильным, зрелым и за ним стоит огромное сообщество, мы можем захотеть использовать PostCSS для таких плагинов, как, например, Autoprefixer. Да, мы могли бы использовать автономную библиотеку Autoprefixer, но преимущества использования Autoprefixer в качестве плагина PostCSS заключаются в возможности позже добавить дополнительные плагины в рабочий процесс и избежать посторонних зависимостей от множества библиотек JavaScript.

Этот подход также позволяет нам использовать свойства без префикса и добавлять к ним префикс на основе значений, полученных из API, например, из Can I Use, что вряд ли достижимо с использованием одного только Sass. Это очень полезно, если мы пытаемся избежать сложных примесей , которые могут быть не лучшим способом префикса кода.

Самый распространенный способ интегрировать PostCSS в ваш текущий рабочий процесс, если вы уже используете Sass, — передать скомпилированный вывод вашего .sass или .scss через PostCSS и его плагины. Это создаст еще один файл CSS, который имеет вывод как Sass, так и PostCSS.

Если вы используете средство запуска задач, использовать PostCSS так же просто, как добавить его в конвейер задач, которые у вас есть, сразу после компиляции .sass или .scss (или файлов выбранного вами препроцессора).

PostCSS хорошо сочетается с другими и может облегчить некоторые основные болевые точки, с которыми мы, разработчики, сталкиваемся каждый день.

Давайте посмотрим на другой пример совместной работы PostCSS (и нескольких плагинов, таких как CSSNext и Autoprefixer) и Sass. У вас может быть следующий код:

 :root { $sass-variable: #000; --custom-property: #fff; } body { background: $sass-variable; color: var(--custom-property); &:hover { transform: scale(.75); } }

Этот фрагмент кода имеет ванильный синтаксис CSS и Sass. Пользовательские свойства на момент написания этой статьи все еще находятся в статусе кандидата в рекомендации (CR), и здесь вступает в действие подключаемый модуль CSSNext для PostCSS.

Этот плагин будет отвечать за превращение таких вещей, как пользовательские свойства, в современный CSS. Нечто подобное произойдет и со свойством transform , которому будет автоматически добавлен префикс плагина Autoprefixer. Код, написанный ранее, приведет к чему-то вроде:

 body { background: #000; color: #fff; } body:hover { -webkit-transform: scale(.75); transform: scale(.75); }

Создание плагинов для PostCSS

Как упоминалось ранее, привлекательной особенностью PostCSS является уровень настройки, который он позволяет. Благодаря его открытости, создание собственного плагина для PostCSS, удовлетворяющего вашим конкретным потребностям, является довольно простой задачей, если вы умеете писать на JavaScript.

У людей из PostCSS есть довольно солидный список для начала, и если вы заинтересованы в разработке плагина, ознакомьтесь с их рекомендуемыми статьями и руководствами. Если вы чувствуете, что вам нужно что-то спросить или обсудить, лучше всего начать с Gitter.

У PostCSS есть свой API с довольно активной базой подписчиков в Twitter. Наряду с другими преимуществами сообщества, упомянутыми ранее в этом посте, это то, что делает процесс создания плагинов таким увлекательным и таким совместным.

Итак, чтобы создать плагин PostCSS, нам нужно создать модуль Node.js. (Обычно перед папками плагинов PostCSS в node_modules/ стоит префикс типа «postcss-», который указывает на то, что это модули, зависящие от PostCSS.)

Для начала в файле index.js нового модуля плагина нам нужно включить следующий код, который будет оберткой кода обработки плагина:

 var postcss = require('postcss'); module.exports = postcss.plugin('replacecolors', function replacecolors() { return function(css) { // Rest of code } });

Мы назвали плагин replacecolors . Плагин будет искать ключевое слово deepBlackText и заменять его значением цвета #2e2e2e HEX:

 var postcss = require('postcss'); module.exports = postcss.plugin('replacecolors', function replacecolors() { return function(css) { css.walkRules(function(rule) { rule.walkDecls(function(decl, i) { var declaration = decl.value; if (declaration.indexOf('deepBlackText') !== -1) { declaration = 'color: #2e2e2e;'; } }); }); } });

Предыдущий фрагмент просто сделал следующее:

1. Используя walkRules() , он прошел через все правила CSS, которые находятся в текущем файле .css , который мы просматриваем.
2. Используя walkDecls() , он прошел через все объявления CSS, которые находятся внутри текущего файла .css .
3. Затем он сохранил объявление внутри переменной объявления и проверил, есть ли в нем строка deepBlackText . Если да, то все объявление заменяется следующим объявлением CSS: color: #2e2e2e; .

Как только плагин будет готов, мы можем использовать его прямо из командной строки:

 postcss --use postcss-replacecolors -o src/css/all.css dist/css/all.css

Или, например, загрузить в Guplfile так:

 var replacecolors = require('postcss-replacecolors');

Должен ли я отказаться от моего текущего процессора CSS, чтобы использовать PostCSS?

Ну, это зависит от того, что вы ищете.

Обычно одновременно используются и Sass, и PostCSS, поскольку новичкам проще работать с некоторыми инструментами, которые пре-/постпроцессоры предлагают из коробки, а также с функциями плагинов PostCSS. Их совместное использование также позволяет избежать перестройки предопределенного рабочего процесса с относительно новыми и, скорее всего, неизвестными инструментами, обеспечивая при этом возможность поддерживать текущие реализации, зависящие от процессора (такие как миксины Sass , расширения , родительский селектор , селекторы- заполнители и т. д.). и так далее).

Дайте PostCSS шанс

PostCSS — это горячая (ну, вроде) новинка в мире фронтенд-разработки. Он получил широкое распространение, потому что сам по себе не является пре-/постпроцессором и достаточно гибок, чтобы адаптироваться к среде, в которую он вставляется.

Большая часть возможностей PostCSS заключается в его плагинах. Если вы ищете модульность, гибкость и разнообразие, то это правильный инструмент для работы.

Если вы используете таск-раннеры или упаковщики, то добавить PostCSS в ваш текущий поток, скорее всего, будет проще простого. Ознакомьтесь с руководством по установке и использованию, и вы, вероятно, найдете простой способ интегрировать его с инструментами, которые вы уже используете.

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