7 PostCSS плагинов, чтобы облегчить вам в PostCSS

 npm install --save-dev autoprefixer 

Префиксы, специфичные для браузера, такие как -webkit- , -moz- и -ms- , постепенно -ms- , так как стандарты становятся лучше поддерживаемыми, и поставщики выбирают альтернативы, такие как -moz- -ms- основе флагов. К сожалению, вы не можете избежать префиксов поставщиков, но трудно понять, когда они всегда требуются (например, для выбора пользователя ), иногда требуются (например, для трехмерных преобразований ) или никогда не требуются (например, border-radius ).

Вам больше не нужно беспокоиться о префиксе снова с Autoprefixer. Вам просто нужно определить CSS без префикса, а затем указать, какие браузеры вы хотите поддерживать. Autoprefixer проверит caniuse.com перед добавлением необходимых префиксов — следующий код указывает две последние версии любого основного браузера или любую долю рынка, превышающую 2%:

 .pipe(postcss([ require('autoprefixer')({ browsers: ['last 2 versions', '> 2%'] }) ])) 

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

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

2. Активы PostCSS

PostCSS Assets предоставляет ряд полезных функций обработки изображений:

 npm install --save-dev postcss-assets 

Варианты включают в себя:

• Разрешение URL: учитывая имя файла, PostCSS Assets заменяет resolve(image) корневым путем или полностью определенным URL.
• Обработка измерений: PostCSS Assets заменяет ссылки на width(image) , height(image) или size(image) эквивалентом в пикселях.
• Встроенное изображение: PostCSS Assets заменяет inline(image) строкой в ​​кодировке Base64.
• Очистка кеша: PostCSS Assets может добавить произвольную строку запроса к ссылке на изображение, чтобы убедиться, что загружен самый последний файл.

3. cssnext

cssnext позволяет вам использовать новейший синтаксис CSS сегодня.

 npm install --save-dev postcss-cssnext 

Плагин имеет длинный список функций, включая поддержку:

• переменные var
• #rrggbbaa colors
• Цветовые функции
• фильтры
• откаты

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

4. Рюкзак

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

 npm install --save-dev rucksack-css 

Варианты включают в себя:

• Адаптивная типография, которая регулирует размеры шрифта и высоту строк с помощью одного font-size: responsive объявление.
• Количество псевдоселекторов, таких как li:at-least(4) которое предназначается для любого списка с четырьмя или более элементами.
• Псевдонимы свойств, такие как определение bg качестве background который может использоваться в вашем CSS.
• Набор предопределенных функций замедления .

5. Stylelint

Stylelint сообщает об ошибках CSS на основе 140 правил, разработанных для выявления распространенных ошибок, реализации соглашений о стилях и применения передовых методов. Существует множество вариантов настройки Stylelint по вашему вкусу — статья Павла Елисеева « Улучшение качества вашего CSS с помощью PostCSS» проведет вас через процесс настройки.

6. CSS MQPacker

MQPacker оптимизирует ваши медиа-запросы в единые правила, когда это возможно:

 npm install --save-dev css-mqpacker 

Препроцессоры, такие как Sass, позволяют легко использовать медиа-запросы в декларации, например

 .widget1 { width: 100%; @media (min-width: 30em) { width: 50%; } @media (min-width: 60em) { width: 25%; } } .widget2 { width: 100px; @media (min-width: 30em) { width: 200px; } } 

Это компилируется в:

 .widget1 { width: 100%; } @media (min-width: 30em) { .widget1 { width: 50%; } } @media (min-width: 60em) { .widget1 { width: 25%; } } .widget2 { width: 100px; } @media (min-width: 30em) { .widget2 { width: 200px; } } 

Чтобы уменьшить размеры файлов и (возможно) улучшить время анализа, MQPacker упаковывает несколько объявлений в одно правило @media , т.е.

 .widget1 { width: 100%; } .widget2 { width: 100px; } @media (min-width: 30em) { .widget1 { width: 50%; } .widget2 { width: 200px; } } @media (min-width: 60em) { .widget1 { width: 25%; } } 

Подсказка : убедитесь, что первое объявление медиа-запроса в вашем коде определяет все возможные параметры в том порядке, в котором вы их хотите, даже если нет реальной разницы. Это гарантирует, что MQPacker определит правила в правильном порядке.

MQPacker также предоставляет опции для сортировки медиазапросов и вывода исходных карт.

7. cssnano

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

 npm install --save-dev cssnano 

Плагин работает, удаляя комментарии, пробелы, дублирующие правила, устаревшие префиксы поставщиков и делая другие оптимизации, чтобы сэкономить как минимум 50%. Есть альтернативные варианты, но cssnano — один из лучших. Используй это!

Хочу больше?

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

Если этого недостаточно, вы можете разработать свои собственные плагины PostCSS на JavaScript. Документация PostCSS объясняет, как написать плагин, и предоставляет ссылку на API .

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