Введення в PostCSS

2

Від автора: CSS розробка, як і інші мови, це інтерактивний процес. З кожним оновленням додаються нові властивості і синтаксис, що допомагають нам у написанні стилів. В документації CSS Level 3 були представлені властивості, за допомогою яких можна створювати інтерактивні елементи дизайну, що раніше було можливе тільки з JavaScript. Кожен день з’являються все нові інструменти, що спрощують процес написання стилів і роблять його більш гнучким.

Одним з недавніх інструментів можна назвати PostCSS. PostCSS заново винаходить CSS, але з додаванням плагінів сторонніх інструментів. Препроцесор працює так само, як і Sass і LESS, трансформує розширений синтаксис і властивості сучасний і доброзичливий CSS код. А як же JavaScript? — запитаєте ви.

За допомогою JavaScript можна набагато швидше трансформувати стилі, ніж з допомогою препроцесорів. У таск раннери типу Gulp або Grunt стилі можна трансформувати в процесі створення файлу, так само як при компіляції в Sass і LESS. Бібліотеки типу React і AngularJS відкривають двері для трансформації і написання стилів безпосередньо через JavaScript.

Історія PostCSS

Розробник PostCSS Andrey Sitnik, а також творець Autoprefixer, спочатку розробляв препроцесор в якості методу обробки CSS через JavaScript. По суті PostCSS простий API, але в поєднанні зі своєю величезною екосистемою плагінів пропонує потужні здібності. Для процесу налагодження генеруються картографічні джерела, а для розуміння того, де і як трансформується код, існує абстрактне дерево синтаксису (AST).

Можливості мови за бажанням можна легко модифікувати і кастомизировать, так як PostCSS працює на фреймворку Node.js. В інших системах типу Sass або LESS після написання компілятора обмежену кількість методів.

Так як PostCSS працює як API, з його допомогою можна створювати свої власні плагіни та інструменти для будь-яких властивостей. Ця модульна конструкція платформи робить інструмент абсолютно нейтральним, що дозволяє зосереджуватися на властивостях, необхідних в проекті. PostCSS не прив’язаний до мовного формату, а значить, можна використовувати синтаксис інших препроцесорів типу Sass, LESS.

Переваги модульного мислення

Розробники рідко починають проект з нуля. Багато починають з Sass шаблону, в якому містяться змінні, міксини і функції для майбутнього проекту. У нас же для полегшення виробництва будуть окремі стилі для функцій, миксинов, grid систем і основних утиліт. У кінці статті ми отримаємо 10 або більше файлів стилів.

Обслуговування бібліотеки Sass або LESS фрагментів коду досить складне завдання, проект може розростися. У багатьох проектах присутні функції і міксини, які не використовуються «просто на випадок». PostCSS легко встановлюється, має plug-and-play модульність, а також робить процес розробки більш гнучким під конкретні потреби проекту.
PostCSS переміщує весь код для створення функцій, утиліт і миксинов із стилів у плагіни. Для кожного проекту можна вибирати необхідні інструменти, а також плагіни через таск раннер.

Прикладом може послужити плагін PostCSS FontPath. З допомогою Sass можна додати файли міксини, необхідні для кастомних шрифтів; тобто ми створюємо @font-face теги.

@mixin importfont($font-family, $font-filename, $font-weight : normal, $font-style :normal, $font-stretch : normal) {
@font-face {
font-family: ‘#{$font-family}’;
src: url(‘#{$font-filename}.eot’);
src: url(‘#{$font-filename}.woff’) format(‘woff’),
url(‘#{$font-filename}.ttf’) format(‘truetype’);
font-weight: $font-weight;
font-style: $font-style;
font-stretch: $font-stretch;
}
}
@include importfont(‘mission script’, ‘fonts/mission-script-webfont’, 300);

З плагіном PostCSS FontPath нам більше не потрібно підключати міксини, як зверху. Можна лише написати код нижче, а PostCSS через Grunt або Gulp трансформує його в необхідний код.

@font-face {
font-family: ‘My Font’;
font-path: ‘/path/to/font/file’;
font-weight: normal;
font-style: normal;
}

На момент написання статті доступно більше 100 плагінів, за допомогою яких можна писати синтаксис майбутнього CSS, робити скорочення, додавати розширення та інструменти. Це вже не просто «кльовий інструмент», а їм користуються такі компанії, як WordPress, Google і Twitter.

Додавання PostCSS

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

Замітка: Повні версії Gulp і Grunt доступні на GitHub. Використовуйте їх як стартові шаблони і розширюйте за необхідності.

Установка PostCSS з допомогою GULP

Якщо ви зовсім не знайомі з Gulp, щоб швидко зорієнтуватися і почати використовувати інструмент, раджу вам прочитати статтю Callum Macrae Працюємо з Gulp. Для установки PostCSS в проект запустіть наступну команду в командному рядку:

npm i gulp-postcss -D.

У файлі проекту Gulpfile.js необхідно підключити наш встановлений модуль PostCSS і потім використовувати його як завдання. Не забудьте оновити шляху, куди будуть зберігатися трансформовані файли.

var postcss = require(‘gulp-postcss’);
gulp.task(‘styles’, function () {
return gulp.src(‘path/to/dev/style.css’)
.pipe(postcss([]))
.pipe(gulp.dest(path/to/prod))
});

У командному рядку наберіть gulp styles для запуску завдання.

Установка PostCSS з допомогою GRUNT

Примітка: Якщо ви не знаєте, що таке Grunt, раджу прочитати статтю Mike Cunsolo Налаштування Grunt. Для установки PostCSS в проект забийте наступну команду в терміналі:

npm i grunt-postcss -D.

Після установки плагін необхідно активувати в grunt файлі і створити завдання, як показано у коді нижче. Не забудьте оновити cwd і dest.

module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON(‘package.json’),
styles: {
options: {
processors: []
},
dist: {
files: [{
expand: true,
cwd: ‘dev/’,
src: [‘**/*.css’],
dest: ‘prod/’
}]
}
}
});
// завантажуємо post-css.
grunt.loadNpmTasks(‘grunt-postcss’);
};

Щоб запустити задачу, необхідно набрати grunt styles в командному рядку.

Установка плагіна

PostCSS сам по собі не самий потужний інструмент; його сила в плагінах. Ви могли помітити, що вже в коді для Gulp і Grunt вище при оголошенні завдань використовувався порожні масиви. У ці масиви можна імпортувати плагіни PostCSS, ті самі функції, які необхідно підключити.

Список перевірених плагінів можна подивитися на сторінці PostCSS’ GitHub. Як і всі NPM пакети, плагін можна встановити через командний рядок. Багато плагіни не прив’язані до конкретних таск раннери і можуть використовуватися як розширення PostCSS. Приміром, ми встановимо плагін PostCSS Focus, додає :focus до всіх hover станів.

Для установки пакетів в проект у всіх плагінах з прикладів нижче необхідно використовувати командний рядок і NPM.

Приклад установки плагіна PostCSS

npm i postcss-focus -D

Плагіни можна передати метод безпосередньо; однак для більшої чистоти ми створимо масив і передамо його в якості аргументу. У масиві зберігаються require стану, які повертають плагіни, які у свою чергу потім відразу ж викликаються. Якщо вас зацікавила дана концепція, прочитайте статтю Функції та об’єкти першого класу в JavaScript Ryan Christiani.

require(‘postcss-focus’)()

Змінений код для Grunt з новою створеним масивом processorArray:

var processorArray = [
require(‘postcss-plugin’)()
];
// стиснемо для стислості
styles: {
options: {
processors: processorArray
},
dist: {
src: ‘path/to/dev/style.css’,
dest: ‘path/to/prod/style.css’
}
}

І код для Gulp:

var processorArray = [
require(‘postcss-plugin’)()
];
gulp.task(‘styles’, function () {
gulp.src(‘path/to/dev/style.css’)
.pipe(postcss(processorArray))
.pipe(gulp.dest(‘path/to/prod’))
});

Плагіни

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

«Стоп! CSS файл?» Так, все вірно, CSS файл. Все тому, що PostCSS трансформує CSS код, і нам не потрібно використовувати який-небудь інший синтаксис – просто звичайний CSS. Якщо ви працювали з препроцессорами, то вам може здатися дивним не використовувати файли .sass, .scss, .styl або .less. Але на ділі ми ж не конвертуємо, а трансформуємо наш код.

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

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

Autoprefixer

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

npm i autoprefixer -D

Після додавання плагіна в масив можна створити окремий масив підтримуваних браузерів. Список можливих опцій можна знайти за посиланням Browserslist Github Account. Додамо плагін Autoprefixer в наш препроцесор:

var processorsArray = [
// прибрали зайве
require(‘autoprefixer’)({ browsers: [‘last 2 versions’, ‘ie 6-8’, ‘Firefox > 20’] })
];

За заданим умовам в об’єкті вендорные префікси будуть додаватися до будь-яких властивостей і значень, де вони потрібні. Приклад початкового CSS:

.item {
display: flex;
flex-flow: row wrap;
}

І після роботи плагіна:

.item {
display: -webkit-flex;
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}

Синтаксис майбутніх версій CSS за допомогою CSSNEXT

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

З допомогою CSSNext можна трансформувати будь CSS4 властивість в CSS3, який підтримується в браузерах. Інструмент можна використовувати як окремо, так і в якості плагіна для PostCSS. Ще раз, його можна додати в масив processorsArray, в якому містяться плагіни PostCSS. Встановити плагін через командний рядок можна так:

npm i cssnext -D

Додайте плагін в препроцессоры:

var processorsArray = [
// скоротили код
require(‘cssnext’)()
];

Тепер у первісному CSS файлі можна використовувати CSS4 властивості, а PostCSS через таск раннер трансформує синтаксис таким чином, щоб він підтримувався існуючими браузерами. Коли нові CSS4 властивості стануть підтримуватися в браузерах можна буде просто поміняти CSS код місцями. Початковий CSS:

// Кастомні змінні
:root {
—linkColour: purple;
}
a {
color: var(—linkColour);
}
// кастомні медіа запити з діапазонами
@custom-media —only-medium-screen (width >;= 500px) and (width <= 1200 px);
@media (—only-medium-screen) {
/* стилі для середніх екранів */
}
// кастомні селектори
@custom-selector :—enter :hover, :focus;
@custom-selector :—input input, .input, .inputField;
a:—enter {
/* Enter styles go here */
}
:—input {
/* Input field styles go here */
}

І трансформований код:

a {
color: black;
}
@media (min-width:500px) and (max-width:1200 px){
body{
background:#00f;
}
}
a:focus,a:hover{
background:#00f;
}
.input, .inputField, input{
background:red;
}

Якщо хочете більше дізнатися про можливості плагіна CSSNext, на сайті є спеціальний майданчик для експериментів. Там ви можете перевірити підтримуються плагіном властивості CSS4.

Синтаксис Sass

Якщо ви звикли використовувати Sass, не варто переживати: PostCSS можна використовувати синтаксис Sass та його інструментарій. У той час як звичайний CSS ще не підтримує змінні, спадкування та імпорт, за допомогою плагіна PreCSS можна використовувати ці функції і писати на синтаксисі Sass в звичайному CSS файлі.

Після додавання плагіна через командний рядок і додавання на нього посилання на пакет можна відразу ж писати на Sass синтаксисі. Якщо вам знадобиться переключитися з Sass назад в PostCSS, то просто змініть розширення назад .css і проженіть файл через таск раннер. Установка плагіна PreCSS через командний рядок:

npm i precss -D

Додаємо плагін в препроцессоры:

var processorsArray = [
// скоротили код
require(‘precss’)()
];

Ще раз, початковий код:

/*Змінні*/
$blue: #0000ff;
$green: #00ff00;
$radius: 10px;
.square {
background: $blue;
border-radius: $radius;
}
/*Імпорти*/
@import «partials/_base.css»;
/*Міксини*/
@define-mixin square $dimension {
width: $dimension;
height: $dimension;
}
/*Спадкування, змінні і міксини*/
.button {
@mixin square 200px;
background: $green;
&:hover {
background: $blue;
}
}

І трансформований код:

.square {
background: #0000ff;
border-radius: 10px;
}
.button {
width: 200px;
height: 200px;
background: #00ff00;
}
.button:hover {
background: #0000ff;
}

Розширюємо CSS за допомогою плагінів

Плагіни дозволяють нам писати більш ефективний код, основна сила PostCSS як раз в плагінах. З їх допомогою можна швидше писати стилі або хоча б швидше писати незвичайні стилі. Плагіни використовують PostCSS API і працюють з кастомних властивостями, селекторами і значеннями, дозволяючи нам писати більш ефективний код, витрачаючи менше часу на Google.

Кількісні запити

Кількісні запити дуже потужний інструмент. З їх допомогою можна підрахувати елементи і застосувати стилі до них в залежності від їх номери. Сам вираз виходить досить складним з окремих складних селекторів. Але кількісні запити можна використовувати CSS вже зараз. Існують спеціальні онлайн-сервіси типу QQ, допомагають писати запити. Однак для написання кастомних селекторів можна використовувати безпосередньо PostCSS. Як і будь-який інший плагін, встановіть плагін кількісних запитів Quantity Queries через командний рядок:

npm i postcss-quantity-queries -D

Додайте плагін в список препроцесорів:

var processors = [
// прибрали зайве
require(‘postcss-quantity-queries’)()
];

Після встановлення плагіну можна використовувати кастомні селектори для додавання стилів для співпадаючих елементів. Функція доступна тільки через плагін. Вихідний CSS:

// Стилі застосуються, якщо буде мінімум 5 елементів
.container > .item:at least(5) {
background: blue;
}
// Стилі застосуються, якщо елементів не більше 10
.item > a:at-most(10) {
color: green;
}
// Стилі застосуються, якщо елементи в діапазоні
.gallery > img:between(4, 7) {
width: 25%;
}
// Стилі застосуються, якщо елементів буде рівно 4
.profiles:exactly(4) {
flex: 1 0 50%;
}

І код на виході:

// Стилі застосуються, якщо буде мінімум 5 елементів
.container > .item:nth-last-child(n+5), .container > .item:nth-last-child(n+5) ~ .item {
background: blue;
}
// Стилі застосуються, якщо елементів не більше 10
.item > a:nth-last-child(-n+10):first-child .item > a:nth-last-child(-n+10):first-child ~ a {
color: green;
}
// Стилі застосуються, якщо елементи в діапазоні
.gallery > img:nth-last-child(n+4):nth-last-child(-n+7):first-child .gallery > img:nth-last-child(n+4):nth-last-child(-n+7):first-child ~ img {
width: 25%;
}
// Стилі застосуються, якщо елементів буде рівно 4
.profiles:nth-last-child(4):first-child .profiles:nth-last-child(4):first-child ~ .profiles {
flex: 1 0 50%;
}

Скорочені властивості з допомогою плагіна SHORT

Під час написання стилів мимоволі замислюєшся: «А тут можна було б написати і коротше». На щастя, у нас є плагін Short: з його допомогою можна писати стилі логічно. З його допомогою можна скоротити властивості position та size в одну запис так само, як з властивостями background font.

За допомогою PostCSS API скорочені оголошення властивостей трансформуються в читану браузером форму, дозволяючи підтримувати порядок у файлі стилів і економити місце. Встановити Short можна так:

npm i postcss-short -D

Додаємо плагін в список препроцесорів:

var processors = [
require(‘postcss-short’)()
];

Властивість text включає в себе наступні друкарські властивості: color, font-style, font-variant, font-weight, font-stretch, text-decoration, text-align, text-rendering, text-transform, white-space, font-size, line-height, letter-spacing, word-spacing і font-family. Вихідний код:

p {
text: 300 uppercase dimgrey center 1.6 rem 1.7 .05em;
}

Код на виході:

p {
color: dimgrey;
font-weight: 300;
text-align: center;
text-transform: uppercase;
font-size: 25px;
font-size: 1.6 rem;
line-height: 1.7;
letter-spacing: .05em;
}

Властивості position можна вказати відразу чотири значення top, left, right, bottom. Порядок значень за годинниковою стрілкою від 1 до 4. Якщо одне значення необхідно пропустити, можна поставити *. Вихідний CSS код:

section {
position: absolute 10px * *;
}
.topNav {
position: fixed 0 * * 0;
}
.modal {
position: fixed 40% 25%;
}

Кінцевий код:

section {
position: absolute;
top: 10px;
}
.topNav {
position: fixed;
top: 0;
left: 0;
}
.modal {
position: fixed;
top: 40%;
right: 25%;
bottom: 40%;
left: 25%;
}

Яке значення це має для нашої індустрії?

Переваги від PostCSS можна використовувати вже зараз. Точно так само, як при компіляції Sass і LESS, PostCSS можна вбудувати в проект за допомогою таск раннери. Спеціальні плагіни типу PreCSS дозволяють перенести існуючий Sass проект в PostCSS без необхідності вносити які-небудь зміни.

На момент написання статті дискусія з приводу того, в чому ж все-таки краще писати CSS, все ще триває. З зростанням популярності таких бібліотек як React ідея написання стилів прямо в змінної, що в свою чергу дозволяє змінювати CSS через JS, також зростає. Поки що це лише дискусії, але даний метод можна використовувати для трансформування стилів в PostCSS.

Ще один проект, що наробив галасу, це CSS Modules. Стилі збираються в файли, які підключаються по мірі необхідності. В JavaScript колах дана концепція вже дуже популярна. Так як лінія між front-end мовами типу React and JSX продовжує розмиватися, стає складно ігнорувати змішані CSS/JS інструменти.

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

Як використовувати PostCSS вже сьогодні

Протягом наступних декількох років сам принцип написання CSS зміниться до невпізнання. У кожного проекту свої вимоги, під які ми вже будемо знаходити спеціальні рішення. Працюючи з такою модульною системою як PostCSS, у нас є можливість вибирати і підключати функції, які на нашу думку знадобляться у проекті.

Я хочу, щоб ви досліджували світ PostCSS і всіх його плагінів. Так як це проект співтовариства, то він буде рости тільки, якщо люди будуть ним користуватися і створювати плагіни. Більше плагінів можна знайти на сайті NPM по посиланню. А протестувати можливості плагінів на PostCSS майданчику.