PostCSS - PostCSS
 | |
| Fejlesztő (k) | Andrey Sitnik, Ben Briggs, Bogdan Chadkin |
|---|---|
| Első kiadás | 2013. november 4 . |
| Stabil kiadás | 8.2.8 / 2021. március 9 .
|
| Adattár | postcss |
| Beírva | JavaScript |
| Operációs rendszer | Cross-platform |
| Elérhető | angol |
| típus | CSS fejlesztő eszköz |
| Engedély | MIT licenc |
| Weboldal | postcss |
A PostCSS egy szoftverfejlesztő eszköz , amely JavaScript- alapú beépülő modulokat használ a rutin CSS- műveletek automatizálásához . Andrey Sitnik tervezte azzal az ötlettel, hogy a gonosz marslakóknak készített front-end munkájából ered.
Funkcionalitás
A PostCSS egy keretrendszer a CSS eszközök fejlesztésére. Használható olyan sablonnyelv kifejlesztésére, mint a Sass és a LESS.
A PostCSS mag a következőkből áll:
- CSS- elemző , amely absztrakt szintaxisfát állít elő
- Állítsa be a osztály , amely tartalmazza a fa
- CSS-generátor , amely CSS-sort generál az objektumfához
- Kódtérkép-generátor a végrehajtott CSS-változtatásokhoz
A funkciók plugineken keresztül érhetők el. A beépülő modulok az objektumfával dolgozó kis programok . Miután a mag átalakította a CSS karakterláncot objektum fává, a beépülő modulok elemzik és megváltoztatják a fát. Ezután a PostCSS létrehoz egy új CSS karakterláncot a bővítmény által megváltoztatott fához.
A PostCSS és beépülő moduljai JavaScript-be vannak írva, és az npm-en keresztül terjesztésre kerülnek , amelyek API - kat kínálnak az alacsony szintű JavaScript-műveletekhez.
Vannak hivatalos eszközök, amelyek lehetővé teszik a PostCSS használatát olyan építési rendszerekkel, mint a Webpack , a Gulp és a Grunt . Van egy konzolos felület is. A Browserify vagy a Webpack segítségével megnyitható a PostCSS egy böngészőben.
Szintaxisok
A PostCSS lehetővé teszi az elemző és a generátor megváltoztatását . Ebben az esetben a PostCSS használható a Less és az SCSS forrásokkal való együttműködésre. A PostCSS azonban önmagában nem tudja lefordítani a Sass vagy a kevesebbet a CSS-be. Megváltoztatja az eredeti fájlokat - például a CSS tulajdonságainak rendezésével vagy a kód hibás ellenőrzésével. A PostCSS támogatja a SugarSS-t.
Bővítmények
A PostCSS beépülő modulok különböző CSS-feldolgozási feladatokat hajtanak végre, az elemzéstől és a tulajdonságok rendezésétől a minifikálásig .
A teljes beépülő modulok listája megtalálható a postcss.parts oldalon, néhány példával együtt.
- Autoprefixer a böngésző előtagjainak hozzáadásához és törléséhez.
- CSS-modulok a CSS-választók elkülönítésére és kódrendezésre. A Webpack részeként szállítjuk .
- stylelint a CSS kód hibáinak elemzéséhez és a stílus konzisztenciájának ellenőrzéséhez.
- A stylefmt kijavítja a CSS kódot a stylelint beállításainak megfelelően.
- PreCSS néhány Sass / Less előfeldolgozási funkció végrehajtására.
- postcss-preset-env a befejezetlen CSS specifikációs vázlatok jellemzőinek utánzásához .
- cssnano , hogy kisebb méretűvé tegye a CSS-t azáltal, hogy megszabadul a szóközöktől és átírja a kódot.
- Az RTLCSS megváltoztatja a CSS kódot úgy, hogy a kialakítás megfelelő legyen jobbról balra történő íráshoz (ezt arabul és héberül alkalmazzák ).
- postcss-assets , postcss-inline-svg és postcss-sprites grafikával való együttműködéshez.
Történelem
A Rework projekt során TJ Holowaychuk 2012. szeptember 1-jén javasolta a moduláris CSS-feldolgozás ötletét. 2013. február 28-án TJ nyilvánosan kifejtette.
2013. március 14-én Andrey Sitnik a gonosz marslakók számára készített front-end munkája eredményeként elkészült az Autoprefixer, egy Rework-alapú plugin. Kezdetben a beépülő modul neve átdolgozott gyártók volt.
Az Autoprefixer növekedésével a Rework már nem tudta kielégíteni az igényeit. 2013. szeptember 7-én Andrey Sitnik elkezdte fejleszteni a PostCSS-t a Rework ötletek alapján.
3 hónap alatt megjelent az első PostCSS plugin, a grunt-pixrem. 2013. december 22-én az Autoprefixer 1.0 verziója áttért a PostCSS-re.
A PostCSS esetében az elsődleges stílusfókusz az alkímia . A projekt logója a filozófus kövét képviseli . A nagyobb és kisebb PostCSS verziók az Ars Goetia démonok után kapják a nevüket . Például az 1.0.0 verziót Marquis Decarabia-nak hívják.
A postprocesszor kifejezés némi zavart okozott. A PostCSS csapata ezt a kifejezést használta annak bemutatására, hogy a PostCSS nem sablonnyelv (előfeldolgozó), hanem CSS eszköz. Egyes fejlesztők azonban úgy gondolják, hogy a postprocesszor kifejezés jobban megfelel a böngésző eszközeinek (például -prefix-mentes). A helyzet még bonyolultabbá vált a PreCSS megjelenése után. Most a postprocesszor helyett a PostCSS csapata a processzort használja.
