PostCSS - PostCSS
 | |
| Udvikler (r) | Andrey Sitnik, Ben Briggs, Bogdan Chadkin |
|---|---|
| Første udgivelse | 4. november 2013 |
| Stabil frigivelse | 8.2.8 / 9. marts 2021
|
| Datalager | postcss |
| Skrevet i | JavaScript |
| Operativ system | Tværplatform |
| Tilgængelig i | engelsk |
| Type | CSS-udviklingsværktøj |
| Licens | MIT-licens |
| Internet side | postcss |
PostCSS er et softwareudviklingsværktøj, der bruger JavaScript- baserede plugins til at automatisere rutinemæssige CSS- operationer. Det blev designet af Andrey Sitnik med ideen, der fik sin oprindelse i hans front-end arbejde for Evil Martians.
Funktionalitet
PostCSS er en ramme til udvikling af CSS-værktøjer. Det kan bruges til at udvikle et skabelonsprog som Sass og LESS.
PostCSS-kernen består af:
- CSS- parser, der genererer et abstrakt syntaks-træ
- Sæt med klasser, der omfatter træet
- CSS-generator, der genererer en CSS-linje til objekttræet
- Kodekortgenerator til foretagne CSS-ændringer
Funktioner gøres tilgængelige via plugins. Plugins er små programmer, der arbejder med objekttræet . Efter at kernen har transformeret en CSS-streng til et objekttræ, analyserer og ændrer plugins træet. Derefter genererer PostCSS en ny CSS-streng til det plugin-ændrede træ.
PostCSS og dets plugins er skrevet i JavaScript og distribueres gennem npm , som tilbyder API'er til JavaScript-operationer på lavt niveau.
Der er officielle værktøjer, der gør det muligt at bruge PostCSS med build-systemer som Webpack , Gulp og Grunt . Der er også en konsolgrænseflade tilgængelig. Browserify eller Webpack kan bruges til at åbne PostCSS i en browser.
Syntakser
PostCSS tillader ændring af parser og generator. I dette tilfælde kan PostCSS bruges til at arbejde med mindre og SCSS kilder. Imidlertid kan PostCSS alene ikke kompilere Sass eller Less til CSS. Hvad det gør er at ændre de originale filer - for eksempel ved at sortere CSS-egenskaberne eller kontrollere koden for fejl. PostCSS understøtter SugarSS.
Plugins
PostCSS-plugins udfører forskellige CSS-behandlingsopgaver lige fra analyse og egenskabssortering til minificering .
Den komplette plugin-liste kan findes på postcss.parts med nogle eksempler nedenfor.
- Autofrefixer for at tilføje og rydde browserpræfikser.
- CSS-moduler for at få CSS-vælgerne isoleret og kodeorganiseret. Den leveres som en del af Webpack .
- stylelint til at analysere CSS-kode for fejl og kontrollere stilkonsistens .
- stylefmt løser CSS-koden i henhold til stilelint-indstillingerne.
- PreCSS til at udføre nogle Sass / Less forbehandlingsfunktioner.
- postcss-preset-env for at efterligne funktioner fra ufærdige CSS-specifikationskladder.
- cssnano for at gøre CSS mindre i størrelse ved at slippe af mellemrummene og omskrive koden.
- RTLCSS for at ændre CSS-kode, så designet skal være egnet til skrivning fra højre mod venstre (sådan anvendes på arabisk og hebraisk ).
- postcss-aktiver , postcss-inline-svg og postcss-sprites til at arbejde med grafik.
Historie
I løbet af Rework-projektet blev ideen om modulær CSS-behandling foreslået af TJ Holowaychuk 1. september 2012. 28. februar 2013 udtrykte TJ det offentligt.
14. marts 2013 resulterede Andrey Sitniks front-end-arbejde for Evil Martians i Autoprefixer, et Rework-baseret plugin. Oprindeligt var pluginnavnet omarbejdningsleverandører.
Da Autoprefixer voksede, kunne Rework ikke længere opfylde dets behov. 7. september 2013 begyndte Andrey Sitnik at udvikle PostCSS baseret på Rework-idéerne.
I løbet af 3 måneder blev det første PostCSS-plugin, grunt-pixrem frigivet. 22. december 2013, Autoprefixer version 1.0 migreret til PostCSS.
For PostCSS er det primære stilfokus alkymi . Projektets logo repræsenterer filosofens sten . Store og mindre PostCSS-versioner får deres navne efter Ars Goetia- dæmoner . For eksempel kaldes version 1.0.0 Marquis Decarabia.
Udtrykket postprocessor har forårsaget en vis forvirring. PostCSS-teamet brugte udtrykket til at vise, at PostCSS ikke var et skabelonsprog (præprocessor), men et CSS-værktøj. Imidlertid mener nogle udviklere, at udtrykket postprocessor bedre passer til browserværktøjer (for eksempel -prefix-fri). Situationen er blevet endnu mere kompliceret efter frigivelsen af PreCSS. Nu, i stedet for postprocessor, bruger PostCSS-teamet udtrykket processor.
