CSS Academy · Lekcja

Niestandardowe wtyczki PostCSS

Napisz własną wtyczkę PostCSS, aby programowo przekształcać węzły CSS.

Niestandardowe wtyczki PostCSS to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.

Po co pisać własną wtyczkę?

Gdy żadna istniejąca wtyczka PostCSS nie rozwiązuje danego problemu — takiego jak specyficzna dla projektu transformacja CSS, pomoc w migracji lub własna reguła lintowania — napisanie własnej wtyczki zapewnia bezpośredni dostęp do AST CSS.

Struktura wtyczki

Wtyczka PostCSS to funkcja, która otrzymuje węzeł Root (przeanalizowany CSS) oraz opcjonalnie obiekt Result. Należy użyć fabryki postcss.plugin() lub nowoczesnego podejścia opartego na bezpośredniej funkcji:

// 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;

Przechodzenie po deklaracjach

Transformowanie każdej deklaracji color:

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`;
    }
  }
});

Dodawanie nowych reguł

Wstrzykiwanie nowej reguły po każdej regule .btn:

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

Usuwanie deklaracji

Usuwanie wszystkich deklaracji color: red (wtyczka do debugowania i czyszczenia):

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

Metody pomocnicze PostCSS

PostCSS udostępnia metody pomocnicze w węzłach:

node.remove(): usuwa węzeł
node.replaceWith(newNode): zastępuje węzeł
node.cloneBefore()/cloneAfter(): wstawia klon
postcss.decl()/rule()/atRule(): tworzy nowe węzły

Wtyczki asynchroniczne

Wtyczki PostCSS mogą działać asynchronicznie — jest to przydatne, gdy trzeba odczytywać pliki lub wykonywać żądania sieciowe:

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})` }));
  }
}

Testowanie wtyczek PostCSS

Wtyczki należy testować bezpośrednio za pomocą pakietu 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; }');
});

Opcje wtyczki

Opcje konfiguracji należy przyjmować, przekazując argument do fabryki wtyczki:

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

Publikowanie wtyczek PostCSS

Wtyczki PostCSS stosują konwencję nazewnictwa: postcss-plugin-name. Publikuje się je w npm i dodaje do repozytorium PostCSS. W przypadku narzędzi wewnętrznych należy przechowywać je jako pliki lokalne w projekcie.

Szybkie sprawdzenie

Jaki mechanizm odwiedzania PostCSS jest wywoływany dla każdej pary właściwość: wartość w arkuszu stylów?

Podsumowanie

Własne wtyczki PostCSS używają metod odwiedzających do przetwarzania węzłów AST CSS. Declaration(decl) obsługuje pary właściwość:wartość, Rule(rule) bloki selektorów, a AtRule() reguły @. Do modyfikowania drzewa CSS należy używać metod węzłów, takich jak remove(), replaceWith() i cloneAfter(). Wtyczki należy testować bezpośrednio za pomocą pakietu postcss.

Często zadawane pytania

Czy lekcja „Niestandardowe wtyczki PostCSS” jest bezpłatna?

Tak — pełny tekst „Niestandardowe wtyczki PostCSS” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Niestandardowe wtyczki PostCSS”?

Napisz własną wtyczkę PostCSS, aby programowo przekształcać węzły CSS. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć CSS Academy?

Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Niestandardowe wtyczki PostCSS”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?

Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do CSS Academy