PostCSS: Noua dată de joc a lui Sass

În ultimul timp, PostCSS este instrumentul care face răsturnările pe partea front-end a dezvoltării web.

PostCSS a fost dezvoltat de Andrey Sitnik, creatorul Autoprefixer. Este un pachet Node.js dezvoltat ca un instrument pentru a vă transforma întregul CSS folosind JavaScript, obținând astfel timpi de construcție mult mai rapidi decât alte procesoare.

În ciuda a ceea ce pare să implice numele său, nu este un post-procesor (și nici un pre-procesor), ci mai degrabă este un transpiler pentru a transforma sintaxa specifică PostCSS (sau specifică pluginului PostCSS, pentru a fi mai precis) în CSS vanilie.

Acestea fiind spuse, asta nu înseamnă că PostCSS și alte procesoare CSS nu pot lucra împreună. De fapt, dacă sunteți nou în întreaga lume a pre/post-procesării CSS, utilizarea PostCSS împreună cu Sass vă poate scuti de multe bătăi de cap, despre care vom intra în curând.

PostCSS nu este un înlocuitor pentru alte procesoare CSS; mai degrabă, priviți-l ca pe un alt instrument care poate fi util atunci când este necesar, un alt plus la setul dvs. de instrumente.

Utilizarea PostCSS a început recent să crească exponențial, fiind folosit astăzi de unele dintre cele mai mari companii din industria tehnologică, cum ar fi Twitter, JetBrains și Wikipedia. Adopția sa pe scară largă și succesul se datorează în mare parte modularității sale.

Pluginuri, Pluginuri, Pluginuri

PostCSS este totul despre pluginuri.

Vă permite să alegeți pluginurile pe care le veți folosi, eliminând dependențele inutile și oferindu-vă atât o configurare rapidă, cât și ușoară cu care să lucrați, cu caracteristicile de bază ale altor preprocesoare. De asemenea, vă permite să creați o structură mai personalizată pentru fluxul dvs. de lucru, menținându-l în același timp eficient.

La data scrierii acestei postări, PostCSS are un depozit de peste 200 de plugin-uri, fiecare dintre ele responsabil de diferite sarcini. În depozitul GitHub al PostCSS, pluginurile sunt clasificate după „Rezolvați probleme globale CSS”, „Folosiți CSS viitor, astăzi”, „Lizibilitate CSS mai bună”, „Imagini și fonturi”, „Linters” și „Altele”.

Cu toate acestea, în directorul de pluginuri veți găsi o clasificare mai precisă. Vă sfătuiesc să aruncați o privire acolo pentru a vă face o idee mai bună despre capacitățile câtorva dintre ei; sunt destul de largi și destul de impresionante.

Probabil ați auzit de cel mai popular plugin PostCSS, Autoprefixer, care este o bibliotecă autonomă populară. Al doilea cel mai popular plugin este CSSNext, un plugin care vă permite să utilizați cea mai recentă sintaxă CSS astăzi, cum ar fi noile proprietăți personalizate ale CSS, de exemplu, fără să vă faceți griji cu privire la suportul browserului.

Nu toate pluginurile PostCSS sunt totuși atât de inovatoare. Unele pur și simplu vă oferă capacități care probabil ies din cutie cu alte procesoare. Luați parent selector de exemplu. Cu Sass, puteți începe să îl utilizați imediat pe măsură ce instalați Sass. Cu PostCSS, trebuie să utilizați postcss-nested-ancestors . Același lucru s-ar putea aplica și în cazul extends sau mixins .

Deci, care este avantajul utilizării PostCSS și a pluginurilor sale? Răspunsul este simplu - vă puteți alege propriile bătălii. Dacă simțiți că singura parte a Sass pe care o veți folosi vreodată este parent selector , vă puteți scăpa de stresul implementării a ceva de genul unei instalări de bibliotecă Sass în mediul dvs. pentru a compila CSS-ul dvs. și a accelera procesul utilizând numai PostCSS și postcss-nested-ancestors .

Acesta este doar un exemplu de caz de utilizare pentru PostCSS, dar odată ce începeți să îl verificați singur, veți realiza fără îndoială multe alte cazuri de utilizare pentru acesta.

Utilizare de bază PostCSS

Mai întâi, să acoperim câteva elemente de bază ale PostCSS și să aruncăm o privire asupra modului în care este utilizat în mod obișnuit. În timp ce PostCSS este extrem de puternic atunci când este utilizat cu un ruler de sarcini, cum ar fi Gulp sau Grunt, poate fi folosit și direct din linia de comandă folosind postcss-cli.

Să luăm în considerare un exemplu simplu de caz de utilizare. Să presupunem că am dori să folosim pluginul postcss-color-rgba-fallback pentru a adăuga o valoare HEX de rezervă tuturor culorilor noastre formatate RGBA.

După ce am instalat NPM postcss , postcss-cli și postcss-color-rgba-fallback , trebuie să rulăm următoarea comandă:

 postcss --use postcss-color-rgba-fallback -o src/css/all.css dist/css/all.css

Cu această instrucțiune, îi spunem PostCSS să folosească postcss-color-rgba-fallback , să proceseze orice CSS se află în interiorul src/css/all.css și să-l scoată în dist/css/all.css .

OK, a fost ușor. Acum, să ne uităm la un exemplu mai complex.

Utilizarea PostCSS împreună cu Task-runners și Sass

PostCSS poate fi încorporat destul de ușor în fluxul dvs. de lucru. După cum am menționat deja, se integrează perfect cu aplicații care rulează sarcini precum Grunt, Gulp sau Webpack și poate fi folosit chiar și cu scripturi NPM. Un exemplu de utilizare a PostCSS împreună cu Sass și Gulp este la fel de simplu ca următorul fragment de cod:

 var gulp = require('gulp'), concatcss = require('gulp-concat-css'), sass = require('gulp-sass'), postcss = require('gulp-postcss'), cssnext = require('postcss-cssnext'); gulp.task('stylesheets', function () { return ( gulp.src('./src/css/**/*.scss') .pipe(sass.sync().on('error', sass.logError)) .pipe(concatcss('all.css')) .pipe(postcss([ cssNext() ])) .pipe(gulp.dest('./dist/css')) ) });

Să deconstruim exemplul de cod de mai sus.

Stochează referințe la toate modulele necesare (Gulp, Contact CSS, Sass, PostCSS și CSSNext) într-o serie de variabile.

Apoi, înregistrează o nouă sarcină Gulp numită stylesheets de stil. Această sarcină urmărește fișierele care sunt în ./src/css/ cu extensia .scss (indiferent de cât de adânc sunt acestea în structura subdirectoarelor), Sass le compilează și le concatenează pe toate într-un singur fișier all.css .

Odată ce fișierul all.css este generat, acesta este transmis la PostCSS pentru a transpila tot codul asociat PostCSS (și plugin-ul) în CSS-ul real, iar apoi fișierul rezultat este plasat în ./dist/css .

OK, deci configurarea PostCSS cu un task runner și un preprocesor este grozavă, dar este suficient pentru a justifica lucrul cu PostCSS în primul rând?

Să o punem astfel: în timp ce Sass este stabil, matur și are o comunitate uriașă în spate, ar putea dori să folosim PostCSS pentru plugin-uri precum Autoprefixer, de exemplu. Da, am putea folosi biblioteca autonomă Autoprefixer, dar avantajele utilizării Autoprefixer ca plugin PostCSS este posibilitatea de a adăuga mai multe plugin-uri la fluxul de lucru mai târziu și de a evita dependențele străine de o mulțime de biblioteci JavaScript.

Această abordare ne permite, de asemenea, să folosim proprietăți fără prefix și să le avem prefixate pe baza valorilor preluate de la API-uri, cum ar fi cea de la Can I Use, ceva ce este greu de realizat folosind doar Sass. Acest lucru este destul de util dacă încercăm să evităm mixurile complexe care ar putea să nu fie cea mai bună modalitate de a prefix codul.

Cea mai obișnuită modalitate de a integra PostCSS în fluxul de lucru actual, dacă utilizați deja Sass, este să treceți rezultatul compilat al fișierului dvs. .sass sau .scss prin PostCSS și pluginurile sale. Acest lucru va genera un alt fișier CSS care are rezultatul atât Sass, cât și PostCSS.

Dacă utilizați un task runner, folosirea PostCSS este la fel de simplă ca și adăugarea acestuia la conducta de sarcini pe care o aveți în prezent, imediat după compilarea fișierului dvs. .sass sau .scss (sau fișierele preprocesorului dorit).

PostCSS se joacă bine cu ceilalți și poate fi o ușurare pentru unele probleme majore pe care le experimentăm în fiecare zi, ca dezvoltatori.

Să aruncăm o privire la un alt exemplu de PostCSS (și câteva plugin-uri precum CSSNext și Autoprefixer) și Sass care lucrează împreună. Ai putea avea următorul cod:

 :root { $sass-variable: #000; --custom-property: #fff; } body { background: $sass-variable; color: var(--custom-property); &:hover { transform: scale(.75); } }

Acest fragment de cod are CSS vanilie și sintaxă Sass. Proprietățile personalizate, din ziua scrierii acestui articol, sunt încă în starea de recomandare candidată (CR) și aici intră în acțiune pluginul CSSNext pentru PostCSS.

Acest plugin va fi responsabil să transforme lucruri precum proprietăți personalizate în CSS-ul de astăzi. Ceva similar se va întâmpla cu proprietatea de transform , care va fi prefixată automat de pluginul Autoprefixer. Codul scris mai devreme va avea ca rezultat ceva de genul:

 body { background: #000; color: #fff; } body:hover { -webkit-transform: scale(.75); transform: scale(.75); }

Crearea de pluginuri pentru PostCSS

După cum am menționat mai devreme, o caracteristică atractivă a PostCSS este nivelul de personalizare pe care îl permite. Datorită deschiderii sale, crearea unui plugin personalizat pentru PostCSS pentru a vă acoperi nevoile particulare este o sarcină destul de simplă dacă vă simțiți confortabil să scrieți JavaScript.

Oamenii de la PostCSS au o listă destul de solidă pentru a începe, iar dacă sunteți interesat să dezvoltați un plugin, verificați articolele și ghidurile recomandate. Dacă simțiți că trebuie să întrebați ceva sau să discutați ceva, Gitter este cel mai bun loc pentru a începe.

PostCSS are API-ul său cu o bază destul de activă de urmăritori pe Twitter. Alături de alte avantaje ale comunității menționate mai devreme în această postare, aceasta este ceea ce face ca procesul de creare a pluginului să fie atât de distractiv și o activitate atât de colaborativă.

Deci, pentru a crea un plugin PostCSS, trebuie să creăm un modul Node.js. (De obicei, folderele plugin PostCSS din directorul node_modules/ sunt precedate de un prefix precum „postcss-”, ceea ce înseamnă că sunt module care depind de PostCSS.)

Pentru început, în fișierul index.js al noului modul de plugin, trebuie să includem următorul cod, care va fi învelișul codului de procesare al pluginului:

 var postcss = require('postcss'); module.exports = postcss.plugin('replacecolors', function replacecolors() { return function(css) { // Rest of code } });

Am numit pluginul replacecolors . Pluginul va căuta un cuvânt cheie deepBlackText și îl va înlocui cu valoarea culorii #2e2e2e HEX:

 var postcss = require('postcss'); module.exports = postcss.plugin('replacecolors', function replacecolors() { return function(css) { css.walkRules(function(rule) { rule.walkDecls(function(decl, i) { var declaration = decl.value; if (declaration.indexOf('deepBlackText') !== -1) { declaration = 'color: #2e2e2e;'; } }); }); } });

Fragmentul anterior a făcut următoarele:

1. Folosind walkRules() a iterat prin toate regulile CSS care se află în fișierul .css curent prin care trecem.
2. Folosind walkDecls() a iterat prin toate declarațiile CSS care se află în fișierul .css curent.
3. Apoi a stocat declarația în variabila declarație și a verificat dacă șirul deepBlackText era în el. Dacă a fost, a înlocuit întreaga declarație pentru următoarea declarație CSS: color: #2e2e2e; .

Odată ce pluginul este gata, îl putem folosi astfel direct din linia de comandă:

 postcss --use postcss-replacecolors -o src/css/all.css dist/css/all.css

Sau, de exemplu, încărcat într-un fișier Gupl ca acesta:

 var replacecolors = require('postcss-replacecolors');

Ar trebui să renunț la procesorul meu CSS actual pentru a utiliza PostCSS?

Ei bine, asta depinde de ceea ce cauți.

Este obișnuit să vedeți atât Sass, cât și PostCSS utilizate în același timp, deoarece este mai ușor pentru noii veniți să lucreze cu unele dintre instrumentele pe care pre/post-procesoarele le oferă din fabricație, împreună cu funcțiile pluginurilor PostCSS. Folosirea lor una lângă alta poate evita, de asemenea, reconstruirea unui flux de lucru predefinit cu instrumente relativ noi și cel mai probabil necunoscute, oferind în același timp o modalitate de a menține implementările curente dependente de procesor (cum ar fi Sass mixins , extinde , selectorul părinte , selectoarele de substituent , și așa mai departe).

Oferă o șansă PostCSS

PostCSS este lucrul fierbinte (ei bine, un fel de) nou în lumea dezvoltării front-end. A fost adoptat pe scară largă deoarece nu este un pre/post-procesor în sine și este suficient de flexibil pentru a se adapta mediului în care este inserat.

O mare parte din puterea PostCSS rezidă în pluginurile sale. Dacă ceea ce cauți este modularitatea, flexibilitatea și diversitatea, atunci acesta este instrumentul potrivit pentru job.

Dacă utilizați task runners sau bundlere, atunci adăugarea PostCSS la fluxul dvs. actual va fi cel mai probabil o simplă. Verificați ghidul de instalare și utilizare și probabil veți găsi o modalitate ușoară de a-l integra cu instrumentele pe care le utilizați deja.

Mulți dezvoltatori spun că este aici pentru a rămâne, cel puțin pentru viitorul previzibil. PostCSS poate avea un impact mare asupra modului în care ne structurăm CSS-ul actual, iar acest lucru ar putea duce la o adoptare mult mai mare a standardelor în comunitatea de dezvoltare web front-end.