PostCSS

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. 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. 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. 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. 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: autoprefixer lisab ja kustutab brauserite prefikseid. See on PostCSS populaarseim plugin. SitePointi hinnangu kohasel kasutas 2016. aasta märtsis seda 56% arendajatest; CSS modules automaatselt isoleerib CSS-selektoreid ja organiseerib koodi. CSS modules on Webpacki sisse ehitatud; 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; postcss-cssnext emuleerib funktsioone lõpetamata CSS-spetsifikatsiooni mustanditest. See on kasutusel Vikipeedias; cssnano teeb CSS-i lühemaks, eemaldades tühikuid ja tihendades koodi. cssnano on kasutusel Webpackis, BBC-s ja JSFiddle’is; postcss-assets, postcss-inline-svg ja postcss-sprites töötavad graafikaga. Ü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. 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. 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. Who can release PostCSS to npm vaadatud 05.11.2018 PostCSS Releases vaadatud 05.11.2018 License in PostCSS repo vaadatud 05.11.2018 Esimene artikkel PostCSS-i kohta Tuts+ kursusel envatotuts+. Vaadatud 05.11.2018 Adding PostCSS commit in Wikipedia repo GitHub. Vaadatud 05.11.2018 Wikimedia Stylelint Config GitHub. Vaadatud 05.11.2018 Improving CSS quality at Facebook and beyond code.fb.com. Vaadatud 05.11.2018 PostCSS settings GitHub build tool GitHub. Vaadatud 05.11.2018 Primer Stylelint Config GitHub. Vaadatud 05.11.2018 Evil Martians commit in PostCSS repo GitHub. Vaadatud 05.11.2018 What is PostCSS arutelu GitHub. Vaadatud 05.11.2018 PostCSS Deep Dive: Preprocessing with "PreCSS" envatotuts+. Vaadatud 05.11.2018 Andrey Sitnik - PostCSS: The Future After Sass and LESS YouTube. Vaadatud 05.11.2018 postcss-loader GitHub. Vaadatud 05.11.2018 gulp-postcss GitHub. Vaadatud 05.11.2018 grunt-postcss GitHub. Vaadatud 05.11.2018 postcss-cli GitHub. Vaadatud 05.11.2018 Running postcss in the browser GitHub. Vaadatud 05.11.2018 postcss-less GitHub. Vaadatud 05.11.2018 postcss-scss GitHub. Vaadatud 05.11.2018 PostCSS plugins list GitHub. Vaadatud 05.11.2018 autoprefixer GitHub. Vaadatud 05.11.2018 The Results of The Ultimate CSS Survey Sitepoint. Vaadatud 05.11.2018 css-modules GitHub. Vaadatud 05.11.2018 css-loader dependencies GitHub. Vaadatud 05.11.2018 stylelint styleint. Vaadatud 05.11.2018 cssnext.io cssnext. Vaadatud 05.11.2018 cssnano.co cssnano. Vaadatud 05.11.2018 cssnano users list GitHub. Vaadatud 05.11.2018 postcss-assets GitHub. Vaadatud 05.11.2018 postcss-inline-svg GitHub. Vaadatud 05.11.2018 postcss-sprites GitHub. Vaadatud 05.11.2018 The Trouble With Preprocessing Based on Future Specs CSS-TRICKS. Vaadatud 05.11.2018 Set Up Your Build Tools developers.google.com. Vaadatud 05.11.2018 Extending Sass with PostCSS CSS-TRICKS. Vaadatud 05.11.2018 Breaking up with Sass: it’s not you, it’s me benfrain.com. Vaadatud 05.11.2018 SugarSS discussion on Meteor forum Meteor. Vaadatud 05.11.2018 dotCSS 2015 - Andrey Sitnik - Fix Global CSS with PostCSS YouTube. Vaadatud 05.11.2018 Using PostCSS Together with Sass, Stylus, or LESS envatotuts+. Vaadatud 05.11.2018 Arutelu PostCSS-i jõudluse üle Twitteris Twitter. Vaadatud 05.11.2018 PostCSS parsers benchmark GitHub. Vaadatud 05.11.2018 PostCSS becomes 1.5x faster Evil Martians’ team blog. Vaadatud 05.11.2018 The Sad State of Web Development Medium. Vaadatud 05.11.2018 postcss-use downloads npm-stat.com. Vaadatud 05.11.2018 Integrate value & selector parsing into PostCSS core GitHub. Vaadatud 05.11.2018 Event based API GitHub. Vaadatud 05.11.2018 Ametlik veebisait Pluginate nimekiri