PostCSS
 Kamen mudrosti, PostCSS logo | |
| Originalni autor(i) | Andrej Sitnik, Ben Brigs, Bogdan Čedkin[1] |
|---|---|
| Prvo izdanje | 4. novembar 2013. god. |
| Stabilno izdanje | 6.0.2
/ 12. jun 2017. god.[2] |
| Repozitorijum | |
| Napisan u | Javaskript |
| Platforma | višeplatformski |
| Tip | CSS razvojni alat |
| Licenca | MIT licenca[3] |
| Veb-sajt | postcss.org |
PostCSS je softverski razvojni alat za automatizaciju rutinskih CSS operacija korišćenjem Javaskript plaginova.[4] Ovaj alat je korišćen u razvoju koda na Vikipediji,[5][6] Fejsbuku[7] i GitHab-u.[8][9] PostCSS je jedan od najpopularnijih alata među npm korisnicima. Razvio ga je Andrej Satnik na osnovu svog rada na projektu Zli Marsovci (engl. Evil Martians).[10]
Način funkcionisanja[uredi | uredi izvor]
Struktura[uredi | uredi izvor]
Za razliku od Sass-a i LESS-a, PostCSS nije šablonski jezik za kompajliranje CSS-a, već frejmvork za razvoj CSS alata,[11] iako se može koristiti za razvoj šablonskih jezika kao što su Sass i Less.[12]
PostCSS se sastoji od sledećih komponenti:[13]
- CSS parser koji generiše AST objektno stablo ѕa svaku liniju CSS koda;
- Skup klasa koje čine stablo;
- CSS generator koji generiše liniju CSS koda za objektno stablo;
- Generator mapa koda za beleženje promena u CSS-u.
Sve ove korisne funkcionalnosti su dostupne u vidu plaginova. Plaginovi su manji programi koji manipulišu objektnim stablom. Nakon transformacije CSS znakovnog niza u objektno stablo, plaginovi redom analiѕiraju i menjaju stablo. Nakon toga jezgro PostCSS-a generiše novi CSS znakovni niz za stablo.
Korišćenje[uredi | uredi izvor]
PostCSS i plaginovi su napisani u Javaskriptu i distribuirani putem npm-a.
PostCSS nudi API ѕa osnovne operacije sa JavaSkriptom:
// Учитавање језгра и плагинова са npm-а
const postcss = require('postcss')
const autoprefixer = require('autoprefixer')
const precss = require('precss')
// Плагинови који се користе
const processor = postcss([autoprefixer, precss])
// CSS код и називи фајлова за унос/уписивање
processor.process('a {}', { from: './app.css', to: './app.build.css' })
// Коришћење Promise API у случају постојања асинхроних плагинова
.then(result => {
// Приказивање пост-процесираног CSS кода
console.log(result.css)
// Приказивање поруке упозорења
for ( let message of result.warnings() ) {
console.warn(message.toString())
}
})
Za integraciju PostCSS-a i sistema za bildovanje (kao što su Vebpak,[14] Galp[15] i Grant[16]) razvijeni su zvanični alati, kao i konzola koja se može preuѕeti.[17] Browserify ili Webpack omogućavaju korišćenje PostCSS-a u veb pregledačima.[18]
Reference[uredi | uredi izvor]
- ^ Ko sve može da objavi PostCSS dodatak za npm
- ^ PostCSS izdanja
- ^ Licenca u PostCSS repozitorijumu
- ^ Prvi članak o PostCSS-u na Tuts+ kursu
- ^ Dodavanje PostCSS komita na Vikipedija repozitorijum
- ^ Vikimedija Stajlint konfiguracija
- ^ Poboljšanje kvaliteta CSS-a u kompaniji Fejsbuk i drugim
- ^ PostCSS podešavanja GitHab alata za bildovanje
- ^ Primer Stajlint konfiguracije
- ^ Evil Martians komit u PostCSS repozitorijumu
- ^ Šta je PostCSS - diskusija
- ^ PostCSS detaljno: Preprocesiranje pomoću “PreCSS”-a
- ^ Andrej Sitnik - PostCSS: Budućnost nakon Sass-a i LESS-a
- ^ postcss-loader
- ^ gulp-postcss
- ^ grunt-postcss
- ^ postcss-cli
- ^ Korišćenje PostCSS-a u veb pregledaču