PostCSS

PostCSS
Typ automatizace  CSS
Vývojáři Andrey Sitnik, Ben Briggs, Bogdan Chadkin [1]
Zapsáno v JavaScript
Operační systém Víceplatformní
První vydání 4. listopadu 2013 [2]
Nejnovější verze 8.0.0 (prezident Ose) (15. září 2020 [3] )
Stát aktivní
Licence Licence MIT [4]
webová stránka postcss.org

PostCSS je program , který automatizuje rutinní CSS operace pomocí rozšíření napsaných v JavaScriptu [5] . Používá se při vývoji Wikipedie [6] [7] , Facebooku [8] a GitHubu [9] [10] . Jeden z nejčastěji stahovaných CSS nástrojů z npm [11] . Vyvinul Andrey Sitnik ve společnosti "Evil Martians" [12] .

Jak to funguje

Struktura

Na rozdíl od Sass a LESS není PostCSS šablonovacím jazykem, který se kompiluje do CSS. PostCSS je platforma, na které můžete vytvářet různé CSS nástroje [13] . Zejména PostCSS lze také použít k vytvoření šablonovacího jazyka, jako je Sass a LESS [14] .

Jádro PostCSS se skládá z: [15]

Všechny užitečné funkce poskytují rozšíření - malé programy, které pracují se stromem objektů . Poté, co jádro transformuje řetězec CSS na strom objektů, rozšíření analyzují a upravují strom postupně. Jádro PostCSS pak vygeneruje nový řetězec CSS ze stromu, který byl upraven rozšířeními.

Použití

Rozšíření jádra i PostCSS jsou napsána v JavaScriptu . Všechny jsou distribuovány prostřednictvím systému npm .

PostCSS poskytuje API pro práci s JavaScriptem na nízké úrovni:

// Načíst jádro a rozšíření z npm const postcss = vyžadovat ( 'postcss' ) const autoprefixer = vyžadovat ( 'autoprefixer' ) const precss = vyžadovat ( 'precss' ) // Určete, která rozšíření chceme použít const processor = postcss ([ autoprefixer , precss ]) // Zadejte kód CSS a název vstupního/výstupního souboru procesor . process ( 'a {}' , { from : './app.css' , to : './app.build.css' }) // Použití rozhraní Promise API pro asynchronní rozšíření . then ( result => { // Výstup kódu CSS po zpracování console . log ( result . css ) // Zobrazení varování z rozšíření pro ( let message of result . warnings () ) { console . warning ( message . toString ()) } })

Existují oficiální nástroje pro použití PostCSS se sestavovacími systémy jako Webpack [16] , Gulp [17] , Grunt [18] . Konzolové rozhraní [19] je dodáváno samostatně . S pomocí Browserify nebo Webpack bundleru lze PostCSS spustit v prohlížeči [20] .

Syntaxe

Vývojář používající PostCSS může změnit parser a generátor - pak bude PostCSS pracovat s takovými zdroji, jako jsou: LESS [21] , SCSS [22] , Sass [23] . PostCSS sám ale neumí LESS, SCSS nebo Sass zkompilovat do CSS, pouze upravuje původní zdrojové soubory, jako je řazení vlastností CSS nebo hledání chyb v kódu.

Může také používat syntaxi SugarSS, inspirovanou kompaktní syntaxí Sass a Stylus [24] .

Rozšíření

Pro PostCSS bylo napsáno přes 300 rozšíření [25] . Rozšíření PostCSS mohou vyřešit většinu úloh zpracování CSS, od analýzy a třídění vlastností až po kompresi. Kvalita a oblíbenost rozšíření se přitom velmi liší.

Kompletní seznam rozšíření najdete na postcss.parts . Několik příkladů:

  • Autoprefixer [26] – přidává a čistí předpony prohlížeče. Jedná se o nejoblíbenější rozšíření PostCSS , v březnu 2016 jej použilo 56 % vývojářů, podle SitePoint27
  • CSS Modules [28] je automatický systém pro izolaci selektorů CSS a organizování kódu. Zabudováno do oblíbeného balíčku Webpack [29] .
  • Stylelint [30] – analyzuje chyby v kódu CSS a také dodržuje přijatý styl. Používá Wikipedia [7] , Facebook [8] a GitHub [10] . Další rozšíření stylefmt [31] opravuje CSS podle nastavení Stylelint.
  • PreCSS [32] je sada rozšíření, která opakují některé funkce preprocesorů jako Sass nebo LESS.
  • postcss-preset-env [33] je sada rozšíření pro emulaci funkcí z nedokončených návrhů specifikací CSS.
  • cssnano [34] - snižuje velikost kódu CSS odstraněním mezer a přepsáním kódu do stručné podoby. Používá Webpack, BBC a JSFiddle [35] .
  • RTLCSS [36] - Změní kód CSS tak, aby byl design vhodný pro psaní zprava doleva (jako v arabštině a hebrejštině ). Používá se ve WordPressu [37] .
  • postcss-assets [38] , postcss-inline-svg [39] a postcss-sprites [40] pro práci s grafikou.

Některé nástroje, které nejsou rozšířeními PostCSS, používají ke své práci PostCSS. Například oblíbený Webpack builder obsahuje PostCSS pro práci s CSS [41] .

Kritika

Zatímco některá rozšíření byla kritizována [42] , jiná se stala de facto standardem. Google například doporučuje Autoprefixer k vyřešení problému s předponami prohlížeče v CSS [43] .

Celkově byl PostCSS průmyslem dobře přijat [44] . Dokonce i vývojáři Sass považují PostCSS za dobrý doplněk k Sass [45] .

Hlavní diskutovanou otázkou je, zda má cenu stavět systém CSS pouze na rozšíření PostCSS. Na jedné straně mohou rozšíření PreCSS nebo postcss-cssnext nahradit mnoho funkcí Sass a LESS [46] . Syntaxe SugarSS může nahradit kompaktní syntaxi Sass a Stylus [47] . Ale na druhou stranu sám autor PostCSS nedoporučuje ve starých projektech ustupovat od Sass a LESS [48] .

Výhody

  • Funkčnost. Mnoho rozšíření PostCSS je jedinečných [49] . PostCSS se proto používá i v projektech, které již mají Sass nebo LESS [50] .
  • Unifikace. Rozšíření PostCSS umožňují řešit téměř všechny úlohy sestavení CSS [51] – od hledání chyb v kódu až po kompresi. Díky tomu mohou všechny nástroje CSS používat jeden analyzátor, jedinou architekturu a společné vývojové nástroje. Všechna rozšíření použijí analyzovaný strom objektů jednou, což má pozitivní vliv na výkon [13] .
  • Modularita. Každý uživatel si vybere rozšíření PostCSS a může z důvodu výkonu zakázat nepotřebná rozšíření [52] . Jelikož existují různá rozšíření pro řešení stejných problémů, uživatel si může vybrat nástroje, které jsou pro něj nejvhodnější [53] . Autor PostCSS se domnívá, že konkurence rozšíření stimuluje jejich rozvoj [15] .
  • Rychlost práce. PostCSS má jeden z nejrychlejších analyzátorů CSS napsaný v JS [54] . Na základních preprocesorových úlohách může běžet až 20krát rychleji než Ruby Sass a 4krát rychleji než LESS [55] . Skutečný výkon však velmi závisí na počtu rozšíření. I sami autoři PostCSS si všímají, že moderní preprocesory jsou již příliš rychlé a zrychlení často není vidět [56] .

Nevýhody

  • Obtížnost nastavení. Někteří vývojáři považují za zastrašující vybrat rozšíření a nakonfigurovat je tak, aby spolupracovaly [57] . Hotové rozšiřující sady tento problém řeší jen částečně.
  • Nestandardní syntaxe. Každý projekt může používat vlastní sadu rozšíření. Nový vývojář si možná neuvědomuje, že funkce, kterou nezná, souvisí s nepopulárním rozšířením PostCSS [45] . Autor doporučuje postcss-use explicitně specifikovat přípony pro každý soubor [48] , ale tento přístup nepoužívá každý [58] .
  • Samostatné analyzátory pro selektory a hodnoty. PostCSS ukládá selektory CSS a hodnoty vlastností jako řetězce, aniž by je dále analyzoval. Rozšíření musí k analýze používat další analyzátory. Tým PostCSS to napraví v budoucích verzích [59] .
  • sekvenční zpracování. Každé rozšíření postupně prochází stromem objektů, což může ovlivnit výkon, pokud existuje velký počet rozšíření. Některé vnořené funkce teoreticky rozšíření nezvládnou. Tým PostCSS to napraví v budoucích verzích [60] .

Historie

Myšlenku modulárního nástroje pro CSS poprvé navrhl TJ Holowaychuk 1. září 2012 v projektu Rework [61] . 28. února 2013 o ní TJ veřejně mluvila [62] .

14. března 2013 Andrey Sitnik ve společnosti Evil Martians vytvořil rozšíření Autoprefixer založené na Rework [63] . Rozšíření se původně jmenovalo „rework-vendors“ [64] .

S růstem Autoprefixeru byly zjištěny problémy při implementaci Rework [65] . Proto 7. září 2013 [66] Andrey Sitnik začal vyvíjet PostCSS na základě myšlenek Rework [67] .

Po 3 měsících byl vydán první plugin pro PostCSS - grunt-pixrem [68] . 22. prosince 2013 [69] , Autoprefixer přešel na PostCSS ve verzi 1.0.

PostCSS aktivně využívá téma alchymie ve své symbolice [70] . Logo projektu je znakem kamene mudrců [71] . Hlavní a vedlejší verze PostCSS dostávají jména démonů „Goetia“ [72] . Například název verze 1.0.0 je „Marquis Decarabia“.

Určité problémy nastaly s pojmem „postprocesor“ [73] . Tým PostCSS použil tento termín, aby ukázal, že PostCSS není šablonovací jazyk (preprocesor), ale pracuje s CSS [74] . Jiní vývojáři se však domnívají, že termín „postprocessor“ se lépe hodí pro nástroje, které běží v prohlížeči [42] (například -prefix-free ). Vydání rozšíření PreCSS nakonec situaci komplikuje. Tým PostCSS nyní používá termín „processor“ místo „postprocessor“ [75] .

Poznámky

  1. ↑ Vývojáři, kteří dokážou přenést verze PostCSS do npm . Získáno 20. 8. 2016. Archivováno z originálu 20. 9. 2016.
  2. ↑ Potvrzení aktualizace PostCSS na 0.1
  3. ↑ Vydání PostCSS . Získáno 20. 8. 2016. Archivováno z originálu 10. 5. 2017.
  4. ↑ Licence v úložišti PostCSS . Získáno 20. 8. 2016. Archivováno z originálu 10. 5. 2017.
  5. ↑ První článek kurzu Tuts+ PostCSS . Získáno 20. srpna 2016. Archivováno z originálu dne 27. srpna 2016.
  6. ↑ Změna, která přidává PostCSS do systému sestavování portálu Wikipedie . Získáno 20. 8. 2016. Archivováno z originálu 10. 5. 2017.
  7. ↑ 1 2 Wikimedia Stylelint Config . Získáno 20. 8. 2016. Archivováno z originálu 10. 5. 2017.
  8. ↑ 1 2 Zlepšení kvality CSS na Facebooku i mimo něj . Získáno 20. srpna 2016. Archivováno z originálu 11. října 2016.
  9. ↑ Nastavení PostCSS v sestavovacím systému GitHub Archivováno 23. srpna 2016.
  10. ↑ 1 2 Primer Stylelint Config . Získáno 20. 8. 2016. Archivováno z originálu 10. 5. 2017.
  11. ↑ Porovnání počtu stažení preprocesoru . Získáno 20. srpna 2016. Archivováno z originálu dne 26. srpna 2016.
  12. ↑ Přidání sponzora do popisu projektu . Získáno 20. 8. 2016. Archivováno z originálu 10. 5. 2017.
  13. ↑ 1 2 Diskuse o tom, co je PostCSS . Získáno 20. 8. 2016. Archivováno z originálu 10. 5. 2017.
  14. ↑ PostCSS Deep Dive: Předzpracování pomocí „PreCSS“ . Získáno 20. srpna 2016. Archivováno z originálu 9. srpna 2016.
  15. ↑ 1 2 Andrey Sitnik - PostCSS: Budoucnost po Sass a LESS . Získáno 20. srpna 2016. Archivováno z originálu 5. srpna 2017.
  16. ↑ postcss-loader . Získáno 20. srpna 2016. Archivováno z originálu 21. února 2017.
  17. ↑ gulp-postcss . Získáno 20. srpna 2016. Archivováno z originálu 28. prosince 2016.
  18. ↑ grunt-postcss . Získáno 20. 8. 2016. Archivováno z originálu 10. 5. 2017.
  19. ↑ postcss-cli . Získáno 20. 8. 2016. Archivováno z originálu 10. 5. 2017.
  20. ↑ Spuštění postcss v prohlížeči . Získáno 20. 8. 2016. Archivováno z originálu 10. 5. 2017.
  21. ↑ postcss-less
  22. ↑ postcss-scss . Získáno 20. srpna 2016. Archivováno z originálu 6. března 2017.
  23. ↑ Oleh Aloshkin. Parser Sass pro PostCSS pomocí gonzales-pe. https://www.npmjs.com/package/postcss-sass _ — 2018-01-25. Archivováno z originálu 28. ledna 2019.
  24. ↑ cukry . Získáno 20. 8. 2016. Archivováno z originálu 10. 5. 2017.
  25. ↑ Seznam rozšíření PostCSS . Získáno 20. 8. 2016. Archivováno z originálu 10. 5. 2017.
  26. ↑ autoprefixer . Získáno 20. srpna 2016. Archivováno z originálu dne 26. července 2016.
  27. ↑ Výsledky The Ultimate CSS Survey . Získáno 20. 8. 2016. Archivováno z originálu 14. 5. 2016.
  28. ↑ css-moduly . Získáno 20. 8. 2016. Archivováno z originálu 4. 7. 2016.
  29. ↑ Závislosti css-loaderu
  30. ↑ Stylelint . Získáno 20. 8. 2016. Archivováno z originálu 24. 8. 2016.
  31. ↑ stylefmt . Získáno 20. 8. 2016. Archivováno z originálu 4. 1. 2017.
  32. ↑ precss . Získáno 20. srpna 2016. Archivováno z originálu 9. dubna 2017.
  33. ↑ preset-env.cssdb.org . Získáno 4. dubna 2019. Archivováno z originálu dne 29. května 2019.
  34. ↑ cssnano.co . Získáno 20. srpna 2016. Archivováno z originálu dne 28. srpna 2016.
  35. ↑ Seznam uživatelů cssnano . Získáno 20. 8. 2016. Archivováno z originálu 10. 5. 2017.
  36. ↑ rtlcss.com . Získáno 20. srpna 2016. Archivováno z originálu dne 24. srpna 2016.
  37. ↑ Generování RTL CSS: Přechod z CSSJanus na RTLCSS . Získáno 20. srpna 2016. Archivováno z originálu 21. srpna 2016.
  38. ↑ postcss-assets . Získáno 20. srpna 2016. Archivováno z originálu 30. října 2016.
  39. ↑ postcss-inline-svg . Získáno 20. 8. 2016. Archivováno z originálu 10. 5. 2017.
  40. ↑ postcss-sprites . Získáno 20. 8. 2016. Archivováno z originálu 10. 5. 2017.
  41. ↑ Vestavěná rozšíření ve Webpacku
  42. ↑ 1 2 Problém s předzpracováním na základě budoucích specifikací . Získáno 20. srpna 2016. Archivováno z originálu dne 29. srpna 2016.
  43. ↑ Nastavte si nástroje pro sestavení (downlink) . Získáno 20. srpna 2016. Archivováno z originálu 14. dubna 2020. 
  44. ↑ Úvod do PostCSS . Získáno 20. 8. 2016. Archivováno z originálu 23. 8. 2016.
  45. ↑ 1 2 Rozšíření Sass pomocí PostCSS . Získáno 20. srpna 2016. Archivováno z originálu dne 29. srpna 2016.
  46. ↑ Rozchod se Sassem: to nejsi ty, to jsem já . Získáno 20. srpna 2016. Archivováno z originálu 21. srpna 2016.
  47. ↑ Diskuze SugarSS na fóru Meteor . Získáno 20. srpna 2016. Archivováno z originálu dne 28. srpna 2016.
  48. ↑ 1 2 Správné používání PostCSS | Front Talks 2015 . Získáno 20. srpna 2016. Archivováno z originálu 25. října 2020.
  49. ↑ Boření mýtů PostCSS: Boření čtyř mýtů PostCSS . Získáno 20. srpna 2016. Archivováno z originálu 17. června 2016.
  50. ↑ Používání PostCSS společně s Sass, Stylus nebo LESS . Získáno 20. srpna 2016. Archivováno z originálu 16. srpna 2016.
  51. ↑ Stylelint – Jak a proč lintovat CSS . Získáno 20. srpna 2016. Archivováno z originálu dne 28. srpna 2016.
  52. ↑ Diskuse o výkonu PostCSS na Twitteru . Získáno 20. srpna 2016. Archivováno z originálu dne 27. října 2017.
  53. ↑ PostCSS – Sass Killer nebo Preprocessing Pretender? . Získáno 20. srpna 2016. Archivováno z originálu 21. srpna 2016.
  54. ↑ Benchmark analyzátorů PostCSS . Získáno 20. 8. 2016. Archivováno z originálu 10. 5. 2017.
  55. ↑ Test postCSS preprocesorů . Získáno 20. 8. 2016. Archivováno z originálu 10. 5. 2017.
  56. ↑ PostCSS je 1,5x rychlejší . Získáno 20. srpna 2016. Archivováno z originálu 18. září 2016.
  57. ↑ Smutný stav vývoje webu Archivováno 25. září 2016.
  58. ↑ statistika stahování postcss-use . Získáno 20. srpna 2016. Archivováno z originálu 21. srpna 2016.
  59. ↑ Integrujte analýzu hodnot a selektorů do jádra PostCSS . Získáno 20. 8. 2016. Archivováno z originálu 10. 5. 2017.
  60. ↑ Event based API . Získáno 20. 8. 2016. Archivováno z originálu 10. 5. 2017.
  61. ↑ První odevzdání v Rework . Získáno 20. 8. 2016. Archivováno z originálu 10. 5. 2017.
  62. ↑ Modulární předzpracování CSS s přepracováním Archivováno 18. září 2014.
  63. ↑ První odevzdání Autoprefixeru . Získáno 20. 8. 2016. Archivováno z originálu 10. 5. 2017.
  64. ↑ Přejmenování projektu Commit to AutoPrefixer . Získáno 20. 8. 2016. Archivováno z originálu 10. 5. 2017.
  65. ↑ Usnadněte potřeby autoprefixeru . Získáno 20. 8. 2016. Archivováno z originálu 10. 5. 2017.
  66. ↑ První odevzdání v PostCSS . Získáno 20. 8. 2016. Archivováno z originálu 10. 5. 2017.
  67. ↑ PostCSS Druhé narozeniny . Získáno 20. srpna 2016. Archivováno z originálu 18. září 2016.
  68. ↑ První odevzdání v grunt-pixrem . Získáno 20. 8. 2016. Archivováno z originálu 10. 5. 2017.
  69. ↑ Autoprefixer verze 1.0 "Plus ultra" . Získáno 20. 8. 2016. Archivováno z originálu 10. 5. 2017.
  70. ↑ Diskuse o designu stránek PostCSS . Získáno 20. 8. 2016. Archivováno z originálu 10. 5. 2017.
  71. ↑ Tweet s logem PostCSS . Získáno 20. srpna 2016. Archivováno z originálu 1. září 2019.
  72. ↑ Tweetujte o verzích PostCSS . Získáno 20. srpna 2016. Archivováno z originálu 14. srpna 2019.
  73. ↑ CSS před vs. post-processing Archivováno 27. srpna 2016.
  74. ↑ Andrey Sitnik: "Budoucnost patří CSS post-procesorům!" . Získáno 20. 8. 2016. Archivováno z originálu 13. 8. 2016.
  75. ↑ Tweet o vypuštění termínu postprocesor . Získáno 20. srpna 2016. Archivováno z originálu dne 4. června 2017.

Odkazy