PostCSS - PostCSS
 | |
| Entwickler | Andrej Sitnik, Ben Briggs, Bogdan Chadkin |
|---|---|
| Erstveröffentlichung | 4. November 2013 |
| Stabile Version | 8.2.8 / 9. März 2021
|
| Repository | postcss |
| Geschrieben in | JavaScript |
| Betriebssystem | Plattformübergreifend |
| Verfügbar in | Englisch |
| Art | CSS-Entwicklungstool |
| Lizenz | MIT-Lizenz |
| Webseite | postcss |
PostCSS ist ein Softwareentwicklungstool , das JavaScript- basierte Plugins verwendet, um routinemäßige CSS- Vorgänge zu automatisieren . Es wurde von Andrey Sitnik mit der Idee entworfen, die ihren Ursprung in seiner Front-End-Arbeit für Evil Martians hat.
Funktionalität
PostCSS ist ein Framework zur Entwicklung von CSS-Tools. Es kann verwendet werden, um eine Vorlagensprache wie Sass und LESS zu entwickeln.
Der PostCSS-Kern besteht aus:
- CSS- Parser , der einen abstrakten Syntaxbaum generiert
- Satz von Klassen , aus denen der Baum besteht
- CSS-Generator , der eine CSS-Zeile für den Objektbaum generiert
- Code Map Generator für die vorgenommenen CSS-Änderungen
Funktionen werden über Plugins zur Verfügung gestellt. Die Plugins sind kleine Programme, die mit dem Objektbaum arbeiten . Nachdem der Kern eine CSS-Zeichenfolge in einen Objektbaum umgewandelt hat, analysieren und ändern die Plugins den Baum. Anschließend generiert PostCSS eine neue CSS-Zeichenfolge für den vom Plugin geänderten Baum.
PostCSS und seine Plugins sind in JavaScript geschrieben und werden über npm verteilt , das APIs für JavaScript-Operationen auf niedriger Ebene bietet .
Es gibt offizielle Tools, mit denen PostCSS mit Build-Systemen wie Webpack , Gulp und Grunt verwendet werden kann . Es gibt auch eine Konsolenschnittstelle. Browserify oder Webpack können verwendet werden, um PostCSS in einem Browser zu öffnen.
Syntaxen
Mit PostCSS können Parser und Generator geändert werden. In diesem Fall kann PostCSS verwendet werden, um mit den Quellen Less und SCSS zu arbeiten . PostCSS allein kann jedoch Sass oder Less nicht zu CSS kompilieren. Dadurch werden die Originaldateien geändert, indem beispielsweise die CSS-Eigenschaften sortiert oder der Code auf Fehler überprüft werden. PostCSS unterstützt SugarSS.
Plugins
PostCSS Plugins führen verschiedene CSS - Verarbeitungsaufgaben von der Analyse bis hin und Eigenschaften zum Sortieren minification .
Die vollständige Liste der Plugins finden Sie auf postcss.parts. Einige Beispiele sind unten aufgeführt.
- Autoprefixer zum Hinzufügen und Löschen von Browserpräfixen.
- CSS-Module , um CSS-Selektoren zu isolieren und Code zu organisieren. Es wird als Teil von Webpack geliefert .
- stylelint , um CSS-Code auf Fehler zu analysieren und die Stilkonsistenz zu überprüfen.
- stylefmt korrigiert den CSS-Code gemäß den Stylelint-Einstellungen.
- PreCSS , um einige Sass / Less- Vorverarbeitungsfunktionen auszuführen .
- postcss-preset-env zum Emulieren von Features aus unvollendeten CSS-Spezifikationsentwürfen.
- cssnano , um CSS zu verkleinern, indem die Leerzeichen entfernt und der Code neu geschrieben werden.
- RTLCSS , um den CSS-Code so zu ändern, dass das Design für das Schreiben von rechts nach links geeignet ist (dies wird auf Arabisch und Hebräisch angewendet ).
- Postcss-Assets , Postcss-Inline- SVG und Postcss-Sprites für die Arbeit mit Grafiken.
Geschichte
Im Verlauf des Rework-Projekts wurde die Idee der modularen CSS-Verarbeitung von TJ Holowaychuk am 1. September 2012 vorgeschlagen. Am 28. Februar 2013 brachte TJ sie öffentlich zum Ausdruck.
Am 14. März 2013 führte Andrey Sitniks Front-End-Arbeit für Evil Martians zu Autoprefixer, einem Rework-basierten Plugin. Ursprünglich war der Name des Plugins Nachbearbeitungsanbieter.
Als Autoprefixer wuchs, konnte Rework seine Anforderungen nicht mehr erfüllen. Am 7. September 2013 begann Andrey Sitnik mit der Entwicklung von PostCSS basierend auf den Rework-Ideen.
In 3 Monaten wurde das erste PostCSS-Plugin, grunt-pixrem, veröffentlicht. Am 22. Dezember 2013 wurde Autoprefixer Version 1.0 auf PostCSS migriert.
Bei PostCSS liegt der Hauptfokus auf Alchemie . Das Projektlogo repräsentiert den Stein der Weisen . Haupt- und Nebenversionen von PostCSS erhalten ihre Namen nach den Dämonen von Ars Goetia . Zum Beispiel heißt Version 1.0.0 Marquis Decarabia.
Der Begriff Postprozessor hat einige Verwirrung gestiftet. Das PostCSS-Team verwendete den Begriff, um zu zeigen, dass PostCSS keine Vorlagensprache (Präprozessor), sondern ein CSS-Tool war. Einige Entwickler sind jedoch der Meinung, dass der Begriff Postprozessor besser für Browser-Tools geeignet ist (z. B. -prefix-frei). Die Situation ist nach der Veröffentlichung von PreCSS noch komplizierter geworden. Jetzt verwendet das PostCSS-Team anstelle des Postprozessors den Begriff Prozessor.
