PostCSS: CSS mit JavaScript transformieren

PostCSS verändert den Ansatz der CSS-Verarbeitung — statt eines monolithischen Präprozessors bietet es ein modulares Plugin-System. Autoprefixer, cssnext und die Zukunft des CSS-Tooling.

Das Ende monolithischer Präprozessoren?¶

Sass und Less dominieren das CSS-Preprocessing, führen aber ihre eigene Syntax ein, die sich immer weiter von CSS entfernt. PostCSS bietet eine Alternative — es parst CSS in einen AST, wendet JavaScript-Plugins an und generiert die Ausgabe.

Der entscheidende Unterschied: PostCSS fügt keine neue Sprache hinzu. Plugins transformieren Standard-CSS (oder zukünftige CSS-Syntax), und jedes Team wählt nur die Transformationen, die es braucht.

Autoprefixer und cssnext¶

Das beliebteste PostCSS-Plugin ist Autoprefixer — es fügt automatisch Vendor-Präfixe basierend auf Can-I-Use-Daten hinzu:

/* Input */
.box {
  display: flex;
  user-select: none;
}

/* Output (Autoprefixer) */
.box {
  display: -webkit-flex;
  display: flex;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

cssnext ermöglicht die Nutzung zukünftiger CSS-Features (CSS Variables, Nesting) schon heute — das Äquivalent von Babel für CSS.

Plugin-Ökosystem¶

Das PostCSS-Ökosystem bietet Hunderte von Plugins:

• postcss-import — inlinet @import für Bundling
• postcss-modules — CSS Modules für lokales Scoping
• cssnano — Minifizierung und Optimierung
• stylelint — CSS-Linting
• postcss-custom-properties — CSS Variables Fallback

Durch die Kombination von Plugins erstellen Sie genau die Pipeline, die Ihr Projekt braucht.

Integration und Migration von Sass¶

PostCSS integriert sich mit Webpack (postcss-loader), Gulp, Grunt und als eigenständiges CLI. Die Migration von Sass ist schrittweise — PostCSS und Sass können im selben Build koexistieren.

Empfohlene Vorgehensweise:

• Beginnen Sie mit Autoprefixer (wahrscheinlich nutzen Sie ihn schon)
• Fügen Sie cssnext für moderne CSS-Features hinzu
• Ersetzen Sie schrittweise Sass-Features durch PostCSS-Plugins
• Erwägen Sie CSS Modules für einen komponentenbasierten Ansatz

Fazit: die modulare Zukunft von CSS¶

PostCSS steht für einen Wandel von monolithischen Tools zu einem modularen, Plugin-basierten Ökosystem. Sie müssen Sass nicht aufgeben — aber Autoprefixer sollte in jedem Projekt sein, und cssnext zeigt die Richtung, in die sich CSS-Tooling bewegt.