PostCSS: la nuova data di gioco di Sass

Ultimamente, PostCSS è lo strumento che fa il giro del front-end dello sviluppo web.

PostCSS è stato sviluppato da Andrey Sitnik, il creatore di Autoprefixer. È un pacchetto Node.js sviluppato come strumento per trasformare tutti i tuoi CSS utilizzando JavaScript, ottenendo così tempi di compilazione molto più rapidi rispetto ad altri processori.

Nonostante ciò che sembra implicare il suo nome, non è un post-processore (né un pre-processore), ma piuttosto è un transpiler per trasformare la sintassi specifica di PostCSS (o specifica del plug-in PostCSS, per essere più precisi) in CSS alla vaniglia.

Detto questo, ciò non significa che PostCSS e altri processori CSS non possano lavorare insieme. In effetti, se sei nuovo nell'intero mondo della pre/post-elaborazione CSS, l'utilizzo di PostCSS insieme a Sass può farti risparmiare molti mal di testa, di cui parleremo a breve.

PostCSS non sostituisce altri processori CSS; piuttosto, guardalo come un altro strumento che può tornare utile quando necessario, un'altra aggiunta al tuo set di strumenti.

L'uso di PostCSS ha recentemente iniziato ad aumentare in modo esponenziale, essendo utilizzato oggi da alcune delle più grandi aziende del settore tecnologico, come Twitter, JetBrains e Wikipedia. La sua diffusa adozione e successo è in gran parte dovuto alla sua modularità.

Plugin, Plugin, Plugin

PostCSS è tutto incentrato sui plugin.

Ti consente di scegliere i plug-in che utilizzerai, eliminando le dipendenze non necessarie e offrendoti una configurazione rapida e leggera con cui lavorare, con le caratteristiche di base di altri preprocessori. Inoltre, ti consente di creare una struttura maggiormente personalizzata per il tuo flusso di lavoro mantenendolo efficiente.

Alla data di scrittura di questo post, PostCSS ha un repository di oltre 200 plugin, ognuno dei quali incaricato di compiti diversi. Nel repository GitHub di PostCSS, i plug-in sono classificati in base a "Risolvi problemi CSS globali", "Utilizza CSS futuri, oggi", "Migliore leggibilità CSS", "Immagini e caratteri", "Linter" e "Altri".

Tuttavia, nella directory dei plugin troverai una categorizzazione più accurata. Ti consiglio di dare un'occhiata tu stesso per avere un'idea migliore delle capacità di alcuni di loro; sono piuttosto ampi e piuttosto impressionanti.

Probabilmente hai sentito parlare del plug-in PostCSS più popolare, Autoprefixer, che è una popolare libreria autonoma. Il secondo plug-in più popolare è CSSNext, un plug-in che ti consente di utilizzare la sintassi CSS più recente oggi, come le nuove proprietà personalizzate dei CSS, ad esempio, senza preoccuparti del supporto del browser.

Tuttavia, non tutti i plug-in PostCSS sono così innovativi. Alcuni semplicemente ti danno capacità che probabilmente escono dalla scatola con altri processori. Prendi ad esempio il parent selector . Con Sass, puoi iniziare a usarlo immediatamente durante l'installazione di Sass. Con PostCSS, è necessario utilizzare il postcss-nested-ancestors . Lo stesso potrebbe valere per extends o mixins .

Allora, qual è il vantaggio dell'utilizzo di PostCSS e dei suoi plugin? La risposta è semplice: puoi scegliere le tue battaglie. Se ritieni che l'unica parte di Sass che utilizzerai sia il parent selector , puoi risparmiarti lo stress di implementare qualcosa come l'installazione di una libreria Sass nel tuo ambiente per compilare il tuo CSS e accelerare il processo usando solo PostCSS e il postcss-nested-ancestors .

Questo è solo un caso d'uso di esempio per PostCSS, ma una volta che inizi a verificarlo tu stesso, realizzerai senza dubbio molti altri casi d'uso per esso.

Utilizzo di base di PostCSS

Per prima cosa, esaminiamo alcune nozioni di base di PostCSS e diamo un'occhiata a come viene generalmente utilizzato. Sebbene PostCSS sia estremamente potente se utilizzato con un task runner, come Gulp o Grunt, può anche essere utilizzato direttamente dalla riga di comando utilizzando postcss-cli.

Consideriamo un semplice caso d'uso di esempio. Supponiamo di voler utilizzare il plug-in postcss-color-rgba-fallback per aggiungere un valore HEX di fallback a tutti i nostri colori formattati RGBA.

Dopo aver installato NPM postcss , postcss-cli e postcss-color-rgba-fallback , è necessario eseguire il comando seguente:

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

Con questa istruzione, stiamo dicendo a PostCSS di utilizzare il postcss-color-rgba-fallback , elaborare qualsiasi CSS sia all'interno di src/css/all.css e inviarlo a dist/css/all.css .

OK, è stato facile. Ora, diamo un'occhiata a un esempio più complesso.

Utilizzo di PostCSS insieme a Task-runners e Sass

PostCSS può essere incorporato nel tuo flusso di lavoro piuttosto facilmente. Come già accennato, si integra perfettamente con i task runner come Grunt, Gulp o Webpack e può anche essere utilizzato con gli script NPM. Un esempio di utilizzo di PostCSS insieme a Sass e Gulp è semplice come il seguente frammento di codice:

 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')) ) });

Decostruiamo l'esempio di codice sopra.

Memorizza i riferimenti a tutti i moduli necessari (Gulp, Contact CSS, Sass, PostCSS e CSSNext) in una serie di variabili.

Quindi, registra una nuova attività Gulp chiamata stylesheets di stile. Questa attività controlla i file che si trovano in ./src/css/ con estensione .scss (indipendentemente dalla profondità della struttura della sottodirectory), Sass li compila e li concatena tutti in un unico file all.css .

Una volta generato, il file all.css viene passato a PostCSS per trasporre tutto il codice relativo a PostCSS (e plug-in) nel CSS effettivo, quindi il file risultante viene inserito in ./dist/css .

OK, quindi configurare PostCSS con un task runner e un preprocessore è fantastico, ma è sufficiente per giustificare il lavoro con PostCSS in primo luogo?

Mettiamola così: mentre Sass è stabile, maturo e ha una vasta comunità dietro, potremmo voler usare PostCSS per plugin come Autoprefixer, per esempio. Sì, potremmo utilizzare la libreria Autoprefixer standalone, ma i vantaggi dell'utilizzo di Autoprefixer come plug-in PostCSS sono la possibilità di aggiungere più plug-in al flusso di lavoro in un secondo momento ed evitare dipendenze estranee su un carico di librerie JavaScript.

Questo approccio ci consente anche di utilizzare proprietà senza prefisso e di averle come prefisso in base ai valori recuperati dalle API, come quella di Can I Use, cosa difficilmente realizzabile utilizzando Sass da solo. Questo è abbastanza utile se stiamo cercando di evitare mixin complessi che potrebbero non essere il modo migliore per anteporre il codice.

Il modo più comune per integrare PostCSS nel flusso di lavoro corrente, se stai già utilizzando Sass, è passare l'output compilato del tuo file .sass o .scss tramite PostCSS e i suoi plug-in. Questo genererà un altro file CSS che ha l'output di Sass e PostCSS.

Se stai usando un task runner, usare PostCSS è facile come aggiungerlo alla pipeline di attività che hai attualmente, subito dopo aver compilato il tuo file .sass o .scss (o i file del tuo preprocessore preferito).

PostCSS funziona bene con gli altri e può essere un sollievo per alcuni importanti punti deboli che come sviluppatori sperimentiamo ogni giorno.

Diamo un'occhiata a un altro esempio di PostCSS (e un paio di plugin come CSSNext e Autoprefixer) e Sass che lavorano insieme. Potresti avere il seguente codice:

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

Questo frammento di codice ha la sintassi CSS e Sass vanilla. Le proprietà personalizzate, dal giorno della stesura di questo articolo, sono ancora nello stato di Candidate Recommendation (CR), ed è qui che entra in azione il plugin CSSNext per PostCSS.

Questo plugin sarà incaricato di trasformare cose come le proprietà personalizzate nel CSS di oggi. Qualcosa di simile accadrà alla proprietà transform , che verrà prefissata automaticamente dal plug-in Autoprefixer. Il codice scritto in precedenza risulterà quindi in qualcosa del tipo:

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

Plugin di creazione per PostCSS

Come accennato in precedenza, una caratteristica interessante di PostCSS è il livello di personalizzazione che consente. Grazie alla sua apertura, creare un plug-in personalizzato per PostCSS per soddisfare le tue esigenze particolari è un compito piuttosto semplice se ti senti a tuo agio nella scrittura di JavaScript.

Le persone di PostCSS hanno un elenco piuttosto solido da cui partire e, se sei interessato a sviluppare un plug-in, controlla i loro articoli e guide consigliati. Se ritieni di dover chiedere qualcosa o discutere di qualsiasi cosa, Gitter è il punto di partenza migliore.

PostCSS ha la sua API con una base piuttosto attiva di follower su Twitter. Insieme ad altri vantaggi della community menzionati in precedenza in questo post, questo è ciò che rende il processo di creazione del plug-in così divertente e un'attività così collaborativa.

Quindi, per creare un plug-in PostCSS, dobbiamo creare un modulo Node.js. (Di solito, le cartelle dei plug-in PostCSS nella directory node_modules/ sono precedute da un prefisso come "postcss-", che serve a rendere esplicito che si tratta di moduli che dipendono da PostCSS.)

Per cominciare, nel file index.js del nuovo modulo plugin, dobbiamo includere il seguente codice, che sarà il wrapper del codice di elaborazione del plugin:

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

Abbiamo chiamato il plugin replacecolors . Il plugin cercherà una parola chiave deepBlackText e la sostituirà con il valore del colore HEX #2e2e2e :

 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;'; } }); }); } });

Lo snippet precedente ha appena eseguito quanto segue:

1. Usando walkRules() ha ripetuto tutte le regole CSS che sono nel file .css corrente che stiamo esaminando.
2. Usando walkDecls() ha ripetuto tutte le dichiarazioni CSS che si trovano all'interno del file .css corrente.
3. Quindi ha archiviato la dichiarazione all'interno della variabile di dichiarazione e ha verificato se la stringa deepBlackText era al suo interno. Se lo era, ha sostituito l'intera dichiarazione per la seguente dichiarazione CSS: color: #2e2e2e; .

Una volta che il plugin è pronto, possiamo usarlo in questo modo direttamente dalla riga di comando:

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

Oppure, ad esempio, caricato in un Guplfile come questo:

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

Devo abbandonare il mio attuale processore CSS per utilizzare PostCSS?

Beh, dipende da cosa stai cercando.

È comune vedere sia Sass che PostCSS utilizzati contemporaneamente, poiché è più facile per i nuovi arrivati ​​​​lavorare con alcuni degli strumenti offerti dai pre/post-processori, insieme alle funzionalità dei plug-in PostCSS. Il loro utilizzo affiancato può anche evitare di ricostruire un flusso di lavoro predefinito con strumenti relativamente nuovi e molto probabilmente sconosciuti, fornendo al contempo un modo per mantenere le attuali implementazioni dipendenti dal processore (come Sass mixins , extends , the parent selector , placeholder selector , e così via).

Dai una possibilità a PostCSS

PostCSS è la novità (beh, una specie di) nuova nel mondo dello sviluppo front-end. È stato ampiamente adottato perché non è un pre/post-processore di per sé ed è sufficientemente flessibile da adattarsi all'ambiente in cui viene inserito.

Gran parte della potenza di PostCSS risiede nei suoi plugin. Se quello che stai cercando è modularità, flessibilità e diversità, allora questo è lo strumento giusto per il lavoro.

Se stai utilizzando task runner o bundler, molto probabilmente aggiungere PostCSS al tuo flusso attuale sarà un gioco da ragazzi. Controlla la guida all'installazione e all'uso e probabilmente troverai un modo semplice per integrarla con gli strumenti che stai già utilizzando.

Molti sviluppatori affermano che è qui per restare, almeno per il prossimo futuro. PostCSS può avere un grande impatto sul modo in cui strutturiamo il nostro CSS attuale e ciò potrebbe potenzialmente portare a un'adozione molto maggiore degli standard nella comunità di sviluppo web front-end.