Краткое руководство по PostCSS: Обзор плагинов

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

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

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

Поиск плагинов

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

Страница PostCSS на Github

Главная страница PostCSS в репозитории Github на данный момент содержит наиболее полный категорированный список плагинов. Этот список довольно часто обновляется, а потому это место является довольно надежным вариантом для того, чтобы просматривать доступные плагины для различных аспектов разработки.

Сайт-каталог postcss.parts

Относительно новым и очень толковым дополнением в мире PostCSS стал сайт postcss.parts, который предлагает каталог плагинов PostCSS с возможностью поиска.

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

Виды плагинов

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

Пакеты

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

С другой стороны, иногда хочется объединить огромный список функциональных возможностей в одном проекте, чтобы не приходилось по отдельности устанавливать и настраивать двадцать разных плагинов. В таком случае пригодятся \"пакеты\". Пакеты объединяют несколько модульных плагинов по одной тематике, позволяя их устанавливать и развертывать одновременно.

Например, в пакете PreCSS сочетаются девять отдельных плагинов PostCSS для создания функционала вроде Sass. В пакете cssnano используется около двадцати плагинов PostCSS для минимизации и оптимизации CSS. Используя эти пакеты, вы экономите время на ручную установку и загрузку каждого из этих плагинов.

Синтаксис CSS будущего

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

Например, возможно, вы захотите использовать будущую возможность восьми- или четырехразрядного шестнадцатеричного обозначения для создания непрозрачных цветов. Чтобы сгенерировать слегка прозрачный синий цвет, можно использовать код цвета вроде #0000ffcc, или его сокращенный вариант #00fc, и запустить плагин postcss-color-hex-alpha, чтобы конвертировать его в повсеместно поддерживаемый формат rgba(0, 0, 100%, 0.8).

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

Запасные варианты

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

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

Например, у вас могут быть однородные цвета, добавленные в качестве запасных вариантов для цветов rgba() с помощью плагина postcss-color-rgba, или вы можете добавить запасные варианты, совместимые с IE8, для opacity через плагин postcss-opacity. Наиболее известным среди этих плагинов является Autoprefixer, который при необходимости добавляет префиксы поставщика, основанные на данных из CanIUse.com.

Расширения языка

Плагины расширений языка добавляют в CSS функциональные возможности, которых в ином случае быть не должно. Для сравнения, можно считать, что большинство препроцессоров полностью состоят из расширений языка. По факту, пользователи Sass, Stylus и LESS будут чувствовать себя как дома со многими расширениями языка PostCSS, такими, как добавление примесей, переменных, условных конструкций, цепочек, вложенных элементов, расширений и пр.

Несмотря на то, что PostCSS полностью гибкий, существуют также расширения языка, предлагающие функциональные возможности, которых в препроцессорах, как правило, нет. Например, плагин postcss-bem добавляет синтаксис специально для создания CSS, соблюдающего методологию BEM / SUIT (больше об этом в следующих уроках). Плагин postcss-define-property позволяет вам создавать собственные пользовательские свойства или переназначать родные свойства. А плагин postcss-match позволяет использовать в коде не только условные конструкции, но и шаблонную логику.

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

Продолжение следует

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