7 PostCSS плагинов, которые помогут Вам изучить PostCSS


Содержание материала:

Что такое PostCSS?

PostCSS — процессор CSS. Преобразует исходный CSS в модифицированный CSS с помощью плагинов. Немного дезориентирует приставка -post. Нет, это не постпроцессор и, тем более, не препроцессор. Я бы назвал PostCSS трансформатором кода CSS. Он позволяет даже такой код

Перевести в такой:

Ядро PostCSS

Алгоритм работы ядра примерно такой:
Из CSS кода

Получаем JS объекты ввиде дерева.

Из которых обратно получаем CSS код

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

Где преобразования.

Всё делают подключаемые JavaScript плагины. В этом вся фишка, плагины подключаются на этапе JS объектов (ACT ), совершают некие преобразования, а затем ядро собирает CSS код. Плагины передают между собой по цепочке ACT .

Например плагин autoprefixer из примера выше может сделать так:

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

Важные плагины PostCSS

Автопрефиксер.
Самый известный PostCSS плагин. Добавляет вендорные префиксы к CSS правилам используя данные о популярности современных браузеров Can I Use. Можно явно указывать поддерживаемость браузеров, например ‘last 2 versions’, ‘ie 8’, ‘ie 9’

CSSNext
Cssnext – это транспайлер. Вы пишете код на CSS 4, который еще не утвержден в стандарт, а он компилируется в CSS 3 и работает. Когда CSS 4 станет стандартом, вы будете использовать свой код без этого транспайлера

CSSGrace
Cssgrace – это транспайлер)). Вы пишите код на нормальном CSS, а он компилируется в CSS для таких динозавров как IЕ6 или IЕ7.

  • LostGrid
    Умная система сеток. LostGrid использует CSS функцию calc(), чтобы вычислять размеры сетки, что позволяет максимально гибко и быстро создавать любые сетки.
  • Как сделать из PostCSS аналог препроцессора:

    Скорость работы PostCSS

    За счёт модульности PostCSS работает быстрее SASS, LESS, Stylus и других CSS процессоров.

    Похожие записи

    Отличные игры для знакомства с FlexBox и CssGr >

    Привет мир и всё остальные! Если вас интересует современная веб-разработка, а вы еще не знакомы с технологиями flexbox и cssgrid, то у меня есть для вас отличная новость.

    Пора всем узнать о PostCSS. Что это на самом деле? И для чего оно?

    Какое-то время назад, я писал: «Я очарован PostCSS, но я боюсь оставить Sass». С тех пор, я искренне «обнял» PostCSS (и оставил Sass, по крайней мере, временно). Я использую PostCSS для крупномасштабных проектов, способствую его развитию и создаю плагины, общаюсь с разработчиками, чтобы узнать больше о том, что еще возможно сделать при помощи PostCSS; и все пошло как по маслу. Просто как по маслу.

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

    У меня есть две точки зрения, и я хотел бы внести свой вклад в эту суматоху:

    1. Вы не должны бояться. Набор инструментов, чтобы обработать style-код, на самом деле довольно небольшой (или мне так кажется, потому что я также пишу JavaScript). Дополнительные возможности не повредят никому и ничему.
    2. Каждый, кто пишет CSS должен узнать, что такое PostCSS- что это на самом деле, и для чего оно может быть использовано (а не только то, что сказал холеричный, реактивный Твитер об этом) – прекращаете ли вы им пользоваться прямо сейчас. Потому что, если вы думаете, PostCSS просто альтернатива Sass и Less, вас дезинформировали.

    Я не знаю, что я могу сделать, чтобы похвалить # 1 … Какая-то смесь утешительных слов, или подбадривание, которое получают от тренера, легкий толчок, и перспективу? В этом случае, я, наверное, не лучший советчик.

    Так что я перейду к # 2, где я, может быть, буду в состоянии помочь. Поработав с PostCSS некоторое время, я думаю, что я узнал о нем то, чем стоит поделиться с остальными.

    Что мы имеем в виду, когда говорим «PostCSS»

    Слово «PostCSS» мы соответственно относим к двум вещам:

    1. Существует PostCSS, как инструмент – то, что вы получаете, когда вы запускаете npm install postcss – и
    2. Плагин экосистемы PostCSS, запускаемый этим инструментом.

    Сам инструмент относится к модулю Node.js, который разбирает CSS в абстрактное синтаксическое дерево (AST); прогоняет AST через любое количество функций плагина; и затем преобразует эту AST обратно в строку, которую вы можете вывести в файл. Каждая функция АSТ проходит через это, не важно, могут они преобразовать его или не могут; браузер Sourcemaps призван отслеживать любые изменения.

    АSТ обеспечивает простой API, который разработчики могут использовать для написания плагинов. Например, вы можете взять в круг каждый набор правил в файле с css.eachRule() , или каждое объявление в правило с rule.eachDecl() . Вы можете получить селектор правила с rule.selector или имя at-правила с atRule.name . Из этих немногих примеров можно увидеть, что API PostCSS облегчает работу с исходным кодом СSS (он гораздо проще и точнее даже самых обычных и простых слов).

    Вот и все, что в настоящее время делает PostCSS: он не меняет ваш CSS. Плагин может сделать это. PostCSS плагины могут сделать очень многое, все, что они хотят, с разобранным CSS. Один плагин может включить переменные, или какое-либо другое полезное расширение языка. Другой может изменить все ваши a to k. Другой может выводить предупреждение всякий раз, когда вы используете селектор ID. Еще один, может добавить масонское ASCII искусство в верхней части таблицы стилей. Следующий может сосчитать, сколько раз вы используете float описания. И так далее, непрерывно.

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

    Обратите внимание, что ни сам инструмент, ни плагин экосистемы не являются прямыми аналогами Sass и Less. Однако: объедините набор связанных плагинов, которые преобразуют дружелюбные автору стили в дружелюбный браузер CSS, и тогда у вас будет что-то аналогичное хорошему «препроцессору».

    Но, имейте в виду, что эти «пакеты плагинов» только дополнительные члены экосистемы, как и все неупакованные плагины. Ни один плагин или пакет плагинов не непредставляет собой “PostCSS”: вместо этого у нас есть растущая экосистема, состоящая из многих отдельных модулей (снабжаемая PostCSS).

    Несколько последствий модульности PostCSS

    Попытки утверждать, что PostCSS является (или должен быть) «постпроцессором», по сравнению с «препроцессорами» Sass и Less ошибочны.

    Независимо от ваших определений «постпроцессора» и «препроцессора», всегда будут PostCSS плагины, которые попадут в оба лагеря. Согласно большинству определений, Autoprefixer является знаковым «постпроцессором»; но есть также и такое, как postcss-each , который относится к «препроцессору».

    Есть также плагины, которые не преобразят ваш CSS вообще, как stylelint и postcss-bem-linter и list-selectors .

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

    Основываясь на этом…

    Попытки связать “PostCSS” с конкретными расширениями синтаксиса или преобразованиями являются ошибочными.

    PostCSS – это модуль низкого уровня, что облегчает создание других инструментов; и нет никаких ограничений на то, что инструменты более высокого уровня (плагины) могут делать.

    Так PostCSS не о том, чтобы позволить вам написать CSS Будущего (синтаксиса и функций из специальных проектов); это больше о том, чтобы обеспечить циклы и условности и другие Sass-подобные функции. Есть отдельные плагины, которые делают и то, и другое, а также пакеты плагинов ( cssnext и precss); но ни один из них, ни в какой степени не представляет собой PostCSS.

    Все это означает, что …

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

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

    Это приводит к следующей точке …

    Вы можете выбрать или отказаться от любого плагина PostCSS в любое время.

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

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

    Может быть вам, как и Крису Эппштейну, не нравится postcss-define-property – можно создать новые свойства, которые выглядят в точности как настоящие, стандартные свойства. Ну, есть очень простое решение для этого: придумать новые свойства, которые не выглядят в точности как настоящие, стандартные свойства.

    И если вы думаете, что плагин нуждается в примерах более понятных, или в новых опциях, вы можете внести свой ​​вклад, потому что …

    Плагины – это относительно небольшие модули, так что они должны легко реагировать на обратную связь и легко вносить свой ​​вклад.

    И если вы не находите плагин, который делает то, что вы хотите или то, как вы хотите…

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

    Это один из наиболее важных моментов. Его стоит повторить …

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

    Именно это делает PostCSS новым и фантастическим – легкость, с которой вы можете попробовать что-то совершенно другое.

    Или вы можете немного подправить то, что есть. Если какой-то плагин использует синтаксис, который вам нравится, но его функциональность вас не устраивает, создайте другой «продукт» на его базе с «правильной» функциональностью. Если какой-то другой плагин обеспечивает функциональность, которая вас устраивает, но синтаксис вызывает отвращение, создайте новый «продукт» с «правильным» синтаксисом. И когда люди видят, что вы сделали, и жалуются на ваш собственноручно сделанный плагин, вы всегда можете предложить им написать свой собственный.

    (Рискуя выглядеть смешно и напыщенно …) Я бы предложил многим дизайнерам и разработчикам веб-интерфейса, на самом деле узнать о возможностях PostCSS в сфере переработки CSS. Все, что функциональные возможности Sass и Less предоставляют – это не магия. Она не должна быть такой. Это только люди за занавесом, и хотя они могут быть умными и трудолюбивыми, вы не должны считать, что они знают лучше вас, что лучше в вашей ситуации.

    Решение проблем с PostCSS

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

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

    Думаю, это веселый и интересный процесс.

    Кроме того, я думаю, что это помогло мне упростить свой подход к CSS. Помните – хотя может показаться, что это было давно, – что многие разработчики в какой-то степени сопротивлялись принятию Sass и Less, потому что они были обеспокоены тем, что «препроцессоры» не решали достаточно хорошо реальные проблемы, чтобы оправдать трудности, которые они могли добавить автору. В действительности, я никогда не соглашался с этим (может быть, потому что, я никогда не возражал против небольших сложностей в процессе разработки); но я признаю критику и принимаю то, что, если вы не уверены, что проблемы решаются с помощью какого-либо инструмента, вы не должны чувствовать себя обязанными использовать этот инструмент.

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


    Вот и все

    Я собирался написать еще один раздел под названием “А теперь, на потеху, давайте рассмотрим некоторую непродуманную критику PostCSS.” Но я думаю, что эта статья уже достаточно длинная. И проницательный читатель уже поймет, как большинство моих опровержений будет выглядеть. Если у вас есть претензии, и вы хотели бы услышать опровержения, напишите мне в Твиттере @davidtheclark и я отвечу вам.

    PostCSS (часть 1): что за зверь такой?

    Тема препроцессоров в последние лет так 10 постепенно набирала обороты. Начиная с выхода Sass в 2006 и далее с появлением Less (2009) и Stylus (2011). В 2013-м же различные тематические ресурсы начала заполнять информация о неком PostCSS, разработанном «злым марсианином» Андреем Ситником. Что ж, давайте разберемся что это такое и научимся пользоваться данным очень популярным на данный момент инструментом.

    Его, кстати, используют (-ли) в Facebook, GitHub, Google, WordPress, Wikipedia, JetBrains, TaoBao, CodePen и других немаленьких проектах. Bootstrap 5, по словам разработчиков, тоже будет переведен на PostCSS.

    Если описать достаточно коротко, то PostCSS это конвейер с возможностью установки на него любого количества нужных инструментов в нужной последовательности. При этом, CSS трансформируется в JS-структуры и это позволяет на джаваскрипте же и писать все плагины для PostCSS. Так как все это пишется на NodeJS, то можно делать фактически все что угодно — производить транспиляцию между разными синтаксисами, сжимать картинки, добавлять вендорные префиксы, работать с переменными, миксинами и так далее и так далее. То есть как минимум делать то, что умеют существующие препроцессоры и плагины для сборщиков типа Gulp.

    При этом, чем одним конкретным PostCSS не является. Это не ПРЕпроцессор, не ПОСТпроцессор, не инструмент для оптимизации кода и файлов, а все это вместе и даже нечто больше того. Это комбайн, который мы можем комплектовать по своему желанию и по своим задачам. Для этого у PostCSS имеется целая экосистема плагинов, которые доступны на официальном сайте и удобно разбиты по подкатегориям:

    Что еще немаловажно, PostCSS работает быстрее своих ПРЕ-собратьев — в интернетах можно найти сравнительные тесты или попробовать потестить самому. А это становится очень актуальным, когда размер проекта растет, да и вообще, приятно же когда что-то работает быстрее ��

    Пусть у вас сбываются все «мЯчты» =)

    А еще, если вы достаточно подкованы в JS и Node, то можете под свою специфическую задачу написать «плагин своей мЯчты».

    А еще, PostCSS без проблем встраивается в любой современный сборщик: Grunt, Gulp, webpack, Broccoli, Brunch или ENB.

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

    PostCSS через визуальные инструменты

    CodePen.io

    Какое-то время назад я делал ролик, в котором подробнейшим образом рассказал обо всех возможностях данного «онлайн-редактора-кода». Рекомендую ознакомиться, если вы еще не в курсе про этот мега-удобный инструмент:

    Топ-пост этого месяца:  Биномо — вход на официальный сайт опционов, почему о нем такие отзывы и не развод ли это

    Сейчас же давайте разберемся как там можно писать с использованием PostCSS. На самом деле, это очень просто. Жмем на звездочку в секции CSS, далее в выпадающем списке «CSS Preprocessor» выбираем наш PostCSS и справа выше видим кнопку «Need an addon?». Перед нами появляется список всех доступных на CodePen PostCSS-плагинов. Делаем Add для нужных и закрываем настройки.

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

    Далее, пишем ниже для теста следующий код:

    Все вполне себе работает и фон изменился, а значит плагин работает безукоризненно. Вот небольшая GIF-инструкция (кликаем для увеличения):

    CodePen очень крутой инструмент! И поддерживает PostCSS.

    PrePros

    Не все хотят и умеют использовать консольные сборщики а-ля Gulp и Webpack. Для таких товарищей есть возможность заюзать визуальный кроссплатформенный (Win, Mac, Linux) инструмент PrePros.

    В нем все еще проще, но поддерживает он лишь PostCSS-плагины Autoprefixer и CSSnext. Перетаскиваем в PrePros папку с проектом, выделяем CSS-файл с исходниками и в правой части выбираем соответствующие опции. В конце задаем путь к итоговому скомпилированному файлу и вуаля — все работает.

    PrePros умеет компилировать очень многие штуки — поизучайте, потому что далеко не всем нужен тот же Gulp. PrePros хоть и надоедает выпадашкой с предложением купить продукт, но он все же всегда полнофункционален и быстр в настройке. В общем, выбирайте по своему вкусу и задачам.

    Вот так просто все происходит в PrePros.

    Настройка PostCSS под сборщик Gulp

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

    Чтобы Gulp запустился, необходимо чтобы у вас на компьютере стояли NodeJS и NPM (последний обычно ставится с самим Node). Для установки Node, идем на оф.сайт инсталлятор прямо на главной. В этой статье, я подразумеваю, что вы знаете что такое консоль (или терминал). На Windows, кстати, рекомендую поставить GitBash, чтобы работали команды из статьи.

    Итак, создаем где-нибудь папку с проектом. И в через терминал туда заходим (далее показываю команды в своем случае):

    Далее сгенерируем файл package.json через NPM и нажимаем Enter до тех пор, пока файл не будет создан:

    Далее нам нужно будет поставить Gulp, PostCSS и плагины к нему:

    После этого, ваше package.json должен выглядеть примерно вот так (версии и некоторые строки могут немного отличаться):

    После установки вы увидите, что в папке node_modules появилось много папок. Если так, то вы на верном пути!

    Далее, в папке с проектом создаем файл gulpfile.js:

    И внутри напишем следующий код:

    Не пугайтесь, тут ничего страшного нет. В начале мы подключаем переменными все то, что установили через NPM — Gulp, PostCSS и два плагина к нему. Autoprefixer расставляет автоматически вендорные префиксы (это которые -moz-, -o- и так далее), а PreCSS это аналог Sass, позволяющий использовать знакомые многим концепции препроцессинга — вложенность, переменные и т.п.

    Затем объявляем задачу styles в которой создаем массив plugins, перечисляя все нужные плагины. Причем если нужно как-то плагин сконфигурировать, то он передается не как переменная, а вызывается как функция с параметром в виде конфигурационного объекта (доступные опции нужно смотреть в документации к конкретному плагину). Так, мы сконфигурировали Аutoprefixer, а PreCSS оставили как есть.

    А в конце таска styles, мы используем галповские функции для того чтобы взять исходный файл с кодом который надо преобразовать (gulp.src), пропустить его через конвейер с плагинами (postcss(plugins)) и отправить в выходной файл результат (gulp.dest).

    После этого давайте создадим в папке src нашего проекта файл style.css и в нем напишем следующее:

    Теперь пора запустить нашу сборку:

    Вы должны будете в папке dist теперь увидеть скомпилированный style.css вот с таким содержанием:

    Видно, что автопрефиксер проставил как надо вендорные префиксы, а PreCSS умело обошелся с переменными и вложенностью. Ура!

    Заключение

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

    7 PostCSS плагинов, которые помогут Вам изучить PostCSS

    PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.

    PostCSS is used by industry leaders including Wikipedia, Twitter, Alibaba, and JetBrains. The Autoprefixer PostCSS plugin is one of the most popular CSS processors.

    PostCSS takes a CSS file and provides an API to analyze and modify its rules (by transforming them into an Abstract Syntax Tree). This API can then be used by plugins to do a lot of useful things, e.g. to find errors automatically insert vendor prefixes.

    Support / Discussion: Gitter
    Twitter account: @postcss
    VK.com page: postcss
    中文翻译: README-cn.md

    For PostCSS commercial support (consulting, improving the front-end culture of your company, PostCSS plugins), contact Evil Martians at surrender@evilmartians.com.

    Currently, PostCSS has more than 200 plugins. You can find all of the plugins in the plugins list or in the searchable catalog. Below is a list of our favorite plugins — the best demonstrations of what can be built on top of PostCSS.

    If you have any new ideas, PostCSS plugin development is really easy.

    Solve Global CSS Problem

    • postcss-use allows you to explicitly set PostCSS plugins within CSS and execute them only for the current file.
    • postcss-modules and react-css-modules automatically isolate selectors within components.
    • postcss-autoreset is an alternative to using a global reset that is better for isolatable components.
    • postcss-initial adds all: initial support, which resets all inherited styles.
    • cq-prolyfill adds container query support, allowing styles that respond to the w >

    Use Future CSS, Today

    • autoprefixer adds vendor prefixes, using data from Can I Use.
    • postcss-preset-env allows you to use future CSS features today.

    Better CSS Readability

    • precss contains plugins for Sass-like features, like variables, nesting, and mixins.
    • postcss-sorting sorts the content of rules and at-rules.
    • postcss-utilities includes the most commonly used shortcuts and helpers.
    • short adds and extends numerous shorthand properties.

    Images and Fonts

    • postcss-assets inserts image dimensions and inlines files.

    • postcss-sprites generates image sprites.
    • font-magician generates all the @font-face rules needed in CSS.
    • postcss-inline-svg allows you to inline SVG and customize its styles.
    • postcss-write-svg allows you to write simple SVG directly in your CSS.
    • stylelint is a modular stylesheet linter.
    • stylefmt is a tool that automatically formats CSS according stylelint rules.
    • doiuse lints CSS for browser support, using data from Can I Use.
    • colorguard helps you maintain a consistent color palette.
    • postcss-rtl combines both-directional (left-to-right and right-to-left) styles in one CSS file.
    • cssnano is a modular CSS minifier.
    • lost is a feature-rich calc() grid system.
    • rtlcss mirrors styles for right-to-left locales.

    PostCSS can transform styles in any syntax, not just CSS. If there is not yet support for your favorite syntax, you can write a parser and/or stringifier to extend PostCSS.

    • sugarss is a indent-based syntax like Sass or Stylus.
    • postcss-syntax switch syntax automatically by file extensions.
    • postcss-html parsing styles in tags of HTML-like files.
    • postcss-markdown parsing styles in code blocks of Markdown files.
    • postcss-jsx parsing CSS in template / object literals of source files.
    • postcss-styled parsing CSS in template literals of source files.
    • postcss-scss allows you to work with SCSS (but does not compile SCSS to CSS).
    • postcss-sass allows you to work with Sass (but does not compile Sass to CSS).
    • postcss-less allows you to work with Less (but does not compile LESS to CSS).
    • postcss-less-engine allows you to work with Less (and DOES compile LESS to CSS using true Less.js evaluation).
    • postcss-js allows you to write styles in JS or transform React Inline Styles, Radium or JSS.
    • postcss-safe-parser finds and fixes CSS syntax errors.
    • midas converts a CSS string to highlighted HTML.

    More articles and videos you can find on awesome-postcss list.

    • Mastering PostCSS for Web Design by Alex Libby, Packt. (June 2020)

    You can start using PostCSS in just two steps:

    1. Find and add PostCSS extensions for your build tool.
    2. Select plugins and add them to your PostCSS process.

    The best way to use PostCSS with CSS-in-JS is astroturf . Add its loader to your webpack.config.js :

    Then create postcss.config.js :

    Parcel has built-in PostCSS support. It already uses Autoprefixer and cssnano. If you want to change plugins, create postcss.config.js in project’s root:

    Parcel will even automatically install these plugins for you.

    Use postcss-loader in webpack.config.js :

    Then create postcss.config.js :

    To use PostCSS from your command-line interface or with npm scripts there is postcss-cli .

    If you want to compile CSS string in browser (for instance, in live edit tools like CodePen), just use Browserify or webpack. They will pack PostCSS and plugins files into a single file.

    To apply PostCSS plugins to React Inline Styles, JSS, Radium and other CSS-in-JS, you can use postcss-js and transforms style objects.

    • Grunt: grunt-postcss
    • HTML: posthtml-postcss
    • Stylus: poststylus
    • Rollup: rollup-plugin-postcss
    • Brunch: postcss-brunch
    • Broccoli: broccoli-postcss
    • Meteor: postcss
    • ENB: enb-postcss
    • Taskr: taskr-postcss
    • Start: start-postcss
    • Connect/Express: postcss-middleware

    For other environments, you can use the JS API:

    Read the PostCSS API documentation for more details about the JS API.

    All PostCSS runners should pass PostCSS Runner Guidelines.

    Most PostCSS runners accept two parameters:

    • An array of plugins.
    • An object of options.
    • syntax : an object providing a syntax parser and a stringifier.
    • parser : a special syntax parser (for example, SCSS).
    • stringifier : a special syntax output generator (for example, Midas).
    • map : source map options.
    • from : the input file name (most runners set it automatically).
    • to : the output file name (most runners set it automatically).

    Treat Warnings as Errors

    In some situations it might be helpful to fail the build on any warning from PostCSS or one of its plugins. This guarantees that no warnings go unnoticed, and helps to avoid bugs. While there is no option to enable treating warnings as errors, it can easily be done by adding postcss-fail-on-warn plugin in the end of PostCSS plugins:

    10 Awesome PostCSS Plugins to Make You a CSS Wizard

    PostCSS is an incredibly versatile tool that makes it possible to transform CSS styles with JavaScript plugins. Its flexibility lies in the way it’s built.

    The core part of PostCSS is a Node.js module that you can install with npm, and it has an ecosystem of more than 200 plugins you can choose to use in your project.

    PostCSS is neither a preprocessor, nor a postprocessor, as different PostCSS plugins may fall into either of these categories, or both of them; it depends entirely on you what you make of it. With PostCSS, you don’t need to learn a different syntax like in the case of Sass or LESS; you can immediately start to use it.

    PostCSS takes your existing CSS file and turns it into JavaScript-readable data, then the JavaScript plugins perform the modifications, and PostCSS returns the altered version of the original file. Sounds cool, doesn’t it?

    In this post we will take a look at 10 PostCSS plugins to give you an insight into some of the great things you can achieve with this awesome tool.

    1. Autoprefixer

    Autoprefixer is probably the most well-known PostCss plugin, as it’s used by notable tech companies such as Google, Twitter, and Shopify. It adds vendor prefixes to CSS rules where it’s necessary.

    Autoprefixer uses data from Can I Use. This way it doesn’t get dated, and can always apply the most recent rules. You can check out how it works on its interactive demo site.

    2. CSSnext

    CSSnext is a CSS transpiler that allows you to use future CSS syntax on current sites. W3C has many new CSS rules that aren’t currently implemented by browsers, but could enable developers to write more sophisticated CSS faster and easier. CSSnext has been made to bridge this gap.

    It’s worth to take a look at its features to see what you can accomplish with it, for example you can use custom media queries, custom selectors, colour modifiers, SVG filters, and new pseudoclasses in your designs.

    3. PreCSS

    PreCSS is one of the PstCSS plugins that work like a CSS preprocessor. It makes it possible to take advantage of a Sass-like markup in your sytlesheet files.

    By introducing PreCSS into your workflow you can use variables, if-else statements, for loops, mixins, @extend and @import rules, nesting, and many other handy features in your CSS code. PreCSS’s Github documentation gives you detailed instructions on how to make the most of it.

    4. StyleLint


    StyleLint is a modern CSS linter that proofreads and validates your CSS code. It makes it easy to avoid errors and pushes you to follow consistent coding conventions.

    StyleLint understands the latest CSS syntax, so it can be used along with the previously mentioned PreCSS plugin. It also allows you to make your own configuration, and even checks if your settings are valid.

    5. PostCSS Assets

    The PostCSS Assets plugin is a handy asset manager for your CSS files. It can be a great choice if you tend to have trouble with URL paths, as PostCSS Assets isolates your stylesheet files from environmental changes.

    You need to define load paths, relative paths, and a base path, and the plugin will automatically look up the assets you need. For example you can write the following code if you need the proper URL of the foobar.jpg image:

    PostCSS Assets also takes care of the assets cache, as you can set the cachebuster variable to true if you want URL paths to be automatically changed in case an asset is modified. This smart plugin also calculates the dimensions (width and height) of image files, or even resizes them using a preset ratio.

    6. CSSNano

    If you need optimized and minified CSS files for a production site, it’s worth to check out CSSNano. It’s a modular plugin that consists of many smaller, single-responsibility PostCSS plugins. It doesn’t only perform basic minification techniques such as removing whitespaces, but also has advanced options that make focused optimizations possible.

    Among many other features, CSSNano is capable of rebasing z-index values, reducing custom identifiers, converting length, time and colour values, and removing outdated vendor prefixes.

    7. Font Magician

    If you are a fan of sophisticated typography, you will surely like the Font Magician PostCSS plugin. The magic of Font Magician relies in its capability of automatically generating all the necessary @font-face rules.

    How it works is pretty straightforward, you only need to add the font-family: «My Fav Font»; CSS rule to an HTML element, and Font Magician does the rest of the work. It can add Google Fonts, the local copy of a font, Bootstrap typography, and can also load fonts asynchronously. Here’s its interactive demo site.

    8. Write SVG

    Have you ever wondered about how cool it would be to write SVG right into your CSS files? With the help of the Write SVG PostCSS plugin you can easily achieve this goal.

    This handy plugin, for example, makes it possible to store your SVG backgrounds and icons in your CSS file, and later add them to the relevant HTML element in the following way:

    9. Lost Grid

    Lost Grid is a great PostCSS plugin that provides you with an impressive CSS grid system that doesn’t only works with plain CSS but also with preprocessor languages (Sass, LESS, Stylus). It uses the calc() CSS function to create beautiful grids that you can easily use without spending too much time with customization.

    Lost Grid has pretty much straightforward rules, for example defining a column with 25% width doesn’t takes more than this little code snippet:

    Топ-пост этого месяца:  Перенос сайта WordPress на другой хостинг

    10. PostCSS Sprites

    The PostCSS Sprite plugin makes it easy to generate image sprites, i.e. collections of images placed into a single file. After setting a few options, the plugin takes the images from your stylesheet file, merges them into a sprite, then updates the image references wherever it’s necessary.

    You can use different filters and groupers to determine which images you want to put into the sprite, and you can set the dimensions of the output image as well.

    bot.kz — Новости IT

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

    Одним из относительно недавних инструментов, введенных для укладки является PostCSS 1 ,PostCSS стремится изобретать CSS с экосистемой пользовательских подключаемых модулей и инструментов.Работа с теми же принципами, такими как препроцессоров Sass и меньше, это преобразует расширенные синтаксиса и особенности в современной, браузера чистые CSS.

    Как, спросите вы?JavaScript .

    JavaScript имеет возможность трансформировать нашу стили гораздо быстрее, чем другие процессоры.Использование задача-Runner инструменты, как Глоток и Грунта, мы можем преобразования стилей через сборки process, Так же, как Sass и менее компиляции.Библиотеки и структуры, как реагировать и AngularJS позволяют писать CSS непосредственно в нашем JavaScript, открывая двери для преобразования JavaScript наших стилей .

    История Из PostCSS

    Разработано Андрей Sitnik 2 , Создатель Autoprefixer, PostCSS был запущен в качестве способа использовать JavaScript для обработки CSS.PostCSS по себе является просто API, который, при использовании его огромной экосистемы плагинов, предлагает мощные способности.Для обеспечения полезную отладки, карты источника генерируются и абстрактного синтаксического дерева (AST) существует, чтобы помочь нам понять, где и как код преобразуется .

    Потому PostCSS использует базу Node.js, способности к языку и инструменты могут быть легко изменены и настроены по мере необходимости.Другие инструменты, такие как Sass и менее ограничить возможности системы, чтобы методы, доступные, когда компилятор был написан .

    Благодаря использованию в API, PostCSS позволяет создавать пользовательские плагины и инструменты для любого featuresони могут понадобиться.Эта модульная конструкция платформы делает инструмент нейтральный, который, в свою очередь сосредотачивается особенности от требований проекта.PostCSS является независимым от языка формат и позволяет стиле синтаксиса различных препроцессорами, как Sass и менее, при необходимости .

    Преимущества мышления Modularly

    Большинство разработчиков редко начать проект с нуля.Многие начинают с шаблонного Сасс, который содержит переменные, Примеси и функции, которые будут использоваться в данном проекте.Мы будем иметь отдельный лист стиля для функций, Mixins, грид-систем и общих утилит для облегчения производства.В конце концов, мы в конечном итоге с 10 или более стилей, чтобы держать вещи организованных .

    Поддержание библиотеку Sass или менееsnippetsможет быть непосильной задачей, и может оставить проект раздутой.Многие проекты имеют неиспользованные Mixins и функции, включенные в “на всякий случай” кода.PostCSS позволяет легко устанавливаются, подключите и играть модули, что делает процесс более гибким развития для уникальных потребностей проекта .

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

    Примером этого власти является плагин PostCSS FontPath 4 3 ,С Sass, мы могли бы включать в себя подмешать в наших файлах, что позволяет для пользовательских веб-шрифтов;Таким образом, мы создали @font-face теги .

    Использование PostCSS FontPath 4 3 Плагин в нашем проекте, мы больше не должны включать Sass Mixins как один выше.Мы можем написать следующий код в нашем CSS, и PostCSS превратит его через Грунт или Глоток, в код, мы должны .

    На момент написания этого поста, более 100 плагинов сообщества в настоящее время доступны, которые позволяют для таких вещей, как синтаксических будущее CSS, ярлыки, инструментов и расширений языка.Это выходит за рамки “прохладной инструмент,” и в настоящее время насчитывает команду WordPress, Google и щебетать среди его пользовательской базы .

    Добавление PostCSS на Ваш Workflow

    Потому PostCSS написано в JavaScript, мы можем использовать бегунов задач, как Gulp 5 и Grunt 6 для преобразования CSS в наших проектах.Учебник ниже показывает, как включить PostCSS в рабочем процессе либо через Глоток или Грунта.Использование одного инструмента над другой не является решающим и это просто вопрос личных предпочтений или, что лучше для проекта .

    Примечание: Полная версия обоих версий глоток и ворчание инструмента является доступно на GitHub 7 ,Не стесняйтесь использовать его в качестве стартера шаблона и расширить на нем при необходимости .

    Настройка PostCSS С Gulp

    Если вы не знакомы с Глоток, я рекомендую чтения “Построение с Gulp 8 “По Каллум Macrae ввстать и работает с инструментом .

    Для установки модуля PostCSS в вашем проекте, выполните следующую команду в терминале: npm i gulp-postcss -D .

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

    Чтобы запустить задачу, тип gulp styles в командной строке .

    Настройка PostCSS С Grunt

    Примечание: Если вы не знакомы с Грантом, я рекомендую чтения “Get Up и Running With Grunt 9 “Майк Cunsolo, чтобы освоиться с инструментом .

    Для установки модуля PostCSS в вашем проекте, выполните следующую команду в терминале: npm i grunt-postcss -D .

    После того, как плагин установлен на вашей системе, включите его в Gruntfile и создать задачу, как показано ниже.Будьте уверены, чтобы обновить cwd и dest значения, чтобы отразить структуру вашего приложения .

    Чтобы запустить задачу, тип grunt styles в командной строке .

    Установка Plugins

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

    Список утвержденных PostCSS плагинов можно найти на PostCSS ‘GitHub page 10 и, как и все пакеты НПМ, плагины могут быть установлены с помощью командной строки.Многие плагины могут быть использованы только в качестве расширений PostCSS и агностик, чтобы бегун задач, которую вы используете.Для этого примера, мы будем устанавливать PostCSS Focus 11 Плагин, который будет добавить :focus в каждом государстве наведении .

    Со всеми плагинами в следующих примерах, мы должны использовать командную строку и НПМ устанавливать пакеты в наших проектах .

    PostCSS Плагин Пример Установка Link

    Плагины могут быть переданы в метод непосредственно;Однако, ради чистоты, мы можем построить массив и передать его в качестве аргумента.В массиве, мы можем включать необходимые require заявления, которые возвращают плагины и что затем вызывается сразу.Если вы хотели бы узнать больше об этой концепции, посмотрите через “Функции как первоклассная граждан в JavaScript 12 “Райан Christiani .

    Модифицированный код Грунт, с нашей вновь созданной processorArray массивы, ниже:

    А вот модифицированный код Глоток:

    Plugins

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

    “Подождите!CSS, файл? “Да, файл CSS.Потому PostCSS превращает нашу CSS, мы не должны использовать специализированную —просто традиционный CSS.Если вы знакомы с препроцессоров, то он может чувствовать себя неестественно оставить .sass .scss .styl или .less файлы за и вернуться к .css ,Но, на самом деле, это не превращение —это преобразование .

    Для обработки наши стили с нашими вновь установленных плагинов PostCSS, мы можем запустить наши бегунов задач с grunt styles и gulp styles , соответственно.Наш файл развитие CSS будут обрабатываться через плагин PostCSS и плагины условии, а затем будет выводиться на нашем указанный каталог продукции .

    Ниже приведены несколько плагинов, примечания, которые могут быть полезны, как вы начать с PostCSS.Включены инструкции по установке и использованию плагина .

    Autoprefixer

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

    Вот, как установить этот плагин с помощью командной строки:

    Когда мы добавляем плагин для нашего массива, мы можем предоставить объект, который содержит массив браузера объема, что проект нужно будет поддерживать.Список опций, которые могут быть предоставлены находится в Счетом Browserslist на GitHub 14 .

    Давайте добавим плагин Autoprefixer нашим процессоров:

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

    Вот CSS развитие:

    А вот трансформируется выход:

    Использование Будущие синтаксисы С CSSNext

    CSS4 скоро будет на нас, и с ним приходитфункции, такие как родной variables 15 , пользовательских СМИ queries 16 , пользовательских selectors 17 и новый псевдо-links 18 ,В то время как они еще не …

    4 мифа о PostCSS

    С самого начала PostCSS столкнулся с интересной проблемой. Люди не понимали что это и как его использовать. Чтобы завоевать внимание, PostCSS приходилось соперничать с уже привычными подходами Sass и Less. Это соперничество породило некоторые заблужения.


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

    Миф 1: PostCSS — это пре- или постпроцессор

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

    Когда PostCSS только вышел, его позиционировали как «постпроцессор». Большинство первых плагинов PostCSS брали обычный CSS и как-то его улучшали. Этот подход отличался от препроцессорного, при котором особый синтаксис компилируется в обычный CSS.

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

    Некоторые PostCSS-плагины берут особый синтаксис и переводят его в обычный CSS, как будто вы работаете с обычным препроцессором вроде Sass. В качестве примера можно привести postcss-nested, который позволяет писать вложенные селекторы, как это сделано в Sass и Less. Другие PostCSS-плагины берут обычный CSS и расширяют его, как, например, делает наиболее известный PostCSS-плагин — Автопрефиксер. Он автоматически добавляет браузерные префиксы в ваши стили.

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

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

    Так что можно развеять первый миф — PostCSS это ни пре-, ни постпроцессор. Это процессор CSS, который может обработать или проанализировать стили на различных этапах вашего рабочего процесса.

    Миф 2: PostCSS — альтернатива препроцессорам вроде Sass или Less

    Частое заблуждение среди разработчиков – попытка сравнить PostCSS с существующими препроцессорами, вроде Sass или Less.

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

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

    PostCSS подходит для парсинга как CSS, так и SCSS-синтаксиса (и Less, прим. переводчика), а это значит, что вы можете использовать PostCSS как до, так и после компиляции Sass. Например, на текущем проекте я использую PostCSS, чтобы прогнать свои Sass-файлы через Stylelint перед тем, как компилировать их в CSS. А после этого получившийся CSS расширяется плагинами вроде Автопрефиксера и postcss-assets, которые добавляют браузерные префиксы и встраивают графику через data URIs. Так что ваш рабочий процесс может выглядеть примерно так:

    В общем, то, как вы будете использовать PostCSS, зависит от вас. Хотите использовать его отдельным CSS обработчиком — пожалуйста. А если вас полностью устраивает Sass или Less, помните, что PostCSS также может работать бок о бок с этими инструментами, добавляя возможности, которые препроцессор делать не умеет.

    Миф 3: PostCSS сделает настройку сложной

    Я знаю, о чём вы сейчас думаете. Мир фронтенд-инструментов и так слишком обширен — зачем добавлять ещё один инструмент и делать процесс сборки более запутанным? Вопрос закономерный, но ответить на него вам нужно самостоятельно, в зависимости от проектов, над которыми вы работаете.

    Вы можете уже использовать PostCSS, сами того не зная. Если вы используете Автопрефиксер для добавления браузерных префиксов в CSS, то вы уже используете PostCSS. Автопрефиксер — это PostCSS-плагин, который можно добавить в обычные таск-раннеры вроде Grunt и Gulp через плагины grunt-postcss или gulp-postcss. Есть способы это сделать и для других инструментов, таких как webpack — подробности вы найдёте в документации PostCSS.

    Если вы раньше не использовали эти плагины для Автопрефиксера, самое время начать. Вы увидите, как просто можно подключить другие PostCSS-плагины. Например, если бы я использовал Автопрефиксер с Gulp, мой код выглядел бы так:

    10 PostCSS плагинов, которые сэкономят время вашему верстальщику 24.06.2020 15:05

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

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

    PostCSS vs SASS

    Ох… Видимо стоит сказать пару слов про это. Думаю сейчас редкий верстальщик не встречался с препроцессорами. SASS или любимый мною LESS, реже Stylus, применяют и на больших проектах, и на маленьких. Кто-то пытается выжимать из них максимум, кто-то использует минималистичный набор — вложенность, переменные, импорты. Но, так или иначе, эти инструменты помогают с вопросами синтаксиса. Они делают так, чтобы нам было удобнее писать код.

    Года два-три назад PostCSS постоянно сравнивали с препроцессорами. И это понятно. Формально с его помощью можно сделать все то же самое, сделать какой-то синтаксис, который будет удобнее, чем чистый CSS. Но все это вызывало бурления в массах, в основном потому, что каждый с помощью PostCSS делал что-то свое. Бесчисленные неизвестные плагины, миллионы комбинаций и кроме автора того или иного конфига никто не понимал, как он работает и что делает. Это как Vim или Emacs — можно из них сделать космический корабль, но научить другого разработчика им пользоваться будет очень непросто.

    Но если эти сравнения отбросить, то PostCSS — это инструмент, который позволяет взять наш CSS и что-то с ним сделать. Никто не мешает использовать SASS ради синтаксиса, а после сборки воткнуть PostCSS и что-то сделать с результатом. Они друг другу не противоречат.

    Старое — не значит неработающее

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

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

    Топ-пост этого месяца:  NetBeans или IntelliJ IDEA сравнение преимуществ и недостатков обеих сред разработки

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

    №1. Doiuse

    Думаю все мы сталкивались с такой проблемой: пишешь код, проверяешь в хроме — все ок. Проверяешь в FF — ок. А потом в мобильном Safari все разваливается. Или в Edge. И ты сидишь и не понимаешь, что не так. Потом долго пялишься в код, пьешь чай, и вдруг приходит озарение, что какое-то свойство не поддерживается в каком-то браузере. Идешь на caniuse и видишь подтвержение очевидного.

    Конечно, с опытом руки сами запоминают, какие свойства нужно избегать, но всякое бывает. Можно не выспаться, могут быть сжатые сроки и нервы, может поменяться список браузеров, которые нужно поддерживать. И тут опыт начнет подводить. Doiuse — это инструмент, который очень выручает в таких ситуациях.

    Принцип работы прост — мы скармливаем ему список браузеров и наш CSS. Плагин идет в базу caniuse и в реальном времени выдает нам ответ, что мы поиспользовали из того, что не поддерживается.

    Список браузеров мы можем задавать прямо в package.json. Просто и удобно. PostCSS использует browserslist и, если вы не видели раньше, то выглядит это примерно так:

    Также есть конфиг самого doiuse, в котором можно заставить его игнорировать некоторые группы свойств, если вы уверены, что это ни на что не влияет. Например если вы используете полифилы или от потери поддержки какого-то свойства ничего не изменится:

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

    Используйте console.log чтобы сообразить, как устроен объект, который передает PostCSS в эту функцию. Там много всего интересного.

    Моя практика показала, что самый удобный вариант — это выводить селекторы и конкрентые свойства, которые не поддерживаются, без уточнения браузеров и строк кода. Если в проекте используется БЭМ или какие-то аналоги, и код компонентов распределен по отдельным файлам, то такой подход позволяет быстро находить проблемное место не нагружая мозг.

    Чтобы не писать специальные последовательности символов для цветов в консоли, можно подключить пакет colors, с ним будет удобнее.

    При сборке будет примерно такой вывод в консоли:

    №2. Autoprefixer

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

    Автопрефиксер работает все с той же базой caniuse, использует тот же browserslist и может добавлять в CSS те префиксы, которые действительно нужны в указанных нами браузерах. При этом сам код становится чище, а работа идет быстрее.

    №3. Stylelint

    Когда много и быстро печатаешь, то рано или поздно начинаешь допускать много ошибок, совершенно их не замечая. Глаз замыливается. В случае с CSS это может давать забавный (на самом деле нет) эффект, когда ты смотришь в браузер — видишь проблему с версткой. Смотришь в код — ее там нет. Смотришь в браузер — она есть. А в коде — нет. В результате можно долго искать сложную проблему, совершенно не замечая, что просто очепятался. Чтобы такого не было, придумали линтеры.

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

    №4. Postcss-flexbugs-fixes

    Или в более широком смысле postcss-fixes, в состав которого этот плагин входит. Медленно, но верно, флексы вытесняют старый подход к верстке на флоатах. Это хорошо, но все мы знаем, что с ними связан набор багов. Они описаны в репозитории flexbugs. Некоторые из них требуют к себе особого внимания, но также есть несколько штук, которые настолько простые, что постоянно вылетают из головы. Например IE игнорирует функцию calc в сокращенной записи свойства flex. Это не так часто нужно, но если понадобится, то руки могут сами написать сокращенный вариант и потом придется долго думать, в чем проблема. К счастью это дело можно исправить в автоматическом режиме. На помощь приходит плагин postcss-flexbugs-fixes.

    В примере с calc он найдет в коде фрагменты вроде этого:

    Просто и удобно.

    №5. Postcss-preset-env

    Раз уж мы говорим про поддержку браузерами, то будет не лишним сказать про postcss-preset-env. Раньше ту же роль выполнял cssnext. Этот плагин будет полезен, если вы интересуетесь новыми веяниями в CSS.

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

    Как можно догадаться по названию инструмента, он напоминает одноименный пресет у Babel. Здесь все так же — много преобразователей, собранных в один стабильный набор. Некоторые преобразования требуют последующее подключение скриптов-полифилов на клиенте, но большинство реализуется чисто средствами CSS. Насколько я понимаю, для Stage2+ скрипты не нужны. Во всяком случае не сталкивался с их необходимостью. Поправьте меня, если я что-то там пропустил.

    №6. Postcss-animation

    Часто слышу от разных людей (в основном это бэкендеры, которые не очень сильны в CSS), что они хотят использовать отдельные анимации из animate.css, но считают плохой идеей подключать всю библиотеку целиком. Вполне логично. Но в результате они тратят много времени пытаясь повторить эти анимации самостоятельно.

    Плагин postcss-animation очень ускоряет этот процесс. Мы пишем только название анимации, например:

    А он сам подтягивает из animate.css реализацию и вставляет ее в код.

    №7. List-selectors

    Когда у вас есть несколько верстальщиков и много стилей, встает вопрос о code review, о том, что было бы неплохо иногда глазами видеть общую картину со всеми селекторами, которые у нас есть. Знать, какие ID используются, есть ли селекторы по тегам или насколько соблюдается принятая методология. Особенно это важно, когда вы проверяете код новичка, который может писать странные вещи, которые формально будут работать, но фактически будут идти вразрез с принятыми соглашениями (далеко не везде эти соглашения хорошо зафиксированы и есть возможность такие вещи автоматизировать). Самому пролистывать многочисленные файлы со стилями, чтобы проверить адекватность селекторов, долго. Нужен способ вычленить их и показать отдельно. List-selectors как раз решает эту задачу.

    Точно так же, как и doiuse, этот плагин позволяет использовать свою функцию для подготовки информации к выводу на экран. Можно вывести только то, что интересует, или раскрасить все в разные цвета. Как пример:

    В этом примере получится длинный-длинный список селекторов:

    №8. Immutable-CSS

    Еще одна вещь, за которой стоит следить — это перебивание стилей из сторонних библиотек. Если мы подключили какую-то библиотеку, а потом начинаем для селекторов из нее писать свои стили, то в конечном счете получаем запутанный код, в котором не разобрать, что откуда взялось. Это может приводить к случайным багам, которые потом отнимают слишком много времени на ровном месте. Чем больше раз мы что-то переопределяем, тем сложнее в конечном счете понять, что происходит, хотя сама проблема, которую нужно решить, может быть очень простой. В этой ситуации может пригодиться инструмент под названием immutable-css.

    В целом принцип его работы прост: берет файлы со стилями, если находит совпадения по селекторам — начинает возмущаться:

    Единственная проблема у данного инструмента — это то, что он не поддерживает не-CSS синтаксис. Так что если в проекте используются препроцессоры, то сравнивать приходится уже собранные файлы. Но в целом, если задача состоит в том, чтобы просто убедиться, что никто случайно не переписал стили из сторонней библиотеки, то это не так важно.

    №9. Bye-Bye!

    Думаю всем знакома ситуация, когда мы постепенно добавляем какие-то компоненты на работающий сайт. Какие-то из них отправляются сразу в продакшен, а какие-то долго сидят и ждут своей очереди (например сверстать-то мы сверстали, а не бэкенде еще что-то не доделали). Что-то может быть экспериментом или временным решением на праздники. Ситуаций может быть много, но их объединяет то, что у нас набирается куча компонентов, а на боевом сайте используются лишь малая часть из них. Было бы хорошо убрать все, что не используется, из текущей сборки. Это может заметно уменьшить ее размер, а также снизить головную боль в перспективе, когда нужно будет делать редизайн к примеру, и встанет вопрос, что же из всего этого действительно нужно переписывать сейчас, а что — нет.

    Есть разные подходы к этому вопросу. На ум сразу приходит uncss. Этот инструмент в автоматическом режиме определяет, какие стили используются на страницах и убирает лишнее. Но на практике это почти всегда приводит к тому, что никто не знает, что реально используется, а что — нет. А еще я все время сомневаюсь, не удалил ли этот инструмент чего лишнего. Но это наверное уже моя паранойя. Хотя…

    Bye-bye — это более простой инструмент, которому мы сами скармливаем список селекторов, которые нужно убрать из CSS. Причем можно использовать регулярные выражения. Если вы применяете БЭМ или что-то еще в этом духе, то одной простой регуляркой можно удалять блок со всем, что к нему относится. Bye-bye!

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

    №10. PostCSS-trolling

    Все предыдущие инструменты могут незначительно повысить производительность труда ваших верстальщиков, но этот дает просто феноменальные результаты. Очень рекомендую.

    Заключение

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

    PostCSS — будущее CSS

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

    Первая версия SASS была выпущена в 2007, Less в 2009, а Stylus в 2010. За это время метаязыки CSS приобрели большую популярность. Редкий проект обходится без их использования. Они позволяют быстро писать кросс-браузерный CSS, сводя к минимуму дублирование кода и автоматизируя рутинную работу.

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

    • Скорость работы. Работает в 3 раза быстрее чем libSaas написаный на C++
    • Использование будущих возможностей CSS. PostCSS распарсит и адаптирует ваш код.
    • Множество плагинов расширяют возможности PostCSS.

    Один из известных постпроцессоров Autoprefixer. Он парсит CSS и добавляет вендорные префиксы с caniuse.com. И больше не надо думать какой браузер, на какое свойство использует префикс.

    Использование

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

    Примеры работы плагинов

    postcss-color-hex-alpha

    Вот пример использования синтаксиса будущего CSS уже сегодня. Нотация вида #0000ffcc будет преобразована к виду rgba();

    postcss-custom-media

    И еще один пример из черновика спецификации CSS. Кастомные медиазапросы.

    PostCSS Mixins

    PostCSS так же предлагает отличные возможности по применению миксинов. Вот простой пример:

    А вот более интересный пример использования возможностей JavaScript в PostCss. Данный миксин принимает в качестве аргумента директорию с изображениями, и создает для каждого файла свой стиль. При этом называя его в соответствии с именем файла без расширения.

    И в результате выполнения:

    Кроме того, миксины можно удобно хранить в отдельном каталоге. Для этого в gulpfile.js необходимо прописать mixinsDir:

    Теперь складываем наши миксины в каталог mixins. Название файла будет равно названию миксина.

    Вот пример с clearfix:

    Уже написано достаточное количество плагинов, все их можно посмотреть на сайте с удобным поиском — [http://postcss.parts/](http://postcss.parts/). Делюсь теми, которые я с интересом попробовал и теперь активно использую:

    • CssNano — Модульный минификатор для PostCss
    • CssNext — Использование возможностей будущего CSS уже сегодня
    • Rucksack — Разработка CSS с удовольствием.
    • Stylelint — Современный CSS linter

    Переход с SCSS на PostCSS: мой опыт

    Прямо сейчас я начинаю верстать новый проект. Я решила, что это хороший повод познакомиться с новой для себя технологией, поэтому выбрала в качестве препроцессора PostCSS. Меня привлекает в нем скорость работы и модульность, однако до сих пор не было случая попробовать его на реальном проекте. Сейчас в основном я использую Sass, и невозможность (хоть и временная) использовать node-sass с шестой версией Node.js, и то, как из-за этого у меня поломались стили в проекте, тоже послужило причиной поиска альтернатив.

    Для начала расскажу, как сейчас у меня выглядит работа со стилями.

    Как я сейчас работаю со стилями

    Есть основной файл, main.scss, в который подключаются все остальные файлы стилей, разделенные по папкам. Я использую систему папок, похожую на модель 7-1, с некоторыми отличиями: у меня почти никогда нет папки vendors/ (вместо нее я подключаю сторонние библиотеки через npm), а также папки themes/ (даже в больших проектах у меня не было необходимости выделять отдельные темы). В папке components/ я создаю отдельный файл для каждого нового класса компонентов.

    Сборку делаю через Gulp. Для импорта стилей использую gulp-sass-glob, чтобы можно было импортировать папки со стилями целиком, например: @import «../components/**/*.scss»; .

    В больших проектах использую миксины Bourbon. К собранным стилям применяю автопрефиксер.

    Единообразие написания стилей и отсутствие в них ошибок проверяется при помощи Stylelint или SCSS-lint в виде плагина для редактора Atom (вот мой конфиг .scss-lint.yml, основанный на Sass Guidelines). При помощи CSSComb (и этого плагина для редактора) я автоматически сортирую CSS свойства (конфиг настроен в соответствии с линтером).

    Готовый файл минифицируется через CSS Nano в виде плагина для Gulp.

    В идеале, мне бы хотелось получить такую конфигурацию, которая будет работать с уже написанными стилями с SCSS-синтаксисом, и чтобы не не нужно было менять привычки написания стилей. Потом, возможно, я подумаю над другими вариантами, но моя задача сейчас – сделать подобие SCSS, но через PostCSS. То есть, мне нужно:

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

    Переход к PostCSS

    Как выяснилось, я уже использую два, а в некоторых случаях три инструмента из экосистемы PostCSS: это Автопрефиксер, CSS Nano, и иногда Stylelint. Отлично. Осталось найти что-то, что позволит заменить SCSS.

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

    Синтаксис

    Среди плагинов я нашла Precss, который позволяет использовать синтаксис из Scss. Однако его возможности мне показались избыточными, из Scss мне нужны только импорт, переменные, вложенность и миксины. Поэтому я решила взять по отдельности плагины postcss-partial-import, postcss-simple-vars, postcss-nested, postcss-mixins.

    К сожалению, мне пока не удалось найти плагин, который бы мог импортировать содержимое директории целиком.

    Приятно порадовал плагин stylefmt, который является заменой для CSS Comb и может форматировать стили в соответствии с конфигом от Stylelint. Кроме того, он есть в виде плагина для Атома.

    Установка

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

    Добавить комментарий