CSS Academy · Lektion

Eigene PostCSS-Plugins

Schreiben Sie ein eigenes PostCSS-Plugin, das CSS-Knoten programmgesteuert transformiert.

Eigene PostCSS-Plugins ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum ein eigenes Plugin schreiben?

Wenn kein vorhandenes PostCSS-Plugin Ihren Bedarf abdeckt – etwa eine projektspezifische CSS-Transformation, eine Migrationshilfe oder eine benutzerdefinierte Lint-Regel –, bietet Ihnen ein eigenes Plugin direkten Zugriff auf den CSS-AST.

Plugin-Struktur

Ein PostCSS-Plugin ist eine Funktion, die einen Root-Knoten (das geparste CSS) und optional ein Result-Objekt erhält. Verwenden Sie die Factory postcss.plugin() oder den modernen Ansatz mit einer direkten Funktion:

// my-plugin.js
const plugin = () => {
  return {
    postcssPlugin: 'my-plugin',
    Declaration(decl) {
      // Called for every declaration node
    },
    Rule(rule) {
      // Called for every rule node
    }
  };
};
plugin.postcss = true;
module.exports = plugin;

Deklarationen durchlaufen

Transformieren Sie jede color-Deklaration:

const plugin = () => ({
  postcssPlugin: 'rem-converter',
  Declaration(decl) {
    if (decl.prop === 'font-size' && decl.value.endsWith('px')) {
      const px = parseFloat(decl.value);
      decl.value = `${px / 16}rem`;
    }
  }
});

Neue Regeln hinzufügen

Fügen Sie nach jeder .btn-Regel eine neue Regel ein:

Rule(rule) {
  if (rule.selector.includes('.btn')) {
    const focusRule = rule.cloneAfter();
    focusRule.selector = rule.selector + ':focus';
  }
}

Deklarationen entfernen

Entfernen Sie alle color: red-Deklarationen (Debugging-/Bereinigungs-Plugin):

Declaration(decl) {
  if (decl.prop === 'color' && decl.value === 'red') {
    decl.remove();
  }
}

PostCSS-Hilfsmethoden

PostCSS stellt Methoden zur Bearbeitung von Knoten bereit:

node.remove(): entfernt den Knoten
node.replaceWith(newNode): ersetzt einen Knoten
node.cloneBefore()/cloneAfter(): fügt einen Klon ein
postcss.decl()/rule()/atRule(): erstellt neue Knoten

Asynchrone Plugins

PostCSS-Plugins können asynchron sein – das ist nützlich, wenn Sie Dateien lesen oder Netzwerkanfragen stellen müssen:

async Declaration(decl, helpers) {
  if (decl.prop === 'icon') {
    const svg = await readFile(`icons/${decl.value}.svg`);
    decl.replaceWith(helpers.decl({ prop: 'background', value: `url(${svg})` }));
  }
}

PostCSS-Plugins testen

Testen Sie Plugins direkt mit dem Paket postcss:

const postcss = require('postcss');
const plugin = require('./my-plugin');

test('converts px to rem', () => {
  const input = 'p { font-size: 16px; }';
  const result = postcss([plugin()]).process(input, { from: undefined });
  expect(result.css).toBe('p { font-size: 1rem; }');
});

Plugin-Optionen

Akzeptieren Sie Konfigurationsoptionen, indem Sie in der Plugin-Factory ein Argument entgegennehmen:

const plugin = (opts = {}) => ({
  postcssPlugin: 'configurable',
  Declaration(decl) {
    if (decl.prop === opts.property) {
      decl.value = opts.replacement;
    }
  }
});

PostCSS-Plugins veröffentlichen

PostCSS-Plugins folgen einer Namenskonvention: postcss-plugin-name. Sie werden auf npm veröffentlicht und zum PostCSS-Repository hinzugefügt. Für interne Werkzeuge sollten Sie sie als lokale Dateien in Ihrem Projekt aufbewahren.

Kurzer Test

Welcher PostCSS-Visitor wird für jedes CSS-Eigenschaft-Wert-Paar im Stylesheet aufgerufen?

Zusammenfassung

Benutzerdefinierte PostCSS-Plugins verwenden Visitor-Methoden, um CSS-AST-Knoten zu verarbeiten. Declaration(decl) verarbeitet Eigenschaft-Wert-Paare, Rule(rule) Selektorblöcke und AtRule() @-Regeln. Verwenden Sie Knotenmethoden wie remove(), replaceWith() und cloneAfter(), um den CSS-Baum zu ändern. Testen Sie Plugins direkt mit dem Paket postcss.

Häufig gestellte Fragen

Ist die Lektion „Eigene PostCSS-Plugins“ kostenlos?

Ja — der vollständige Text von „Eigene PostCSS-Plugins“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Eigene PostCSS-Plugins“?

Schreiben Sie ein eigenes PostCSS-Plugin, das CSS-Knoten programmgesteuert transformiert. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Eigene PostCSS-Plugins“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Was PostCSS macht und wie es funktioniert
Autoprefixer und cssnano
Eigene PostCSS-Plugins
PostCSS in Vite und Webpack

← Zurück zu CSS Academy