Share
Ich bin sicher, dass Sie bis zu diesem Punkt sicher und gut informiert sind. Es gibt viele Gründe, warum es so viele großartige Plugins gibt, von denen immer mehr herauskommen. PostCSS macht das Erstellen eines eigenen Plugins für jeden, der Erfahrung mit JavaScript hat, so zugänglich.
Sie benötigen keine spezielle Erlaubnis, um ein PostCSS-Plugin zu erstellen. Wenn Sie einen machen wollen, machen Sie einfach weiter und machen es. Durch diese Freiheit haben Sie die Möglichkeit, Ihre CSS-Entwicklungsprozesse in das zu verwandeln, was Sie möchten, ganz zu schweigen von der Möglichkeit, Ihre Arbeit mit anderen Mitgliedern der schnell wachsenden PostCSS-Community zu teilen.
In diesem Tutorial erfahren Sie, wie Sie ein einfaches Plugin für PostCSS erstellen. Wir werden uns nicht zu sehr mit der Plugin-API beschäftigen und keine Super-Hardcore-Codierung verwenden. Ich selbst bin ein Front-End-Entwickler und meine JavaScript-Kenntnisse sind auf dem Niveau, das Sie von einem Front-End-Mitarbeiter erwarten würden. Das hat mich jedoch nicht daran gehindert, innerhalb weniger Stunden mein erstes PostCSS-Plugin zu erstellen.
Folgen Sie den Anweisungen und überzeugen Sie sich selbst, wie zugänglich die PostCSS-Plugin-Entwicklung sein kann!
Wir werden ein Plugin erstellen, das das einfache Einfügen von Schriftstapeln ermöglicht Schriftfamilie Deklarationen über folgende Syntax:
Accentsconagua
h1 font-family: "Open Sans", fontstack ("Arial"); Nach dem Kompilieren wird der obige Code folgendermaßen:
h1 Schriftfamilie: "Open Sans", Arial, "Helvetica Neue", Helvetica, Serifenlose;
Obwohl Sie Ihr eigenes Plugin erstellen, müssen Sie zunächst ein leeres Gulp- oder Grunt-Projekt erstellen. Sie laden Ihr Plugin auf dieselbe Weise in dieses Projekt, wie Sie in dieser Serie die Plugins anderer Personen verwendet haben.
Wie Sie Gulp- oder Grunt-Projekte für PostCSS einrichten, erfahren Sie in den vorherigen Tutorials:
Wenn Sie Ihr Projekt jedoch nicht manuell einrichten möchten, können Sie die an dieses Tutorial angehängten Quelldateien herunterladen und entweder das bereitgestellte Gulp- oder Grunt-Starterprojekt in einen leeren Projektordner extrahieren. Führen Sie dann den Befehl mit einer Terminal- oder Eingabeaufforderung auf den Ordner aus npm installieren.
Erstellen Sie in "node_modules" einen Ordner mit dem Namen "postcss-myplugin". Es ist üblich, das Präfix zu verwenden postcss- um zu verdeutlichen, dass Ihr Plugin für PostCSS ist.
Alle PostCSS-Plugins sind Knotenmodule. Daher müssen wir Ihren neuen Ordner in einen neuen Ordner umwandeln. Öffnen Sie eine Terminal- / Eingabeaufforderung, zeigen Sie auf den neu erstellten Ordner, und führen Sie sie aus npm init. Dadurch wird die Grundeinrichtung eines Knotenmoduls durchgeführt. Folgen Sie daher einfach den Anweisungen Ihres Terminals und belassen Sie das Feld "Einstiegspunkt" als Standard "index.js"..
Führen Sie anschließend den Befehl aus, während Ihr Terminal immer noch auf den Ordner gerichtet ist npm install postcss --save. Dadurch wird PostCSS als Abhängigkeit für dieses Modul installiert, was alle PostCSS-Plugins tun müssen.
Erstellen Sie eine Datei mit dem Namen "index.js" im Ordner "postcss-myplugin". Fügen Sie diesen Code zum Laden in das postcss-Hauptmodul hinzu:
var postcss = required ('postcss');Dann fügen Sie diesen grundlegenden Wrapper hinzu, der den Verarbeitungscode unseres Plugins umgibt:
var postcss = required ('postcss'); module.exports = postcss.plugin ('myplugin', Funktion myplugin (Optionen) return Funktion (css) Optionen = Optionen || ; // Verarbeitungscode wird hier hinzugefügt;Jetzt können Sie Ihr neu erstelltes Plugin in Ihr Projekt laden. Es tut noch nichts, aber wir möchten nur das notwendige Setup einrichten.
Wenn Sie Gulp verwenden, fügen Sie diese Variable unter der bereits in der Datei enthaltenen hinzu:
var myplugin = required ('postcss-myplugin');Fügen Sie nun den neuen Variablennamen in Ihr ein Prozessoren Array:
var Prozessoren = [myplugin];
Führen Sie einen kurzen Test durch, indem Sie den Befehl ausführen Schluck Css und prüfen, ob im Ordner "dest" Ihres Projekts eine neue Datei "style.css" angezeigt wurde.
Wenn Sie Grunt verwenden, aktualisieren Sie die Prozessoren Objekt, das unter dem verschachtelt ist Optionen Objekt zu Folgendem:
Prozessoren: [erfordern ('postcss-myplugin') ()]Führen Sie einen kurzen Test durch, indem Sie den Befehl ausführen grunzen postcss und prüfen, ob im Ordner "dest" Ihres Projekts eine neue Datei "style.css" angezeigt wurde.
Bevor wir mit dem Hinzufügen von Verarbeitungscode zu unserem Plugin beginnen, fügen wir unserem Stylesheet Testcode hinzu, mit dem das Plugin arbeiten kann.
Fügen Sie Ihrer "src / style.css" -Datei dieses CSS hinzu:
h1 font-family: "Open Sans", fontstack ("Arial"); Da unser Plugin noch nichts tut, wird beim Kompilieren Ihres CSS-Codes genau derselbe Code direkt in die Datei „style.css“ Ihres Zielordners kopiert.
Jetzt wollen wir das CSS unserer Datei scannen, um alle Instanzen von zu finden fontstack () und verarbeiten sie. Um damit anzufangen, fügen Sie den folgenden Code hinter dem ein Optionen = Optionen || ; Linie:
css.walkRules (function (rule) rule.walkDecls (function (decl, i) ););
Wenn Sie walkRules () in der ersten Zeile verwenden, werden alle Regeln in Ihrem CSS durchlaufen. Eine Regel ist im Grunde Ihre Auswahl und die Stile, die Sie zwischen den geschweiften Klammern festgelegt haben. In unserem Test-CSS wäre eine Regel:
h1 font-family: "Open Sans", fontstack ("Arial"); In jeder Regel durchläuft walkDecls () jede Deklaration. Eine Deklaration ist im Wesentlichen jede Zeile des Stils. In der obigen CSS wäre eine Deklaration:
font-family: "Open Sans", fontstack ("Arial");fontstack () Syntax wird verwendetWenn wir jede Deklaration mit dem soeben hinzugefügten Code durchlaufen, wird die aktuelle Deklaration durch dargestellt erklären, Dies ermöglicht uns den Zugriff auf die Eigenschaft und den Wert der Deklaration über decl.prop und Deklarationswert beziehungsweise.
Mit unserem Beispiel-CSS, decl.prop würde uns geben Schriftfamilie und Deklarationswert würde uns geben "Open Sans", fontstack ("Arial").
Wir wollen jeden prüfen Deklarationswert in unserem Stylesheet, um zu sehen, ob es die Zeichenfolge enthält fontstack (. Wenn dies der Fall ist, wissen wir, dass jemand versucht, unser CSS mit einem Plug-In zu ergänzen.
In der walkDecl () Schleife, fügen Sie hinzu:
Var-Wert = Deklarationswert; if (value.indexOf ('fontstack (')! == -1) console.log ("found fontstack");Zuerst nehmen wir mit Deklarationswert und speichern Sie es in der Variablen Wert. Alle Änderungen an Deklarationswert wird in das kompilierte Stylesheet gesendet; Wir speichern seinen Inhalt in der Variablen Wert so können wir damit herumspielen.
Dann verwenden wir die Methode indexOf (), um unser neues zu durchsuchen Wert Variable für die Zeichenfolge fontstack (. Wenn es gefunden wird, protokollieren wir "found fontstack" in der Konsole, damit wir überprüfen können, ob alles soweit funktioniert.
Lauf Schluck Css oder grunzen postcss und Sie sollten einmal in Ihrer Terminal- / Eingabeaufforderung die Ausgabe von "found fontstack" sehen.
Nun, da unser Plugin Instanzen von finden kann fontstack () In unserem Stylesheet können wir uns darauf vorbereiten, diese Instanz in einen Schriftartenstapel umzuwandeln, d. h. eine Liste von Schriftnamen. Aber bevor wir das tun können, müssen wir zuerst diese Zeichensatzstapel definieren.
Oben in Ihrer Datei unter der vorhandenen postcss Variable, erstellen Sie eine Variable mit dem Namen fontstacks_config. Wir werden aus dieser Variablen ein Objekt mit Schlüssel-Wert-Paaren machen.
Für jeden Eintrag im Objekt sollte der Schlüssel der erste Zeichensatz im Zeichensatzstapel sein, z. 'Arial'. Es ist die Zeichenfolge, die ein Benutzer übergibt, um den Schriftart-Stapel anzugeben, den er verwenden möchte, z. fontstack ("Arial") oder fontstack ("Times New Roman").
Der Wert in jedem Paar sollte eine Zeichenfolge der vollständigen Liste der in dem Schriftartenstapel enthaltenen Schriftarten sein, z. 'Arial, "Helvetica Neue", Helvetica, serifenlos ".
Fügen Sie Ihrem Eintrag zwei Einträge hinzu fontstacks_config Objekt, eines für "Arial" und eines für "Times New Roman", wobei die von CSS Font Stack bereitgestellten Schriftstapel verwendet werden.
Ihre fontstacks_config Variable sollte so aussehen:
// Fontstacks von http://www.cssfontstack.com/ var fontstacks_config = 'Arial': 'Arial, "Helvetica Neue", Helvetica, Sans-Serif ",' Times New Roman ':' TimesNewRoman," Times New Roman ", Times, Baskerville, Georgia, Serife"
Das erste, was wir tun müssen, wenn wir eine Instanz von finden fontstack () verwendet wird, um herauszufinden, welchen Schriftart-Stapel der Benutzer angefordert hat, d. h. welche Zeichenfolge er zwischen den Klammern gesetzt hat.
Zum Beispiel, wenn ein Benutzer eingegeben hat fontstack ("Arial") Wir möchten die Zeichenfolge extrahieren Arial. Der Grund, warum wir diese Zeichenfolge wünschen, ist der Schlüssel, den wir verwenden können, um den entsprechenden Schriftstapel von unserem nachzuschlagen fontstacks_config Objekt.
Fügen Sie diesen Code sofort in das ein ob Aussage, die wir früher hinzugefügt haben, ersetzt die console.log ("found fontstack"); Linie:
// Den Namen des angeforderten fontstacks abrufen, indem die Zeichenfolge in den Klammern von fontstack () abgeglichen wird. // Ersetzen Sie dann alle doppelten oder einfachen Anführungszeichen. var fontstack_requested = value.match (/ \ (([^)] +) \) /) [1] .replace (/ ["'] / g," ");
Wir führen hier zwei Schritte aus, um den Namen des fontstacks als Zeichenfolge zu extrahieren.
Zuerst verwenden wir die match () -Methode, um die Zeichenfolge zwischen den Klammern in unserem Wert zu finden. Das würde uns eine Zeichenfolge geben "Arial" oder 'Arial'.
Wir möchten nur den Namen der Schriftart ohne doppelte oder einfache Anführungszeichen. Daher verwenden wir die replace () -Methode, um sie aus der Zeichenfolge zu entfernen, sodass eine nicht mit Anführungszeichen versehene Zeichenfolge wie z Arial.
Diese Zeichenfolge wird im gespeichert fontstack_requested Variable.
Wir werden unser neu erstelltes verwenden fontstack_requested Variable, um einen Fontstapel von unserem zu finden fontstack_config Möglichkeit. Der knifflige Teil ist, dass die Schlüssel in diesem Objekt die Groß- und Kleinschreibung berücksichtigen Arial Eingabe mit der Taste arial es wird scheitern.
Um dieses Problem zu lösen, werden wir die Zeichenfolge mit "Title Case" versehen, also zum Beispiel mal neu römisch würde in umgewandelt werden Times New Roman. Wir machen dies über eine kurze benutzerdefinierte Funktion.
Unter deiner fontstacks_config Variable addiere dies toTitleCase () Funktion:
// Kredit für diese Funktion http://stackoverflow.com/questions/196972/convert-string-to-title-case-with-javascript/196991#196991 function toTitleCase (str) return str.replace (/ \ w \ S * / g, Funktion (txt) return txt.charAt (0) .toUpperCase () + txt.substr (1) .toLowerCase (););
Jetzt wenden wir diese Funktion auf unsere an fontstack_requested Variable. Unter der Zeile, in der Sie das erstellt haben fontstack_requested Variable, fügen Sie diesen Code hinzu:
// Titelkoffer die Wörter im Namen der Schriftart, nur für den Fall, dass der Benutzer dies nicht selbst tun würde fontstack_requested = toTitleCase (fontstack_requested);
Das passiert das fontstack_requested variabel durch unsere toTitleCase () Funktion, ihren Wert aktualisieren.
Jetzt haben wir unsere fonstack_requested Wenn die Variable korrekt eingestellt ist, können wir den entsprechenden Fontstapel nachschlagen. Fügen Sie nach der gerade hinzugefügten Zeile diesen Code ein:
// Den angeforderten fontstack im fontstack_config-Objekt nachschlagen var fontstack = fontstacks_config [fontstack_requested];
Dies findet den Wert in der fontstacks_config Objekt, dessen Schlüssel mit der Zeichenfolge in unserem übereinstimmt fontstack_requested Variable.
Zum Beispiel wenn fontstack_requested enthält die Zeichenfolge Arial, der Eintrag in fontstacks_config mit dem Schlüssel Arial wird gefunden und der Wert 'Arial, "Helvetica Neue", Helvetica, serifenlos " Wird zurückgegeben.
Dieser zurückgegebene Wert wird dann in der Variablen gespeichert fontstack.
Jetzt haben wir unseren Font-Stack-String abgerufen und können nun in CSS eingefügt werden, aber es gibt noch etwas, was wir noch tun müssen. Sie erinnern sich in unserem Testcode daran, dass wir die Schriftart "Open Sans" als bevorzugte Schriftart hinzugefügt haben, wobei der Schriftartstapel als Fallback fungiert. Wir müssen diesen Schriftnamen auch aus dem Wert abrufen, damit er dem CSS hinzugefügt werden kann, das in das verarbeitete Stylesheet eingefügt wird.
Unter dem fontstack variable Zeile, fügen Sie diesen Code hinzu:
// Suchen und speichern Sie alle Schriftartnamen, die möglicherweise bereits im Wert enthalten sind, bevor der fontstack () - Aufruf var first_font = value.substr (0, value.indexOf ('fontstack ('));Dieser Code verwendet die substr () -Methode, um Inhalte zwischen dem Anfang unserer zu finden Wert, (dargestellt durch 0) und unser fontstack () Instanz (gefunden mit der Methode indexOf ()). Der gefundene Inhalt wird in der Variablen gespeichert first_font.
Zum Beispiel in unserem Testcode Wert entspricht "Open Sans", fontstack ("Arial"), so die first_font Variable wird als gesetzt "Offene Sans", .
Wir haben jetzt alle Teile, die wir benötigen, um einen neuen Wert zu erstellen, mit dem der ursprüngliche Wert unseres Testcodes ersetzt werden soll "Open Sans", fontstack ("Arial").
Fügen Sie nach dem zuletzt hinzugefügten Code diesen Code ein:
// Erstellen Sie den neuen Wert für diese Regel, indem Sie die Variablen first_font und fontstack kombinieren. Var new_value = first_font + fontstack;
Hier kombinieren wir unsere first_font und fontstack Variablen in eine einzige Zeichenfolge und speichern sie in der Variablen neuer Wert.
In unserem Testcode würde dies eine Kombination bedeuten "Offene Sans", und Arial, "Helvetica Neue", Helvetica, serifenlos.
Unsere neuer Wert Die Variable würde dann die Zeichenfolge enthalten "Open Sans", "Arial", "Helvetica Neue", Helvetica, Serifenlose ".
Dies gibt uns nun den vollständigen Wert, den wir dem verarbeiteten Stylesheet hinzufügen möchten, so dass:
font-family: "Open Sans", fontstack ("Arial"); … Wird umgewandelt in:
Schriftfamilie: "Open Sans", "Arial", "Helvetica Neue", Helvetica, Sans-Serif ";
Jetzt, da wir unseren neuen Wert zum Einfügen in das bearbeitete Stylesheet bereit haben, müssen wir nur noch aktualisieren Deklarationswert. PostCSS kümmert sich um den Rest und fügt den neuen Wert in das verarbeitete CSS für uns ein.
Fügen Sie diesen Code nach der letzten hinzugefügten Zeile hinzu:
// Sende den neuen Wert zurück ins Stylesheet decl.value = new_value;
Dies setzt Deklarationswert um den Inhalt unserer neuer Wert Variable.
Dein Plugin ist jetzt gut zu gehen. Machen Sie einen Wirbel, indem Sie Ihr Stylesheet mit kompilieren Schluck Css oder grunzen postcss (mit Ihrem Terminal auf Ihren Projektordner, nicht auf Ihren Plugin-Ordner).
Ihre "dest / style.css" -Datei sollte jetzt einen vollständigen Schriftstapel enthalten:
h1 Schriftfamilie: "Open Sans", Arial, "Helvetica Neue", Helvetica, Serifenlose;
Möglicherweise möchten Sie den Benutzern Ihres Plugins erlauben, ihre eigenen Optionen festzulegen, genauso wie Sie Optionen eingestellt haben, wie Sie PostCSS-Plugins in dieser Serie verwendet haben.
Wir möchten, dass Benutzer eine Einstellung vornehmen können Fontstacks Option, entweder zusätzliche Zeichensatzstapel hinzufügen oder vorhandene Zeichensatzstapel neu definieren, zum Beispiel:
fontstacks: 'Extra Stack': '"Extra Stack", "Moar-Schriften", Extra, Serif "," Arial ":" Arial "," Comic Sans "'
Hinweis: Dieser Schritt ist optional. Wenn Sie möchten, können Sie es überspringen und Ihr Plugin funktioniert einwandfrei, ohne dass Sie eine Konfiguration vornehmen müssen.
Wir haben bereits den wesentlichen Teil der Aktivierung von benutzerdefinierten Optionen in unserem Plugin. In unserer modul.exporte Linie, die Sie bemerken werden Optionen Argument wird weitergegeben.
module.exports = postcss.plugin ('myplugin', Funktion (Optionen) Wir erhalten alle vom Benutzer festgelegten Benutzeroptionen.
Sie werden auch sehen, dass wir die Leitung haben:
Optionen = Optionen || ;
Dies prüft, ob Optionen hat einen beliebigen Wert, und wenn dies nicht der Fall ist, wird ein leeres Objekt festgelegt. Dies stellt sicher, dass wir keine Fehler erhalten, wenn wir mit der Arbeit beginnen Optionen das könnte daraus entstehen, dass es undefiniert ist.
Als Erstes installieren wir Underscore.js in unser Projekt, da wir seine praktische extend () - Methode verwenden. Führen Sie diesen Befehl aus, um ihn in das Plugin zu installieren, das Sie erstellen:
npm install unterstrichen --save
Laden Sie nun Unterstrich in Ihr Plugin, indem Sie eine hinzufügen _ Variable, um es unter Ihrem bestehenden zu erfordern postcss Variable:
var postcss = required ('postcss'); var _ = required ('Unterstrich');Als nächstes nehmen wir die fontstacks_config Objekt, das wir bereits innerhalb des Plugins erstellt haben, und erweitert es mit allen Schriftstapeln, die der Benutzer durch seine Optionskonfiguration festgelegt hat.
Fügen Sie diesen Code direkt unter ein Optionen = Optionen || ; Linie:
// Erweitern Sie die Standardoption fontstacks_config um beliebige benutzerdefinierte fontstacks, die in den Optionen des Plugins festgelegt sind. Fontstacks_config = _.extend (fontstacks_config, options.fontstacks);
Das Fontstacks Die vom Benutzer eingestellte Option wird durch dargestellt options.fontstacks.
Mit Unterstrichen erweitern() Methode, alle Schriftarten in stapeln options.fontstacks werden den bereits in hinzugefügt fontstacks_config. Wo immer es einen passenden Schlüssel gibt, den Wert von options.fontstacks wird das in überschreiben fontstacks_config. Auf diese Weise können Benutzer vorhandene Schriftstapel neu definieren.
Stellen Sie in Ihrem Gulpfile oder Gruntfile ein Fontstacks Option und übergeben Sie einen neuen Fontstapel sowie die Definition eines vorhandenen Fonts:
/ * Gulpfile * / var processingors = [myplugin (fontstacks: 'Extra Stack': '"Extra Stack", "Moar-Schriften", Extra, Serif "," Arial ":" Arial "," Comic Sans "' )]; / * Gruntfile * / Prozessoren: [erfordern ('postcss-myplugin') (fontstacks: 'Extra Stack': '"Zusätzlicher Stack", "Moar-Schriftarten", Extra, Serif "," Arial ":" Arial ") Comic sans"' ) ]Fügen Sie Ihrer "src / style.css" -Datei nun etwas mehr CSS hinzu, damit wir den neuen Schriftstapel, den wir gerade hinzugefügt haben, mit unseren Optionen testen können:
h2 font-family: "Droid Sans", fontstack ("Extra Stack"); Kompilieren Sie Ihr CSS erneut, und Sie sollten feststellen, dass Ihr "Arial" -Schriftartenstapel jetzt eine andere Ausgabe hat und dass Ihr "Extra-Stapel" -Schriftartenstapel korrekt ausgegeben wurde:
h1 font-family: "Open Sans", Arial, "Comic Sans"; h2 font-family: "Droid Sans", "Extra Stack", "Moar Fonts", Extra, Serif;
Das ist es! Du bist alles erledigt. Sie haben Ihr erstes PostCSS-Plugin fertiggestellt.
Hier ist die gesamte Sache auf GitHub, wenn Sie Ihren Code damit als Referenz vergleichen müssen.
Sie haben gerade ein komplettes PostCSS-Plugin erstellt, und ich hoffe, dass Ihnen einige Ideen in Bezug auf andere Plugins in den Sinn kommen, die Sie gerne machen würden. Vielleicht gibt es diese kleine Sache, die Sie beim Schreiben von CSS immer stört, und vielleicht können Sie jetzt Ihre eigene Lösung finden, um sie endgültig loszuwerden. Oder vielleicht gibt es etwas Besonderes, von dem Sie glauben, dass CSS aus der Box kommen sollte - nun, jetzt können Sie es selbst hinzufügen!
Um zusammenzufassen, was wir behandelt haben:
Jed Mao hat im Rahmen der 5.0-Version von PostCSS eine große Anzahl von TypeScript-Definitionen beigesteuert, die bei der Plugin-Entwicklung durch die automatische Vervollständigung und Inline-Dokumentation während der Eingabe sehr hilfreich sein können.
Wenn Sie in die PostCSS-Plugin-Entwicklung einsteigen, lohnt es sich wirklich, dies in Ihren Workflow zu integrieren. Ich selbst bin keine dicke TypeScript-Hand, werde mich aber trotzdem damit beschäftigen, fast rein, damit ich diese Funktionalität nutzen kann.
Wenn Sie dies ausprobieren möchten, müssen Sie nicht unter Windows oder Visual Studio sein, da Sie den kostenlosen Open-Source-Code von Visual Studio verwenden können, der unter Windows, Mac und Linux ausgeführt wird und auf Electron basiert , die gleiche Shell, die den Atom Editor aktiviert.
Ein Beispiel für die Integration dieser TypeScript-Definitionen in Ihr Projekt finden Sie im Plugin postcss-font-pack. Führen Sie einen Schritt in Visual Studio Code durch, um zu sehen, wie die automatische Vervollständigung und die Inline-Dokumentation funktionieren.
Vielen Dank, dass Sie an dieser PostCSS Deep Dive-Serie teilgenommen haben. Ich hoffe, es hat euch so viel Spaß gemacht, wie ich es gemacht habe! Noch wichtiger ist, ich hoffe, Sie haben einen Kopf voller Ideen, wie Sie PostCSS in Ihrem täglichen Webentwicklungsleben einsetzen können.
PostCSS ist wirklich eine unglaubliche Neuheit in der Front-End-Welt, denn die Art und Weise, wie Plugins ermöglicht werden, eröffnet Möglichkeiten für Möglichkeiten, die wir bisher bei der CSS-Entwicklung noch nie zuvor gesehen haben. Das Angebot an derzeit verfügbaren Plugins reicht bereits aus, um die täglichen Arbeitsabläufe einer Person vollständig umzugestalten, und das ist genau das, was innerhalb weniger Jahre geschaffen wurde.
Ich würde vorschlagen, dass PostCSS noch nicht seinen Höhepunkt erreicht hat, und da es anfängt, etwas zu wissen, von dem die Mehrheit der CSS-Entwickler zumindest etwas weiß, wenn nicht, wenn wir nicht schwören, werden wir sehen, dass es wirklich seinen Schritt macht. Da mehr Front-End-Entwickler an Bord sind, werden wir weitere Beiträge zum Plugin-Ökosystem sehen, neue Plugins hinzufügen und beim Aufbau vorhandener helfen.
!
