7 PostCSS плагінів, які допоможуть вам вивчити PostCSS

17

Від автора: вже було безліч статей на тему PostCSS, але до цих пір багато хто так і не зрозуміли, що це таке. У двох словах: PostCSS виконує тяжку роботу за вас. PostCSS трохи відрізняється від препроцесорів Sass, Less та Stylus, чий синтаксис виглядає більш лаконічним і компілюється в звичайний CSS код.

Людей бентежить:

Назва. PostCSS може виконувати різні дії над файлами до або після того, як їх вихідний код буде складати препроцесором.

PostCSS цілком може замінити препроцесор. Є плагіни, в яких реалізовані такі конструкції, як змінні, вкладеність, міксини і спадкування.

Препроцесор можна зробити і самому, але навіщо. Причиною може послужити тільки, якщо ви хочете зменшити функціонал і прискорити час компіляції. Особисто я використовую Sass і потім PostCSS.

Як працювати з PostCSS?

PostCSS може працювати, як в незалежних JS файли, так і за допомогою таскраннеров Gulp, Grunt, Broccoli, Brunch і ще маса, про які я навіть не чув!

Сам по собі PostCSS лише парсити CSS файл на JS об’єкти і токени. Справжня магія коїться з плагінами, які аналізують, маніпулюють, додають або змінюють властивості і значення ще до того, як кінцевий CSS файл буде написаний.
Для роботи з PostCSS в Gulp необхідно створити проект і встановити обидва модулі:

npm init
npm install —save-dev gulp gulp-postcss

Потім можна додати потрібні вам плагіни, наприклад, autoprefixer і cssnano:

npm install —save-dev autoprefixer cssnano

Можна створити файл gulpfile.js – у ньому прописується завдання щодо завантаження вихідного CSS і прогоні його в PostCSS. Плагіни і будь опції передаються в PostCSS в масиві. І в кінці CSS-код виводиться у кінцевий файл:

// Gulp.js налаштування
var gulp = require(‘gulp’),
postcss = require(‘gulp-postcss’);
// підключення плагінів PostCSS
gulp.task(‘css’, function() {
return gulp.src(‘src/main.css’)
.pipe(postcss([
require(‘autoprefixer’)({}),
require(‘cssnano’)
]))
.pipe(gulp.dest(‘dest/main.css’));
});

Завдання можна запустити через консоль:

gulp css

Тепер залишилося розглянути PostCSS плагіни…

Autoprefixer

Якщо ви нічим не користуєтеся, встановіть Autoprefixer:

npm install —save-dev autoprefixer

Вендорные префікси -webkit-, -moz — і -ms — поступово відмирають із збільшенням підтримки, і виробники браузерів переходять на інший спосіб введення нових властивостей – активація властивостей за допомогою прапорів. На жаль, відмовитися від вендорних префіксів поки не представляється можливим, але і знати всі випадки, де вони потрібні, теж нереально (наприклад, user-select), де вони потрібні, але не скрізь (3D трансформації) або взагалі не потрібні (border-radius).

З Autoprefixer ви забудете про вендорних префіксах. Від вас потрібно тільки вказати властивості, до яких не потрібно додавати префікси і задати браузери. Autoprefixer перевірить підтримку властивостей caniuse.com перш ніж додавати префікси. Код нижче описує 2 останні версії будь-якого відомого браузера, або браузера з часткою на ринку більше 2%:

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

Відмінний варіант для функцій препроцесорів, в яких звичайно вимагається написання спеціального коду і окреме застосування префіксів. У майбутньому з розвитком стандартів браузерів код з префіксами буде видалений з PostCSS.

Autoprefixer настільки корисний інструмент, що із-за його великої поширеності ви могли його використовувати і не знати, що це PostCSS плагін.

PostCSS Assets

PostCSS Assets – набір корисних функцій обробки зображень:

npm install —save-dev postcss-assets

Серед можливостей:

Заміна URL: Враховуючи ім’я файлу, PostCSS замінює resolve(image) на кореневий шлях або повний URL.

Обробка дозволу: PostCSS Assets замінює width(image), height(image) або size(image) на їх піксельні еквіваленти.

Обробка зображень: PostCSS Assets замінює inline(image) на рядок в кодуванні Base64.

Очищення кешу: PostCSS Assets може додавати випадкову рядок запиту в кінець посилання на зображення для перевірки того, що був завантажений останній файл.

cssnext

З cssnext ви можете користуватися новітніми синтаксис CSS вже сьогодні.

npm install —save-dev postcss-cssnext

В плагіні довгий список можливостей, серед яких підтримка:

Змінні Var

#rrggbbaa кольору

Колірні функції

Фільтри

Фолбэки

Під час роботи cssnext переводить код на синтаксис, який сьогодні використовується в браузерах.

Рюкзаку

Рюкзаку пропонує ряд функцій, які, за словами розробників роблять CSS розробку знову веселою!

npm install —save-dev рюкзаку-css

Адаптивна типографіка, в якій розмір шрифту і висота рядка налаштовуються всього одним рядком font-size: responsive.

Кількісні псевдоселекторы типу li:at least(4), розраховані на будь-які списки з 4 або більше пунктами.

Псевдоніми властивостей. Наприклад, оголошення властивості background через bg.

Набір готових функцій анімації.

Stylelint

На основі 140 правил Stylelint повідомляє про помилки в CSS. Плагін створений для повідомлення про помилки, застосування стилів та загального посилення кращих практик. Stylelint можна налаштувати по-різному – стаття від Pavels Jelisejevs Підвищуємо якість вашого CSS коду з допомогою PostCSS проведе вас по всьому процесу настройки.

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 також вміє сортувати медіа запити і виводити карти коду.

cssnano

Плагін cssnano максимально стискає CSS файл. Установка:

npm install —save-dev cssnano

Плагін видаляє коментарі, прогалини, однакові правила, застарілі вендорные префікси, а також проводить інші заходи по оптимізації, що економить як мінімум 50% ваги. Є і інші плагіни для оптимізації, але cssnano найкращий.

Мало?

Знайти PostCSS плагіни можна на postcss.parts, документації PostCSS описані всі рекомендовані опції. По посиланнях вище ви знайдете плагіни для автоматизації будь CSS задачі, яку можна уявити. Деякі з плагінів виконують кілька функцій, наприклад, в cssnext є Autoprefixer.

Якщо і цього мало, можна розробити свій власний PostCSS плагін в JS. В документації PostCSS пояснюється, як написати плагін, а також там є API.

Чи користуєтеся ви препроцессорами чи ні, PostCSS спрощує вам розробку. Зекономлений час на розробці з лишком окупає час, витрачений на установку і налаштування.