PostCSS

PostCSS
Sorts CSS- automatisering 
Utvecklare Andrey Sitnik, Ben Briggs, Bogdan Chadkin [1]
Skrivet i JavaScript
Operativ system Cross-platform
Första upplagan 4 november 2013 [2]
senaste versionen 8.0.0 (president Ose) (15 september 2020 [3] )
stat aktiva
Licens MIT-licens [4]
Hemsida postcss.org

PostCSS är ett program som automatiserar rutinmässiga CSS- operationer med tillägg skrivna i JavaScript [5] . Används i utvecklingen av Wikipedia [6] [7] , Facebook [8] och GitHub [9] [10] . Ett av de mest nedladdade CSS-verktygen från npm [11] . Utvecklad av Andrey Sitnik på företaget "Evil Martians" [12] .

Hur det fungerar

Struktur

Till skillnad från Sass och LESS är PostCSS inte ett mallspråk som kompileras till CSS. PostCSS är en plattform där du kan skapa olika CSS-verktyg [13] . I synnerhet kan PostCSS också användas för att skapa ett mallspråk som Sass och LESS [14] .

PostCSS-kärnan består av: [15]

Alla användbara funktioner tillhandahålls av tillägg - små program som fungerar med ett träd av objekt . Efter att kärnan omvandlar en CSS-sträng till ett träd av objekt, analyserar och modifierar tilläggen trädet i sin tur. PostCSS-kärnan genererar sedan en ny CSS-sträng från trädet som har modifierats av tilläggen.

Användning

Både core- och PostCSS-tillägg är skrivna i JavaScript . Alla distribueras genom npm- systemet .

PostCSS tillhandahåller ett API för JavaScript-arbete på låg nivå:

// Ladda kärna och tillägg från npm const postcss = require ( 'postcss' ) const autoprefixer = require ( 'autoprefixer' ) const precss = require ( 'precss' ) // Ange vilka tillägg vi vill använda const processor = postcss ([ autoprefixer , precss ]) // Ange CSS-kod och processor för in-/ utdatafilnamn . process ( 'a {}' , { from : './app.css' , to : './app.build.css' }) // Använda Promise API för asynkrona tillägg . sedan ( resultat => { // Mata ut CSS-kod efter bearbetning av konsol . log ( resultat . css ) // Visa varningar från tillägg för ( låt meddelande om resultat . varningar () ) { console . warn ( meddelande . toString ()) } })

Det finns officiella verktyg för att använda PostCSS med byggsystem som Webpack [16] , Gulp [17] , Grunt [18] . Konsolgränssnittet [19] levereras separat . Med hjälp av Browserify eller Webpack bundler kan PostCSS köras i webbläsaren [20] .

Syntaxer

En utvecklare som använder PostCSS kan ändra parsern och generatorn - då kommer PostCSS att fungera med sådana källor som: LESS [21] , SCSS [22] , Sass [23] . Men PostCSS själv kan inte kompilera LESS, SCSS eller Sass till CSS, den modifierar bara de ursprungliga källfilerna, som att sortera CSS-egenskaper eller leta efter fel i koden.

Den kan också använda SugarSS-syntaxen, inspirerad av den kompakta syntaxen hos Sass och Stylus [24] .

Tillägg

Över 300 tillägg har skrivits för PostCSS [25] . PostCSS-tillägg kan lösa de flesta CSS-bearbetningsuppgifter, från egenskapsanalys och sortering till komprimering. Samtidigt varierar kvaliteten och populariteten på tillägg kraftigt.

En komplett lista över tillägg finns på postcss.parts . Några exempel:

  • Autoprefixer [26] - lägger till och rensar webbläsarprefix. Det är den mest populära PostCSS-tillägget , med 56 % av utvecklarna som använde det i mars 2016, enligt SitePoint27
  • CSS-moduler [28] är ett automatiskt system för att isolera CSS-väljare och organisera kod. Inbyggd i det populära Webpack [29] -paketet .
  • Stylelint [30] - analyserar CSS-koden för fel, samt följer den accepterade stilen. Används av Wikipedia [7] , Facebook [8] och GitHub [10] . En annan stylefmt- tillägg [31] fixar CSS enligt Stylelint-inställningar.
  • PreCSS [32] är en uppsättning tillägg som upprepar några av funktionerna hos förprocessorer som Sass eller LESS.
  • postcss-preset-env [33] är en uppsättning tillägg för att emulera funktioner från oavslutade utkast till CSS-specifikationer.
  • cssnano [34] - minskar storleken på CSS-koden genom att ta bort mellanslag och skriva om koden i en kortfattad form. Används av Webpack, BBC och JSFiddle [35] .
  • RTLCSS [36] - Ändrar CSS-koden så att designen är lämplig för att skriva från höger till vänster (som på arabiska och hebreiska ). Används i WordPress [37] .
  • postcss-assets [38] , postcss-inline-svg [39] och postcss-sprites [40] för att arbeta med grafik.

Vissa verktyg som inte är PostCSS-tillägg använder PostCSS för sitt arbete. Till exempel innehåller den populära Webpack-byggaren PostCSS för att arbeta med CSS [41] .

Kritik

Medan vissa förlängningar har kritiserats [42] har andra blivit de facto-standarden. Till exempel rekommenderar Google Autoprefixer för att lösa problemet med webbläsarprefix i CSS [43] .

Sammantaget har PostCSS tagits emot väl av branschen [44] . Till och med Sass-utvecklarna anser att PostCSS är ett bra komplement till Sass [45] .

Huvudfrågan som diskuteras är om det är värt att göra CSS-byggsystemet endast på PostCSS-tillägg. Å ena sidan kan PreCSS- eller postcss-cssnext-tillägg ersätta många Sass- och LESS-funktioner [46] . SugarSS-syntaxen kan ersätta den kompakta syntaxen för Sass och Stylus [47] . Men å andra sidan rekommenderar PostCSS-författaren själv inte att gå bort från Sass och LESS i gamla projekt [48] .

Fördelar

  • Funktionalitet. Många PostCSS-tillägg är unika [49] . Därför används PostCSS även i projekt som redan har Sass eller LESS [50] .
  • Enande. PostCSS-tillägg låter dig lösa nästan alla CSS-sammansättningsuppgifter [51] - från att hitta fel i koden till komprimering. Som ett resultat kan alla CSS-verktyg använda en parser, en enda arkitektur och vanliga utvecklingsverktyg. Alla tillägg kommer att använda det analyserade trädet med objekt en gång, vilket har en positiv effekt på prestanda [13] .
  • Modularitet. Varje användare väljer PostCSS-tillägg och kan inaktivera onödiga tillägg för prestandas skull [52] . Eftersom det finns olika tillägg för att lösa samma problem kan användaren välja de verktyg som är bäst lämpade för honom [53] . Författaren till PostCSS anser att konkurrensen mellan tillägg stimulerar deras utveckling [15] .
  • Arbetshastighet. PostCSS har en av de snabbaste CSS-tolkarna som skrivits i JS [54] . På grundläggande förprocessoruppgifter kan den köras upp till 20 gånger snabbare än Ruby Sass och 4 gånger snabbare än LESS [55] . Men den faktiska prestandan är starkt beroende av antalet förlängningar. Till och med PostCSS-författare märker själva att moderna förprocessorer redan är för snabba, och snabbheten är ofta inte synlig [56] .

Nackdelar

  • Svårighet att ställa in. Vissa utvecklare tycker att det är skrämmande att välja tillägg och konfigurera dem för att fungera tillsammans [57] . Färdiga förlängningsset löser endast delvis detta problem.
  • Icke-standard syntax. Varje projekt kan använda sin egen uppsättning tillägg. En ny utvecklare kanske inte inser att en funktion de inte känner till är relaterad till en impopulär PostCSS-tillägg [45] . Författaren rekommenderar postcss-use för att explicit specificera tillägg för varje fil [48] , men detta tillvägagångssätt används inte av alla [58] .
  • Separata tolkare för väljare och värden. PostCSS lagrar CSS-väljare och egenskapsvärden som strängar utan att analysera dem ytterligare. Tillägg måste använda ytterligare tolkare för att analysera dem. PostCSS-teamet kommer att fixa detta i framtida utgåvor [59] .
  • sekventiell bearbetning. Varje tillägg korsar objektträdet i sin tur, vilket kan påverka prestandan om det finns ett stort antal tillägg. Teoretiskt kan vissa kapslade funktioner inte hanteras av tillägg. PostCSS-teamet kommer att fixa detta i framtida utgåvor [60] .

Historik

Idén med ett modulärt verktyg för CSS föreslogs först av TJ Holowaychuk den 1 september 2012 i Rework-projektet [61] . Den 28 februari 2013 pratade TJ om henne offentligt [62] .

14 mars 2013 gjorde Andrey Sitnik på Evil Martians en Autoprefixer-förlängning baserad på Rework [63] . Tillägget kallades ursprungligen "rework-vendors" [64] .

Med tillväxten av Autoprefixer upptäcktes problem i implementeringen av Rework [65] . Därför började Andrey Sitnik den 7 september 2013 [66] utveckla PostCSS baserat på idéerna från Rework [67] .

Efter 3 månader släpptes det första pluginet för PostCSS - grunt-pixrem [68] . Den 22 december 2013 [69] bytte Autoprefixer till PostCSS i version 1.0.

PostCSS använder aktivt temat alkemi i sin symbolik [70] . Projektets logotyp är tecknet på de vises sten [71] . De stora och mindre versionerna av PostCSS ges namnen på demonerna "Goetia" [72] . Till exempel är namnet på version 1.0.0 "Marquis Decarabia".

Vissa problem uppstod med termen "efterbehandlare" [73] . PostCSS-teamet använde denna term för att visa att PostCSS inte är ett mallspråk (preprocessor) utan fungerar med CSS [74] . Men andra utvecklare tycker att termen "postprocessor" är bättre lämpad för verktyg som körs i webbläsaren [42] (till exempel -prefix-free ). Utgivningen av PreCSS-tillägget komplicerar äntligen situationen. PostCSS-teamet använder nu termen "processor" istället för "efterbehandlare" [75] .

Anteckningar

  1. ↑ Utvecklare som kan pusha PostCSS-versioner till npm . Hämtad 20 augusti 2016. Arkiverad från originalet 20 september 2016.
  2. ↑ PostCSS update commit till 0.1
  3. ↑ PostCSS-utgåvor . Hämtad 20 augusti 2016. Arkiverad från originalet 10 maj 2017.
  4. ↑ Licens i PostCSS-förrådet . Hämtad 20 augusti 2016. Arkiverad från originalet 10 maj 2017.
  5. ↑ Tuts+ PostCSS-kurs första artikel . Hämtad 20 augusti 2016. Arkiverad från originalet 27 augusti 2016.
  6. ↑ Ändring som lägger till PostCSS till Wikipedias portalbyggsystem . Hämtad 20 augusti 2016. Arkiverad från originalet 10 maj 2017.
  7. ↑ 1 2 Wikimedia Stylelint Config . Hämtad 20 augusti 2016. Arkiverad från originalet 10 maj 2017.
  8. ↑ 1 2 Förbättring av CSS-kvalitet på Facebook och utanför . Hämtad 20 augusti 2016. Arkiverad från originalet 11 oktober 2016.
  9. ↑ PostCSS-inställningar i GitHub-byggsystemet Arkiverad 23 augusti 2016.
  10. ↑ 1 2 Primer Stylelint Config . Hämtad 20 augusti 2016. Arkiverad från originalet 10 maj 2017.
  11. ↑ Jämförelser av antalet nedladdningar för preprocessor . Hämtad 20 augusti 2016. Arkiverad från originalet 26 augusti 2016.
  12. ↑ Lägga till en sponsor till projektbeskrivningen . Hämtad 20 augusti 2016. Arkiverad från originalet 10 maj 2017.
  13. ↑ 1 2 Diskussion om vad PostCSS är . Hämtad 20 augusti 2016. Arkiverad från originalet 10 maj 2017.
  14. ↑ PostCSS Deep Dive: Förbearbetning med "PreCSS" . Hämtad 20 augusti 2016. Arkiverad från originalet 9 augusti 2016.
  15. ↑ 1 2 Andrey Sitnik - PostCSS: Framtiden efter Sass och LESS . Hämtad 20 augusti 2016. Arkiverad från original 5 augusti 2017.
  16. ↑ postcss-loader . Hämtad 20 augusti 2016. Arkiverad från originalet 21 februari 2017.
  17. ↑ gulp-postcss . Hämtad 20 augusti 2016. Arkiverad från originalet 28 december 2016.
  18. ↑ grunt-postcss . Hämtad 20 augusti 2016. Arkiverad från originalet 10 maj 2017.
  19. ↑ postcss-cli . Hämtad 20 augusti 2016. Arkiverad från originalet 10 maj 2017.
  20. ↑ Kör postcss i webbläsaren . Hämtad 20 augusti 2016. Arkiverad från originalet 10 maj 2017.
  21. ↑ postcss-less
  22. ↑ postcss-scss . Hämtad 20 augusti 2016. Arkiverad från originalet 6 mars 2017.
  23. ↑ Oleh Aloshkin. En Sass-parser för PostCSS, med gonzales-pe. https://www.npmjs.com/package/postcss-sass _ — 2018-01-25. Arkiverad från originalet den 28 januari 2019.
  24. ↑ socker . Hämtad 20 augusti 2016. Arkiverad från originalet 10 maj 2017.
  25. ↑ Lista över PostCSS-tillägg . Hämtad 20 augusti 2016. Arkiverad från originalet 10 maj 2017.
  26. ↑ autoprefixer . Hämtad 20 augusti 2016. Arkiverad från originalet 26 juli 2016.
  27. ↑ Resultaten av den ultimata CSS-undersökningen . Hämtad 20 augusti 2016. Arkiverad från originalet 14 maj 2016.
  28. ↑ css-moduler . Hämtad 20 augusti 2016. Arkiverad från originalet 4 juli 2016.
  29. ↑ css-loader beroenden
  30. ↑ Stylelint . Hämtad 20 augusti 2016. Arkiverad från originalet 24 augusti 2016.
  31. ↑ stylefmt . Hämtad 20 augusti 2016. Arkiverad från originalet 4 januari 2017.
  32. ↑ tryck . Hämtad 20 augusti 2016. Arkiverad från originalet 9 april 2017.
  33. ↑ preset-env.cssdb.org . Hämtad 4 april 2019. Arkiverad från originalet 29 maj 2019.
  34. ↑ cssnano.co . Hämtad 20 augusti 2016. Arkiverad från originalet 28 augusti 2016.
  35. ↑ Lista över cssnano-användare . Hämtad 20 augusti 2016. Arkiverad från originalet 10 maj 2017.
  36. ↑ rtlcss.com . Hämtad 20 augusti 2016. Arkiverad från originalet 24 augusti 2016.
  37. ↑ RTL CSS-generering: Byt från CSSJanus till RTLCSS . Hämtad 20 augusti 2016. Arkiverad från original 21 augusti 2016.
  38. ↑ postcss-tillgångar . Hämtad 20 augusti 2016. Arkiverad från originalet 30 oktober 2016.
  39. ↑ postcss-inline-svg . Hämtad 20 augusti 2016. Arkiverad från originalet 10 maj 2017.
  40. ↑ postcss-sprites . Hämtad 20 augusti 2016. Arkiverad från originalet 10 maj 2017.
  41. ↑ Inbyggda tillägg i Webpack
  42. ↑ 1 2 Problemet med förbearbetning baserat på framtida specifikationer . Hämtad 20 augusti 2016. Arkiverad från originalet 29 augusti 2016.
  43. ↑ Ställ in dina byggverktyg (nedlänk) . Hämtad 20 augusti 2016. Arkiverad från originalet 14 april 2020. 
  44. ↑ Introduktion till PostCSS . Hämtad 20 augusti 2016. Arkiverad från originalet 23 augusti 2016.
  45. ↑ 1 2 Utöka Sass med PostCSS . Hämtad 20 augusti 2016. Arkiverad från originalet 29 augusti 2016.
  46. ↑ Att göra slut med Sass: det är inte du, det är jag . Hämtad 20 augusti 2016. Arkiverad från original 21 augusti 2016.
  47. ↑ SugarSS-diskussion på Meteor-forumet . Hämtad 20 augusti 2016. Arkiverad från originalet 28 augusti 2016.
  48. ↑ 1 2 Använda PostCSS på rätt sätt | Front Talks 2015 . Hämtad 20 augusti 2016. Arkiverad från originalet 25 oktober 2020.
  49. ↑ PostCSS Mythbusting: Fyra PostCSS-myter slogs fast . Hämtad 20 augusti 2016. Arkiverad från originalet 17 juni 2016.
  50. ↑ Använda PostCSS tillsammans med Sass, Stylus eller LESS . Hämtad 20 augusti 2016. Arkiverad från originalet 16 augusti 2016.
  51. ↑ Stylelint - Hur och varför luddar man CSS . Hämtad 20 augusti 2016. Arkiverad från originalet 28 augusti 2016.
  52. ↑ PostCSS prestandadiskussion på Twitter . Hämtad 20 augusti 2016. Arkiverad från originalet 27 oktober 2017.
  53. ↑ PostCSS - Sass Killer eller Preprocessing Pretender? . Hämtad 20 augusti 2016. Arkiverad från original 21 augusti 2016.
  54. ↑ Benchmark för PostCSS-tolkar . Hämtad 20 augusti 2016. Arkiverad från originalet 10 maj 2017.
  55. ↑ Benchmark för PostCSS-förprocessorer . Hämtad 20 augusti 2016. Arkiverad från originalet 10 maj 2017.
  56. ↑ PostCSS blir 1,5 gånger snabbare . Hämtad 20 augusti 2016. Arkiverad från originalet 18 september 2016.
  57. ↑ The Sad State of Web Development Arkiverad 25 september 2016.
  58. ↑ postcss-använd nedladdningsstatistik . Hämtad 20 augusti 2016. Arkiverad från original 21 augusti 2016.
  59. ↑ Integrera värde- och väljaranalys i PostCSS-kärna . Hämtad 20 augusti 2016. Arkiverad från originalet 10 maj 2017.
  60. ↑ Händelsebaserat API . Hämtad 20 augusti 2016. Arkiverad från originalet 10 maj 2017.
  61. ↑ Första commit i Rework . Hämtad 20 augusti 2016. Arkiverad från originalet 10 maj 2017.
  62. ↑ Modulär CSS-förbearbetning med omarbetning Arkiverad 18 september 2014.
  63. ↑ Första commit av Autoprefixer . Hämtad 20 augusti 2016. Arkiverad från originalet 10 maj 2017.
  64. ↑ Projektera att döpa om Commit till AutoPrefixer . Hämtad 20 augusti 2016. Arkiverad från originalet 10 maj 2017.
  65. ↑ Underlätta behov av autoprefixer . Hämtad 20 augusti 2016. Arkiverad från originalet 10 maj 2017.
  66. ↑ Första commit i PostCSS . Hämtad 20 augusti 2016. Arkiverad från originalet 10 maj 2017.
  67. ↑ PostCSS andra födelsedag . Hämtad 20 augusti 2016. Arkiverad från originalet 18 september 2016.
  68. ↑ Första commit i grunt-pixrem . Hämtad 20 augusti 2016. Arkiverad från originalet 10 maj 2017.
  69. ↑ Autoprefixer release 1.0 "Plus ultra" . Hämtad 20 augusti 2016. Arkiverad från originalet 10 maj 2017.
  70. ↑ PostCSS-webbplatsdesigndiskussion . Hämtad 20 augusti 2016. Arkiverad från originalet 10 maj 2017.
  71. ↑ Tweet för PostCSS-logotyp . Hämtad 20 augusti 2016. Arkiverad från originalet 1 september 2019.
  72. ↑ Tweet om PostCSS-versioner . Hämtad 20 augusti 2016. Arkiverad från originalet 14 augusti 2019.
  73. ↑ CSS före vs. efterbehandling Arkiverad 27 augusti 2016.
  74. ↑ Andrey Sitnik: "Framtiden tillhör CSS-efterbehandlare!" . Hämtad 20 augusti 2016. Arkiverad från originalet 13 augusti 2016.
  75. ↑ Twittra om att slopa termen postprocessor . Hämtad 20 augusti 2016. Arkiverad från originalet 4 juni 2017.

Länkar