PostCSS

PostCSS
Arendaja	Andrei Sitnik, Ben Briggs, Bogdan Chadkin
Esmaväljalase	2013
Viimane väljalase	7.0.4, President Amy / 27. september 2018
Kirjutatud keeles	JavaScript
Litsents	MIT litsents
Veebisait	postcss.org

PostCSS on tarkvaraarenduse tööriist, mis kasutab JavaScripti-põhiseid pluginaid rutiinsete CSS-operatsioonide automatiseerimiseks. Seda on kasutatud Vikipeedia, Facebooki ja GitHubi arenduses. PostCSS-i looja on Andrei Sitnik, kes töötas tol ajal ettevõttes Evil Martians.

Tööpõhimõte

Struktuur

Erinevalt Sassist ja LESS-ist, PostCSS ei ole CSS-ist kompileeritud mallikeel, vaid raamistik CSS-tööriistade loomiseks. Seda saab kasutada selliste mallikeelte nagu Sass ja LESS arendamiseks.

PostCSS-i tuum koosneb järgmistest osadest:

• CSS-i parser, mis genereerib objektipuu (AST) CSS-i koodireast;
• komplekt klassidest, mida see puu sisaldab;
• CSS-generaator, mis genereerib objektipuust CSS koodi;
• koodi kaardi generaator CSS-is tehtud muudatuste jaoks.

Kõik vajaminevad funktsioonid on kättesaadavad pluginate kaudu. Pluginad on väikesed programmid, mis töötavad objektipuuga. Kui tuum on transformeerinud CSS koodi objektipuuks, pluginad analüüsivad ja muudavad seda.

Kasutus

Nii PostCSS-i tuum kui ka pluginprogrammid on kirjutatud JavaScriptis ja levitatud läbi npm-süsteemi. PostCSS pakub madala taseme JavaScripti toimingute jaoks API-d:

// Laadi tuum ja pluginad npm-ist
const postcss = require('postcss')
const autoprefixer = require('autoprefixer')
const precss = require('precss')

// Määra pluginad, mida kasutada
const processor = postcss([autoprefixer, precss])

// Määra CSS-kood ja sisend- ja väljundfailide nimed 
processor.process('a {}', { from: './app.css', to: './app.build.css' })
  // Kasuta Promise API-d juhuks, kui on olemas sünkroniseerimata pluginad
  .then(result => {
    // Protsessitud CSS-kood
    console.log(result.css)
    // Hoiatused
    for ( let message of result.warnings() ) {
      console.warn(message.toString())
    }
  })

On olemas ametlikud tööriistad, mis võimaldavad PostCSS-i kasutada koos selliste ehitamissüsteemidega nagu Webpack, Gulp ja Grunt. Lisaks on võimalik alla laadida käsureaga liidest. Kasutades Browserifyt või Webpacki, saab PostCSS-i avada otse brauseris.

Süntaksid

PostCSS võimaldab vahetada parserit ja generaatorit, et töötada LESS ja SCSS allikatega. Iseenesest PostCSS ei saa aga kompileerida LESS, SCSS ja Sass koodi CSS-iks, vaid ainult muuta originaalfaile – näiteks sorteerida CSS omadusi või otsida koodivigu.

Pluginad

PostCSS-i jaoks on olemas rohkem kui 300 laiendust. PostCSS-i pluginad lahendavad enamikku CSS-i tootmisülesandeid. Pluginate kvaliteet ja populaarsus on väga erinev.

Täielik pluginate nimekiri on leitav lehel postcss.parts. Mõned näited:

1. autoprefixer lisab ja kustutab brauserite prefikseid. See on PostCSS populaarseim plugin. SitePointi hinnangu kohasel kasutas 2016. aasta märtsis seda 56% arendajatest;
2. CSS modules automaatselt isoleerib CSS-selektoreid ja organiseerib koodi. CSS modules on Webpacki sisse ehitatud;
3. styleint analüüsib CSS koodi, otsib vigu ja kontrollib vastavust kehtivatele standarditele. styleint on kasutusel Vikipeedias, Facebookis ja GitHubis. Teine plugin, stylefmt, parandab CSS-i vastavalt styleint sätetele;
4. postcss-cssnext emuleerib funktsioone lõpetamata CSS-spetsifikatsiooni mustanditest. See on kasutusel Vikipeedias;
5. cssnano teeb CSS-i lühemaks, eemaldades tühikuid ja tihendades koodi. cssnano on kasutusel Webpackis, BBC-s ja JSFiddle’is;
6. postcss-assets, postcss-inline-svg ja postcss-sprites töötavad graafikaga.

Kriitika

Ühed pluginad on kritiseeritud, teised muutusid de facto standardiks. Näiteks autoprefikserit soovitab Google brauserite prefiksite probleemi lahendamiseks.

Üldiselt võtsid arendajad PostCSS soojalt vastu. Sassi arendajad peavad PostCSS-i heaks täienduseks Sassile.

Põhiline küsimus on järgmine: kas PostCSS-ist piisab CSS süsteemi ehitamisel. Ühelt poolt saavad sellised laiendused nagu PreCSS või postcss-cssnext asendada paljusid Sass ja LESS funktsioone. SugarSS süntaks saab asendada Sassi ja Styluse minimalistliku süntaksi. Teisest küljest aga mõned eksperdid, sealhulgas ka PostCSS-i looja, soovitavad vanades projektides kasutada Sassi ja LESSi.

Eelised

• Funktsionaalsus. Paljud PostCSS-i pluginad on unikaalsed. Sellepärast PostCSS-i kasutatakse sageli ka nendes projektides, kus on juba kasutusel Sass või LESS.
• Unifitseerimine. PostCSS-i pluginad lubavad lahendada enamikku CSS-i ehitamise ülesandeid. Tulemusena saavad kõik CSS-i tööriistad kasutada üht parserit, ühisarhitektuuri ja ühiseid arendusvahendeid. Kuna kõik pluginad kasutavad ühte ja sama ühekordselt moodustatud objektipuud, tõuseb jõudlus.
• Moodulid. Kasutaja on oma PostCSS-i pluginate valikul vaba ja võib suurema jõudluse jaoks ebavajalikud välja lülitada. Kuna probleemide lahendamiseks võib olla mitu erinevat pluginit, kasutaja saab ise valida sobivamaid tööriistu. PostCSSi looja usub, et mida suurem arv pluginaid võistlevad kasutaja tähelepanu pärast, seda paremaks nad lõpuks muutuvad.
• Kiirus. PostCSS on varustatud ühe kiireima JS-põhise CSS-i parseriga. See on kuni 20 korda kiirem kui Ruby Sassil ja 4 korda kiirem kui LESS-il, kui vaadata eeltöötlusprotsessori baasülesandeid. Tegelik jõudlus sõltub suurel määral paigaldatud pluginate arvust. PostCSS-i looja on öelnud, et kaasaegsed eeltöötlusprotsessorid töötavad liiga kiiresti, et kiirendus oleks märgatav.

Puudused

• Raske konfigureerida. Mõned arendajad kipuvad vältima pluginate valimist ja nende sätestamist. Valmis pluginate komplektid on probleemile ainult osaline lahendus.
• Mittestandardne süntaks. Kuna iga projekt kasutab oma pluginate komplekti, ei pruugi uus arendaja kohe mõista, et mingi talle tundmatu funktsioon on seotud ebapopulaarse PostCSS-i pluginaga. Soovitatav on kasutada postcss-use, et näidata iga faili nimelaiendit, kuid paljud ei kasuta sellist lähenemist.
• Eraldi parserid selektorite ja väärtuste jaoks. PostCSS salvestab CSS-selektoreid ja ridade väärtuseid ilma neid täiendavalt analüüsimata. Nende parsimiseks peavad pluginad kasutama lisaparsereid. PostCSS-i meeskond kavatseb seda tulevastes versioonides parandada.
• Järkjärguline töötlemine. Kuna objektipuu suudab korraga reageerida ainult ühele pluginale, võib arvukate pluginate kasutamine vähendada jõudlust. Lisaks on funktsioone, mida ükski plugin ei saa töödelda. PostCSS-i meeskond kavatseb seda tulevastes versioonides parandada.

Välislingid

• Ametlik veebisait
• Pluginate nimekiri