PostCSS

PostCSS
Tyyppi CSS- automaatio 
Kehittäjät Andrey Sitnik, Ben Briggs, Bogdan Chadkin [1]
Sisään kirjoitettu JavaScript
Käyttöjärjestelmä Cross-platform
Ensimmäinen painos 4. marraskuuta 2013 [2]
uusin versio 8.0.0 (presidentti Ose) (15. syyskuuta 2020 [3] )
Osavaltio aktiivinen
Lisenssi MIT-lisenssi [4]
Verkkosivusto postcss.org

PostCSS on ohjelma , joka automatisoi rutiininomaiset CSS -toiminnot JavaScriptillä kirjoitettujen laajennusten avulla [5] . Käytetty Wikipedian [6] [7] , Facebookin [8] ja GitHubin [9] [10] kehityksessä . Yksi npm :n yleisimmin ladatuista CSS-työkaluista [11] . Sen on kehittänyt Andrey Sitnik yrityksessä "Evil Martians" [12] .

Kuinka se toimii

Rakenne

Toisin kuin Sass ja LESS , PostCSS ei ole CSS:ään kääntävä mallikieli. PostCSS on alusta, jolla voit luoda erilaisia ​​CSS-työkaluja [13] . Erityisesti PostCSS:ää voidaan käyttää myös luomaan mallikieli, kuten Sass ja LESS [14] .

PostCSS-ydin koostuu: [15]

Kaikki hyödylliset toiminnot tarjoavat laajennukset - pienet ohjelmat, jotka toimivat objektipuun kanssa . Kun ydin muuntaa CSS-merkkijonon objektipuuksi, laajennukset jäsentävät ja muokkaavat puuta vuorotellen. PostCSS-ydin luo sitten uuden CSS-merkkijonon puusta, jota laajennukset ovat muokanneet.

Käyttö

Sekä ydin- että PostCSS-laajennukset on kirjoitettu JavaScriptillä . Kaikki ne jaetaan npm - järjestelmän kautta .

PostCSS tarjoaa API :n matalan tason JavaScript-työhön:

// Lataa ydin ja laajennukset kohteesta npm const postcss = vaatia ( 'postcss' ) const autoprefixer = vaadi ( 'autoprefixer' ) const precss = vaadi ( 'press' ) // Määritä, mitä laajennuksia haluamme käyttää const processor = postcss ([ autoprefixer , precs ]) // Määritä CSS-koodi ja syöttö-/tulostustiedoston nimi prosessori . prosessi ( 'a {}' , { from : './app.css' , to : './app.build.css' }) // Promise API for Asynchronous Extensions . then ( tulos => { // Tulosta CSS-koodi käsittelyn jälkeen konsoli . loki ( tulos . css ) // Näytä varoitukset laajennuksista for ( anna tuloksen viesti . varoitukset () ) { konsoli . varoittaa ( viesti . toString ()) } })

On olemassa virallisia työkaluja PostCSS:n käyttämiseen rakennusjärjestelmien kanssa, kuten Webpack [16] , Gulp [17] , Grunt [18] . Konsoliliitäntä [19] toimitetaan erikseen . Browserify- tai Webpack-niputtajan avulla PostCSS voidaan ajaa selaimessa [20] .

Syntaksit

PostCSS:ää käyttävä kehittäjä voi vaihtaa jäsentimen ja generaattorin - silloin PostCSS toimii seuraavien lähteiden kanssa: LESS [21] , SCSS [22] , Sass [23] . Mutta PostCSS itse ei voi kääntää LESSiä, SCSS:ää tai Sassia CSS:ksi, se vain muokkaa alkuperäisiä lähdetiedostoja, kuten lajittelee CSS-ominaisuuksia tai etsii virheitä koodista.

Se voi myös käyttää SugarSS-syntaksia, joka on saanut inspiraationsa Sassin ja Stylusin kompaktista syntaksista [24] .

Laajennukset

PostCSS:lle on kirjoitettu yli 300 laajennusta [25] . PostCSS-laajennukset voivat ratkaista useimmat CSS-käsittelytehtävät ominaisuuksien jäsentämisestä ja lajittelusta pakkaamiseen. Samaan aikaan pidennysten laatu ja suosio vaihtelevat suuresti.

Täydellinen luettelo laajennuksista löytyy osoitteesta postcss.parts . Muutama esimerkki:

  • Autoprefixer [26] - lisää ja puhdistaa selaimen etuliitteet. Se on suosituin PostCSS-laajennus , ja 56 % kehittäjistä käytti sitä maaliskuussa 2016 SitePointin27
  • CSS-moduulit [28] on automaattinen järjestelmä CSS-valitsimien eristämiseen ja koodin järjestämiseen. Sisäänrakennettu suosittuun Webpack [29] -niputtajaan .
  • Stylelint [30] - analysoi CSS-koodin virheiden varalta sekä noudattaa hyväksyttyä tyyliä. Käyttää Wikipedia [7] , Facebook [8] ja GitHub [10] . Toinen stylefmt- laajennus [31] korjaa CSS:n Stylelint-asetusten mukaisesti.
  • PreCSS [32] on joukko laajennuksia, jotka toistavat joitain esiprosessorien, kuten Sass tai LESS, toimintoja.
  • postcss-preset-env [33] on joukko laajennuksia, jotka emuloivat keskeneräisten CSS-määrittelyjen luonnoksia.
  • cssnano [34] - pienentää CSS-koodin kokoa poistamalla välilyönnit ja kirjoittamalla koodin uudelleen tiiviisti. Käyttää Webpack, BBC ja JSFiddle [35] .
  • RTLCSS [36] - Muuttaa CSS-koodia niin, että muotoilu sopii kirjoitettavaksi oikealta vasemmalle (kuten arabiaksi ja hepreaksi ). Käytetään WordPressissä [37] .
  • postcss-assets [38] , postcss-inline-svg [39] ja postcss-sprites [40] grafiikan kanssa työskentelemiseen.

Jotkut työkalut, jotka eivät ole PostCSS-laajennuksia, käyttävät PostCSS:ää työhönsä. Esimerkiksi suosittu Webpack-rakennusohjelma sisältää PostCSS:n CSS:n kanssa työskentelemiseen [41] .

Kritiikki

Joitakin laajennuksia on kritisoitu [42] , mutta toisista on tullut de facto standardi. Esimerkiksi Google suosittelee Autoprefixeria ratkaisemaan selaimen etuliitteiden ongelman CSS:ssä [43] .

Kaiken kaikkiaan teollisuus on ottanut PostCSS:n hyvin vastaan ​​[44] . Jopa Sass-kehittäjät pitävät PostCSS:ää hyvänä lisänä Sassiin [45] .

Keskustelun pääkysymys on, kannattaako CSS:n rakentaa järjestelmä vain PostCSS-laajennuksille. Toisaalta PreCSS- tai postcss-cssnext-laajennukset voivat korvata monia Sass- ja LESS-ominaisuuksia [46] . SugarSS-syntaksi voi korvata Sassin ja Stylusin kompaktin syntaksin [47] . Mutta toisaalta, PostCSS:n kirjoittaja itse ei suosittele siirtymistä pois Sassista ja LESSistä vanhoissa projekteissa [48] .

Edut

  • Toiminnallisuus. Monet PostCSS-laajennukset ovat ainutlaatuisia [49] . Siksi PostCSS:ää käytetään myös projekteissa, joissa on jo Sass tai LESS [50] .
  • Yhdistäminen. PostCSS-laajennusten avulla voit ratkaista lähes kaikki CSS-kokoonpanotehtävät [51] - koodin virheiden löytämisestä pakkaukseen. Tämän seurauksena kaikki CSS-työkalut voivat käyttää yhtä jäsentäjää, yhtä arkkitehtuuria ja yhteisiä kehitystyökaluja. Kaikki laajennukset käyttävät jäsennettyä objektipuuta kerran, millä on positiivinen vaikutus suorituskykyyn [13] .
  • Modulaarisuus. Jokainen käyttäjä valitsee PostCSS-laajennukset ja voi poistaa tarpeettomat laajennukset käytöstä suorituskyvyn vuoksi [52] . Koska samojen ongelmien ratkaisemiseen on olemassa erilaisia ​​laajennuksia, käyttäjä voi valita itselleen sopivimmat työkalut [53] . PostCSS:n kirjoittaja uskoo, että laajennusten kilpailu stimuloi niiden kehitystä [15] .
  • Työn nopeus. PostCSS:ssä on yksi nopeimmista JS:llä kirjoitetuista CSS-jäsentimistä [54] . Esiprosessorin perustehtävissä se voi toimia jopa 20 kertaa nopeammin kuin Ruby Sass ja 4 kertaa nopeammin kuin LESS [55] . Mutta todellinen suorituskyky riippuu suuresti laajennusten lukumäärästä. Jopa PostCSS:n kirjoittajat itse huomaavat, että nykyaikaiset esiprosessorit ovat jo liian nopeita, eikä nopeutta usein näy [56] .

Haitat

  • Asetuksen vaikeus. Joidenkin kehittäjien mielestä on pelottavaa valita laajennuksia ja määrittää ne toimimaan yhdessä [57] . Valmiit laajennussarjat ratkaisevat tämän ongelman vain osittain.
  • Epätyypillinen syntaksi. Jokainen projekti voi käyttää omia laajennuksiaan. Uusi kehittäjä ei ehkä ymmärrä, että ominaisuus, jota hän ei tiedä, liittyy epäsuosituun PostCSS-laajennukseen [45] . Kirjoittaja suosittelee postcss-usea määrittämään erikseen jokaiselle tiedostolle tunnisteet [48] , mutta kaikki eivät käytä tätä lähestymistapaa [58] .
  • Erilliset jäsentimet valitsimille ja arvoille. PostCSS tallentaa CSS-valitsimet ja ominaisuusarvot merkkijonoina jäsentämättä niitä enempää. Laajennusten on käytettävä ylimääräisiä jäsentimiä niiden jäsentämiseen. PostCSS-tiimi aikoo korjata tämän tulevissa julkaisuissa [59] .
  • peräkkäinen käsittely. Jokainen laajennus kulkee objektipuun läpi vuorotellen, mikä voi vaikuttaa suorituskykyyn, jos laajennuksia on paljon. Teoriassa joitain sisäkkäisiä toimintoja ei voida käsitellä laajennuksilla. PostCSS-tiimi aikoo korjata tämän tulevissa julkaisuissa [60] .

Historia

Ideaa modulaarisesta CSS-työkalusta ehdotti ensimmäisen kerran TJ Holowaychuk 1. syyskuuta 2012 Rework-projektissa [61] . 28. helmikuuta 2013 TJ puhui hänestä julkisesti [62] .

14. maaliskuuta 2013 Andrey Sitnik Evil Martiansissa teki Reworkiin [63] perustuvan Autoprefixer-laajennuksen . Laajennusta kutsuttiin alun perin "rework-vendors" [64] .

Autoprefixerin kasvun myötä Reworkin toteutuksessa havaittiin ongelmia [65] . Siksi 7. syyskuuta 2013 [66] Andrey Sitnik aloitti PostCSS:n kehittämisen Reworkin [67] ideoiden pohjalta .

Kolmen kuukauden kuluttua julkaistiin ensimmäinen PostCSS-laajennus - grunt-pixrem [68] . 22. joulukuuta 2013 [69] Autoprefixer siirtyi PostCSS:ään versiossa 1.0.

PostCSS käyttää aktiivisesti alkemian teemaa symbolismissaan [70] . Hankkeen logo on viisasten kiven merkki [71] . PostCSS:n pää- ja sivuversioille annetaan demonien nimet "Goetia" [72] . Esimerkiksi version 1.0.0 nimi on "Marquis Decarabia".

Tiettyjä ongelmia ilmeni termin "jälkiprosessori" kanssa [73] . PostCSS-tiimi käytti tätä termiä osoittaakseen, että PostCSS ei ole mallikieli (esikäsittelijä), vaan toimii CSS:n kanssa [74] . Mutta muut kehittäjät ovat sitä mieltä, että termi "postprosessori" sopii paremmin työkaluille, jotka toimivat selaimessa [42] (esimerkiksi -etuliiteetön ). PreCSS-laajennuksen julkaisu mutkistaa vihdoin tilannetta. PostCSS-tiimi käyttää nyt termiä "prosessori" "postprosessorin" sijaan [75] .

Muistiinpanot

  1. ↑ Kehittäjät, jotka voivat työntää PostCSS-versiot npm:ään . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 20. syyskuuta 2016.
  2. ↑ PostCSS-päivityksen sitoutuminen 0.1:een
  3. ↑ PostCSS-julkaisut . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 10. toukokuuta 2017.
  4. ↑ Lisenssi PostCSS-arkistossa . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 10. toukokuuta 2017.
  5. ↑ Tuts+ PostCSS-kurssin ensimmäinen artikkeli . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 27. elokuuta 2016.
  6. ↑ Muutos, joka lisää PostCSS:n Wikipedia-portaalin rakennusjärjestelmään . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 10. toukokuuta 2017.
  7. ↑ 1 2 Wikimedia Stylelint Config . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 10. toukokuuta 2017.
  8. ↑ 1 2 CSS-laadun parantaminen Facebookissa ja sen ulkopuolella . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 11. lokakuuta 2016.
  9. ↑ PostCSS-asetukset GitHub-koontijärjestelmässä Arkistoitu 23. elokuuta 2016.
  10. ↑ 1 2 Primer Stylelint Config . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 10. toukokuuta 2017.
  11. ↑ Esiprosessorin latausten määrän vertailut . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 26. elokuuta 2016.
  12. ↑ Sponsorin lisääminen projektin kuvaukseen . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 10. toukokuuta 2017.
  13. ↑ 1 2 Keskustelua siitä, mitä PostCSS on . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 10. toukokuuta 2017.
  14. ↑ PostCSS Deep Dive: Esikäsittely “PreCSS:llä” . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 9. elokuuta 2016.
  15. ↑ 1 2 Andrey Sitnik - PostCSS: The Future After Sass and LESS . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 5. elokuuta 2017.
  16. ↑ postcss-loader . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 21. helmikuuta 2017.
  17. ↑ gulp-postcss . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 28. joulukuuta 2016.
  18. ↑ grunt-postcss . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 10. toukokuuta 2017.
  19. ↑ postcss-cli . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 10. toukokuuta 2017.
  20. ↑ Postcss:n suorittaminen selaimessa . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 10. toukokuuta 2017.
  21. ↑ postcss-vähemmän
  22. ↑ postcss-scss . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 6. maaliskuuta 2017.
  23. ↑ Oleh Aloshkin. Sass-jäsennin PostCSS:lle, joka käyttää gonzales-pe:tä. https://www.npmjs.com/package/postcss-sass _ – 25.1.2018. Arkistoitu alkuperäisestä 28. tammikuuta 2019.
  24. ↑ sokerit . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 10. toukokuuta 2017.
  25. ↑ Luettelo PostCSS-laajennuksista . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 10. toukokuuta 2017.
  26. ↑ automaattinen etuliite . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 26. heinäkuuta 2016.
  27. ↑ Ultimate CSS -tutkimuksen tulokset . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 14. toukokuuta 2016.
  28. ↑ css-moduulit . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 4. heinäkuuta 2016.
  29. ↑ css-loader-riippuvuudet
  30. ↑ Stylelint . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 24. elokuuta 2016.
  31. ↑ stylefmt . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 4. tammikuuta 2017.
  32. ↑ paina . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 9. huhtikuuta 2017.
  33. ↑ preset-env.cssdb.org . Haettu 4. huhtikuuta 2019. Arkistoitu alkuperäisestä 29. toukokuuta 2019.
  34. ↑ cssnano.co . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 28. elokuuta 2016.
  35. ↑ Luettelo cssnano-käyttäjistä . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 10. toukokuuta 2017.
  36. ↑ rtlcss.com . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 24. elokuuta 2016.
  37. ↑ RTL CSS:n sukupolvi: Vaihda CSSJanusista RTLCSS:ään . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 21. elokuuta 2016.
  38. ↑ postcss-assets . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 30. lokakuuta 2016.
  39. ↑ postcss-inline-svg . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 10. toukokuuta 2017.
  40. ↑ postcss-sprites . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 10. toukokuuta 2017.
  41. ↑ Webpackin sisäänrakennetut laajennukset
  42. ↑ 1 2 Esikäsittelyn ongelma tulevien teknisten tietojen perusteella . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 29. elokuuta 2016.
  43. ↑ Määritä rakennustyökalut (downlink) . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 14. huhtikuuta 2020. 
  44. ↑ PostCSS:n esittely . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 23. elokuuta 2016.
  45. ↑ 1 2 Sassin laajentaminen PostCSS:llä . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 29. elokuuta 2016.
  46. ↑ Ero Sassista: se ei ole sinä, vaan minä . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 21. elokuuta 2016.
  47. ↑ SugarSS-keskustelu Meteor-foorumilla . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 28. elokuuta 2016.
  48. ↑ 1 2 PostCSS:n käyttäminen oikein | Front Talks 2015 . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 25. lokakuuta 2020.
  49. ↑ PostCSS-myytinmurto: Neljä PostCSS-myyttiä murrettiin . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 17. kesäkuuta 2016.
  50. ↑ PostCSS:n käyttäminen yhdessä Sassin, Stylusin tai LESSin kanssa . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 16. elokuuta 2016.
  51. ↑ Stylelint - Kuinka ja miksi nukkaa CSS:ää . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 28. elokuuta 2016.
  52. ↑ PostCSS-keskustelu Twitterissä . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 27. lokakuuta 2017.
  53. ↑ PostCSS – Sass Killer vai Preprocessing Pretender? . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 21. elokuuta 2016.
  54. ↑ PostCSS-jäsentimien vertailuarvo . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 10. toukokuuta 2017.
  55. ↑ PostCSS-esiprosessorien benchmark . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 10. toukokuuta 2017.
  56. ↑ PostCSS:stä tulee 1,5 kertaa nopeampi . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 18. syyskuuta 2016.
  57. ↑ Verkkokehityksen surullinen tila Arkistoitu 25. syyskuuta 2016.
  58. ↑ postcss-käytön lataustilastot . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 21. elokuuta 2016.
  59. ↑ Integroi arvon ja valitsimen jäsennys PostCSS-ytimeen . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 10. toukokuuta 2017.
  60. ↑ Tapahtumapohjainen API . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 10. toukokuuta 2017.
  61. ↑ Ensimmäinen sitoumus Reworkissa . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 10. toukokuuta 2017.
  62. ↑ Modulaarinen CSS-esikäsittely ja uudelleenkäsittely Arkistoitu 18. syyskuuta 2014.
  63. ↑ Autoprefixerin ensimmäinen vahvistus . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 10. toukokuuta 2017.
  64. ↑ Projektin uudelleennimeäminen Sitoudu AutoPrefixeriin . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 10. toukokuuta 2017.
  65. ↑ Helpottaa automaattisten etuliitteiden tarpeita . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 10. toukokuuta 2017.
  66. ↑ Ensimmäinen sitoutuminen PostCSS:ssä . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 10. toukokuuta 2017.
  67. ↑ PostCSS:n toinen syntymäpäivä . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 18. syyskuuta 2016.
  68. ↑ Ensimmäinen sitoutuminen grunt-pixremissä . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 10. toukokuuta 2017.
  69. ↑ Autoprefixer-julkaisu 1.0 "Plus ultra" . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 10. toukokuuta 2017.
  70. ↑ PostCSS-sivuston suunnittelukeskustelu . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 10. toukokuuta 2017.
  71. ↑ PostCSS-logon twiitti . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 1. syyskuuta 2019.
  72. ↑ Tweet PostCSS-versioista . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 14. elokuuta 2019.
  73. ↑ CSS pre-vs. jälkikäsittely Arkistoitu 27. elokuuta 2016.
  74. ↑ Andrey Sitnik: "Tulevaisuus kuuluu CSS-jälkiprosessoreille!" . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 13. elokuuta 2016.
  75. ↑ Tweet postprosessori-termin luopumisesta . Haettu 20. elokuuta 2016. Arkistoitu alkuperäisestä 4. kesäkuuta 2017.

Linkit