PostCSS: Neues Spieldatum von Sass

PostCSS ist in letzter Zeit das Werkzeug, das auf der Frontend-Seite der Webentwicklung die Runde macht.

PostCSS wurde von Andrey Sitnik, dem Schöpfer von Autoprefixer, entwickelt. Es ist ein Node.js-Paket, das als Werkzeug entwickelt wurde, um Ihr gesamtes CSS mit JavaScript umzuwandeln und dadurch viel schnellere Build-Zeiten als andere Prozessoren zu erreichen.

Trotz allem, was der Name vermuten lässt, handelt es sich nicht um einen Postprozessor (noch um einen Präprozessor), sondern um einen Transpiler, der PostCSS-spezifische (oder PostCSS-Plugin-spezifische, um genauer zu sein) Syntax umzuwandeln Vanille-CSS.

Dies bedeutet jedoch nicht , dass PostCSS und andere CSS-Prozessoren nicht zusammenarbeiten können. Wenn Sie neu in der ganzen Welt der CSS-Vor-/Nachbearbeitung sind, kann Ihnen die Verwendung von PostCSS zusammen mit Sass tatsächlich viele Kopfschmerzen ersparen, auf die wir gleich eingehen werden.

PostCSS ist kein Ersatz für andere CSS-Prozessoren; Betrachten Sie es vielmehr als ein weiteres Tool, das sich bei Bedarf als nützlich erweisen kann, eine weitere Ergänzung zu Ihrem Toolset.

Die Verwendung von PostCSS hat in letzter Zeit exponentiell zugenommen, wobei es heute von einigen der größten Unternehmen der Technologiebranche wie Twitter, JetBrains und Wikipedia verwendet wird. Seine weite Verbreitung und sein Erfolg sind größtenteils auf seine Modularität zurückzuführen.

Plugins, Plugins, Plugins

Bei PostCSS dreht sich alles um Plugins.

Es ermöglicht Ihnen, die Plugins auszuwählen, die Sie verwenden möchten, unnötige Abhängigkeiten zu beseitigen und Ihnen sowohl ein schnelles als auch ein einfaches Setup zu geben, mit dem Sie arbeiten können, mit den grundlegenden Eigenschaften anderer Präprozessoren. Außerdem können Sie so eine stärker angepasste Struktur für Ihren Workflow erstellen und ihn gleichzeitig effizient halten.

Zum Zeitpunkt der Erstellung dieses Beitrags verfügt PostCSS über ein Repository von mehr als 200 Plugins, von denen jedes für unterschiedliche Aufgaben zuständig ist. Im GitHub-Repository von PostCSS werden Plugins nach „Globale CSS-Probleme lösen“, „Zukünftiges CSS heute verwenden“, „Bessere CSS-Lesbarkeit“, „Bilder und Schriftarten“, „Linters“ und „Sonstiges“ kategorisiert.

Im Plugins-Verzeichnis finden Sie jedoch eine genauere Kategorisierung. Ich rate Ihnen, sich dort selbst umzusehen, um sich ein besseres Bild von den Fähigkeiten einiger von ihnen zu machen; Sie sind ziemlich breit und ziemlich beeindruckend.

Sie haben wahrscheinlich schon vom beliebtesten PostCSS-Plugin gehört, Autoprefixer, einer beliebten eigenständigen Bibliothek. Das zweitbeliebteste Plugin ist CSSNext, ein Plugin, mit dem Sie die neueste CSS-Syntax von heute verwenden können, wie beispielsweise die neuen benutzerdefinierten Eigenschaften von CSS, ohne sich Gedanken über die Browserunterstützung machen zu müssen.

Allerdings sind nicht alle PostCSS-Plugins so bahnbrechend. Einige bieten Ihnen einfach Funktionen, die bei anderen Prozessoren wahrscheinlich standardmäßig vorhanden sind. Nehmen Sie zum Beispiel den parent selector . Mit Sass können Sie es sofort verwenden, wenn Sie Sass installieren. Bei PostCSS müssen Sie das Plugin postcss-nested-ancestors verwenden. Dasselbe könnte für extends oder mixins gelten.

Was ist also der Vorteil bei der Verwendung von PostCSS und seinen Plugins? Die Antwort ist einfach – Sie können Ihre eigenen Schlachten auswählen. Wenn Sie der Meinung sind, dass der einzige Teil von Sass, den Sie jemals verwenden werden, der parent selector ist, können Sie sich den Stress ersparen, so etwas wie eine Sass-Bibliotheksinstallation in Ihrer Umgebung zu implementieren, um Ihr CSS zu kompilieren, und den Prozess beschleunigen, indem Sie verwenden nur PostCSS und das Plugin postcss-nested-ancestors .

Das ist nur ein Anwendungsbeispiel für PostCSS, aber sobald Sie anfangen, es selbst auszuprobieren, werden Sie zweifellos viele andere Anwendungsfälle dafür erkennen.

Grundlegende PostCSS-Nutzung

Lassen Sie uns zunächst einige PostCSS-Grundlagen behandeln und einen Blick darauf werfen, wie es normalerweise verwendet wird. Während PostCSS extrem leistungsfähig ist, wenn es mit einem Task-Runner wie Gulp oder Grunt verwendet wird, kann es auch direkt von der Befehlszeile aus mit postcss-cli verwendet werden.

Betrachten wir einen einfachen Anwendungsfall. Angenommen, wir möchten das Plugin postcss-color-rgba-fallback verwenden, um allen unseren RGBA-formatierten Farben einen Fallback-HEX-Wert hinzuzufügen.

Nachdem wir NPM postcss , postcss-cli und postcss-color-rgba-fallback installiert haben, müssen wir den folgenden Befehl ausführen:

 postcss --use postcss-color-rgba-fallback -o src/css/all.css dist/css/all.css

Mit dieser Anweisung weisen wir PostCSS an, das Plugin postcss-color-rgba-fallback zu verwenden, das CSS zu verarbeiten, das sich in src/css/all.css , und es an dist/css/all.css .

Okay, das war einfach. Sehen wir uns nun ein komplexeres Beispiel an.

Verwenden von PostCSS zusammen mit Task-Runnern und Sass

PostCSS lässt sich recht einfach in Ihren Workflow integrieren. Wie bereits erwähnt, lässt es sich perfekt in Task-Runner wie Grunt, Gulp oder Webpack integrieren und kann sogar mit NPM-Skripten verwendet werden. Ein Beispiel für die Verwendung von PostCSS zusammen mit Sass und Gulp ist so einfach wie das folgende Code-Snippet:

 var gulp = require('gulp'), concatcss = require('gulp-concat-css'), sass = require('gulp-sass'), postcss = require('gulp-postcss'), cssnext = require('postcss-cssnext'); gulp.task('stylesheets', function () { return ( gulp.src('./src/css/**/*.scss') .pipe(sass.sync().on('error', sass.logError)) .pipe(concatcss('all.css')) .pipe(postcss([ cssNext() ])) .pipe(gulp.dest('./dist/css')) ) });

Lassen Sie uns das obige Codebeispiel dekonstruieren.

Es speichert Verweise auf alle benötigten Module (Gulp, Contact CSS, Sass, PostCSS und CSSNext) in einer Reihe von Variablen.

Dann registriert es eine neue Gulp-Aufgabe namens stylesheets . Diese Aufgabe sucht nach Dateien, die sich in ./src/css/ mit der Erweiterung .scss (unabhängig davon, wie tief sie in der Unterverzeichnisstruktur sind), Sass kompiliert sie und verkettet sie alle zu einer einzigen all.css -Datei.

Sobald die all.css -Datei generiert ist, wird sie an PostCSS übergeben, um den gesamten PostCSS- (und Plugin-)bezogenen Code in das eigentliche CSS zu transpilieren, und dann wird die resultierende Datei in ./dist/css .

OK, das Einrichten von PostCSS mit einem Task-Runner und einem Präprozessor ist großartig, aber reicht das aus, um überhaupt zu rechtfertigen, mit PostCSS zu arbeiten?

Sagen wir es so: Während Sass stabil und ausgereift ist und eine riesige Community hinter sich hat, möchten wir PostCSS zum Beispiel für Plugins wie Autoprefixer verwenden. Ja, wir könnten die eigenständige Autoprefixer-Bibliothek verwenden, aber die Vorteile der Verwendung von Autoprefixer als PostCSS-Plugin sind die Möglichkeit, später weitere Plugins zum Workflow hinzuzufügen und unnötige Abhängigkeiten von einer Schiffsladung von JavaScript-Bibliotheken zu vermeiden.

Dieser Ansatz ermöglicht es uns auch, Eigenschaften ohne Präfix zu verwenden und ihnen basierend auf den Werten, die von APIs abgerufen werden, wie dem von Can I Use, ein Präfix zuzuweisen, was mit Sass allein kaum zu erreichen ist. Dies ist ziemlich nützlich, wenn wir versuchen, komplexe Mixins zu vermeiden, die möglicherweise nicht der beste Weg sind, Code voranzustellen.

Wenn Sie Sass bereits verwenden, können Sie PostCSS am häufigsten in Ihren aktuellen Arbeitsablauf integrieren, indem Sie die kompilierte Ausgabe Ihrer .sass oder .scss -Datei durch PostCSS und seine Plugins leiten. Dadurch wird eine weitere CSS-Datei generiert, die die Ausgabe von Sass und PostCSS enthält.

Wenn Sie einen Task-Runner verwenden, ist die Verwendung von PostCSS so einfach wie das Hinzufügen zu der Pipeline von Tasks, die Sie derzeit haben, direkt nach dem Kompilieren Ihrer .sass oder .scss -Datei (oder der Dateien Ihres Präprozessors Ihrer Wahl).

PostCSS funktioniert gut mit anderen und kann eine Erleichterung für einige große Schmerzpunkte sein, mit denen wir als Entwickler jeden Tag konfrontiert sind.

Werfen wir einen Blick auf ein weiteres Beispiel für die Zusammenarbeit von PostCSS (und einigen Plugins wie CSSNext und Autoprefixer) und Sass. Sie könnten den folgenden Code haben:

 :root { $sass-variable: #000; --custom-property: #fff; } body { background: $sass-variable; color: var(--custom-property); &:hover { transform: scale(.75); } }

Dieses Code-Snippet hat Vanilla-CSS und Sass-Syntax. Benutzerdefinierte Eigenschaften befinden sich zum Zeitpunkt der Erstellung dieses Artikels immer noch im Status „Kandidatenempfehlung“ (CR), und hier kommt das CSSNext-Plug-in für PostCSS ins Spiel.

Dieses Plugin wird dafür verantwortlich sein, Dinge wie benutzerdefinierte Eigenschaften in das heutige CSS umzuwandeln. Etwas Ähnliches passiert mit der transform -Eigenschaft, die vom Autoprefixer-Plug-in automatisch vorangestellt wird. Der zuvor geschriebene Code führt dann zu etwas wie:

 body { background: #000; color: #fff; } body:hover { -webkit-transform: scale(.75); transform: scale(.75); }

Autoren-Plugins für PostCSS

Wie bereits erwähnt, ist ein attraktives Merkmal von PostCSS der Grad der Anpassung, den es ermöglicht. Dank seiner Offenheit ist das Erstellen eines eigenen benutzerdefinierten Plugins für PostCSS, das Ihre speziellen Anforderungen abdeckt, eine ziemlich einfache Aufgabe, wenn Sie mit dem Schreiben von JavaScript vertraut sind.

Die Leute von PostCSS haben eine ziemlich solide Liste zum Starten, und wenn Sie daran interessiert sind, ein Plugin zu entwickeln, sehen Sie sich ihre empfohlenen Artikel und Leitfäden an. Wenn Sie das Gefühl haben, etwas fragen oder etwas besprechen zu müssen, ist Gitter der beste Ausgangspunkt.

PostCSS hat seine API mit einer ziemlich aktiven Basis von Followern auf Twitter. Zusammen mit anderen Community-Vorteilen, die zuvor in diesem Beitrag erwähnt wurden, macht dies den Plugin-Erstellungsprozess so unterhaltsam und zu einer so kollaborativen Aktivität.

Um also ein PostCSS-Plugin zu erstellen, müssen wir ein Node.js-Modul erstellen. (Normalerweise wird den PostCSS-Plugin-Ordnern im node_modules/ ein Präfix wie „postcss-“ vorangestellt, um deutlich zu machen, dass es sich um Module handelt, die von PostCSS abhängen.)

Für den Anfang müssen wir in der index.js -Datei des neuen Plugin-Moduls den folgenden Code einfügen, der der Wrapper des Verarbeitungscodes des Plugins sein wird:

 var postcss = require('postcss'); module.exports = postcss.plugin('replacecolors', function replacecolors() { return function(css) { // Rest of code } });

Wir haben das Plugin replacecolors genannt . Das Plugin sucht nach einem Schlüsselwort deepBlackText und ersetzt es durch den HEX-Farbwert #2e2e2e :

 var postcss = require('postcss'); module.exports = postcss.plugin('replacecolors', function replacecolors() { return function(css) { css.walkRules(function(rule) { rule.walkDecls(function(decl, i) { var declaration = decl.value; if (declaration.indexOf('deepBlackText') !== -1) { declaration = 'color: #2e2e2e;'; } }); }); } });

Das vorherige Snippet hat nur Folgendes getan:

1. Mit walkRules() iteriert es durch alle CSS-Regeln, die in der aktuellen .css -Datei enthalten sind, die wir gerade durchlaufen.
2. Unter Verwendung von walkDecls() iterierte es durch alle CSS-Deklarationen, die sich in der aktuellen .css -Datei befinden.
3. Dann speicherte es die Deklaration in der Deklarationsvariablen und prüfte, ob die Zeichenfolge deepBlackText darin enthalten war. Wenn dies der Fall war, wurde die gesamte Deklaration für die folgende CSS-Deklaration ersetzt: color: #2e2e2e; .

Sobald das Plugin fertig ist, können wir es direkt von der Befehlszeile aus verwenden:

 postcss --use postcss-replacecolors -o src/css/all.css dist/css/all.css

Oder zum Beispiel so in ein Guplfile geladen:

 var replacecolors = require('postcss-replacecolors');

Sollte ich meinen aktuellen CSS-Prozessor aufgeben, um PostCSS zu verwenden?

Nun, das hängt davon ab, wonach Sie suchen.

Es ist üblich, dass sowohl Sass als auch PostCSS gleichzeitig verwendet werden, da es für Neulinge einfacher ist, mit einigen der Tools zu arbeiten, die Prä-/Postprozessoren standardmäßig anbieten, zusammen mit den Funktionen von PostCSS-Plugins. Wenn Sie sie nebeneinander verwenden, können Sie auch vermeiden, einen vordefinierten Workflow mit relativ neuen und höchstwahrscheinlich unbekannten Tools neu zu erstellen, und gleichzeitig eine Möglichkeit bieten, aktuelle prozessorabhängige Implementierungen (wie Sass mixins , extend , the parent selector , placeholder selectors , und so weiter).

Geben Sie PostCSS eine Chance

PostCSS ist das heiße (na ja, irgendwie) neue Ding in der Welt der Front-End-Entwicklung. Es wurde weithin angenommen, da es per se kein Vor-/Nachprozessor ist und flexibel genug ist, um sich an die Umgebung anzupassen, in die es eingefügt wird.

Ein Großteil der Leistungsfähigkeit von PostCSS liegt in seinen Plugins. Wenn Sie nach Modularität, Flexibilität und Vielfalt suchen, dann ist dies das richtige Werkzeug für den Job.

Wenn Sie Task Runner oder Bundler verwenden, ist das Hinzufügen von PostCSS zu Ihrem aktuellen Flow höchstwahrscheinlich ein Kinderspiel. Überprüfen Sie das Installations- und Verwendungshandbuch, und Sie werden wahrscheinlich eine einfache Möglichkeit finden, es mit den Tools zu integrieren, die Sie bereits verwenden.

Viele Entwickler sagen, dass es zumindest für die absehbare Zukunft hier bleiben wird. PostCSS kann einen großen Einfluss darauf haben, wie wir unser heutiges CSS strukturieren, und das könnte möglicherweise zu einer viel größeren Akzeptanz von Standards in der Front-End-Webentwicklungsgemeinschaft führen.