PostCSS - PostCSS
 | |
| Vývojáři | Andrey Sitnik, Ben Briggs, Bogdan Chadkin |
|---|---|
| První vydání | 4. listopadu 2013 |
| Stabilní uvolnění | 8.2.8 / 9. března 2021
|
| Úložiště | postcss |
| Napsáno | JavaScript |
| Operační systém | Cross-platform |
| K dispozici v | Angličtina |
| Typ | Nástroj pro vývoj CSS |
| Licence | Licence MIT |
| webová stránka | postcss |
PostCSS je nástroj pro vývoj softwaru, který používá pluginy založené na JavaScriptu k automatizaci rutinních operací CSS . Byl navržen Andrey Sitnikem s myšlenkou, která má původ v jeho front-endové práci pro Evil Martians.
Funkčnost
PostCSS je rámec pro vývoj nástrojů CSS. Lze jej použít k vývoji šablonového jazyka, jako je Sass a LESS.
Jádro PostCSS se skládá z:
- Analyzátor CSS, který generuje abstraktní strom syntaxe
- Sada tříd, která obsahuje strom
- Generátor CSS, který generuje čáru CSS pro strom objektů
- Generátor kódové mapy pro provedené změny CSS
Funkce jsou dostupné prostřednictvím pluginů. Pluginy jsou malé programy pracující se stromem objektů . Poté, co jádro transformovalo řetězec CSS na strom objektů, pluginy analyzují a změní strom. Potom PostCSS vygeneruje nový řetězec CSS pro strom změněný pomocí pluginu.
PostCSS a jeho pluginy jsou psány v JavaScriptu a distribuovány prostřednictvím npm , které nabízejí API pro operace JavaScriptu na nízké úrovni.
Existují oficiální nástroje, které umožňují používat PostCSS s buildovacími systémy, jako jsou Webpack , Gulp a Grunt . K dispozici je také rozhraní konzoly. Browserify nebo Webpack může být použita k otevření PostCSS v prohlížeči.
Syntaxe
PostCSS umožňuje měnit analyzátor a generátor. V tomto případě lze použít PostCSS pro práci se zdroji Less a SCSS . Samotný PostCSS však nemůže kompilovat Sass nebo méně do CSS. Co dělá, je změna původních souborů - například seřazením vlastností CSS nebo kontrolou chyb v kódu. PostCSS podporuje SugarSS.
Pluginy
Pluginy PostCSS provádějí různé úlohy zpracování CSS, od analýzy a třídění vlastností až po minifikaci .
Kompletní seznam pluginů najdete na postcss.parts s několika níže uvedenými příklady.
- Autoprefixer pro přidání a vymazání předpon prohlížeče.
- Moduly CSS, které umožňují izolovat selektory CSS a organizovat kód. Je dodáván jako součást Webpacku .
- stylelint pro analýzu chyb v CSS kódu a kontrolu konzistence stylů.
- stylefmt opraví kód CSS podle nastavení stylelint.
- PreCSS k provádění některých funkcí předběžného zpracování Sass / Less .
- postcss-preset-env pro emulaci funkcí z nedokončených návrhů specifikací CSS.
- cssnano, aby se velikost CSS zmenšila odstraněním mezer a přepsáním kódu.
- RTLCSS ke změně kódu CSS tak, aby design byl vhodný pro psaní zprava doleva (používá se v arabštině a hebrejštině ).
- postcss-assets , postcss-inline-svg a postcss-sprites pro práci s grafikou.
Dějiny
V průběhu projektu Rework byla myšlenka modulárního zpracování CSS navržena TJ Holowaychuk 1. září 2012. 28. února 2013 ji TJ vyjádřila veřejně.
14. března 2013 vyústila v úvodní práci Andrey Sitnika pro Evil Martians Autoprefixer, plugin založený na přepracování. Zpočátku byl název pluginu přepracován prodejci.
Jak Autoprefixer rostl, Rework již nemohl uspokojovat své potřeby. 7. září 2013 začala Andrey Sitnik vyvíjet PostCSS na základě myšlenek Rework.
Za 3 měsíce byl vydán první plugin PostCSS, grunt-pixrem. 22. prosince 2013 došlo k migraci Autoprefixeru verze 1.0 na PostCSS.
U PostCSS je primárním zaměřením stylu alchymie . Logo projektu představuje kámen mudrců . Hlavní a vedlejší verze PostCSS dostávají svá jména po démonech Ars Goetia . Například verze 1.0.0 se nazývá Marquis Decarabia.
Termín postprocesor způsobil určité nejasnosti. Tým PostCSS použil tento výraz, aby ukázal, že PostCSS nebyl jazyk šablony (preprocesor), ale nástroj CSS. Někteří vývojáři si však myslí, že výraz postprocesor by lépe vyhovoval nástrojům prohlížeče (například -prefix-free). Po vydání PreCSS se situace ještě zkomplikovala. Nyní místo postprocesoru používá tým PostCSS výraz procesor.
