CSS Academy · leksjon

Egendefinerte PostCSS-pluginer

Skriv Deres egen PostCSS-plugin for å transformere CSS-noder programmatisk.

Leksjon 3 av 412 trinn

Egendefinerte PostCSS-pluginer er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i CSS Academy inneholder totalt 4 leksjoner.

Hvorfor skrive en egendefinert plugin?

Når ingen eksisterende PostCSS-plugin dekker behovet ditt – for eksempel en prosjekttilpasset CSS-transformasjon, et migreringsverktøy eller en egendefinert lint-regel – gir en egendefinert plugin deg direkte tilgang til CSS-AST-et.

Plugin-struktur

En PostCSS-plugin er en funksjon som mottar en Root-node (den parsede CSS-en) og eventuelt et Result-objekt. Bruk fabrikken postcss.plugin() eller den moderne direkte funksjonstilnærmingen:

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

Gå gjennom deklarasjoner

Transformer hver color-deklarasjon:

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

Legge til nye regler

Sett inn en ny regel etter hver .btn-regel:

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

Fjerne deklarasjoner

Fjern alle color: red-deklarasjoner (plugin for feilsøking/opprydding):

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

PostCSS-hjelpere

PostCSS tilbyr hjelpemetoder på noder:

node.remove(): fjerner noden
node.replaceWith(newNode): erstatter en node
node.cloneBefore()/cloneAfter(): setter inn en klone
postcss.decl()/rule()/atRule(): oppretter nye noder

Asynkrone plugins

PostCSS-plugins kan være asynkrone – dette er nyttig når du må lese filer eller sende nettverksforespørsler:

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

Teste PostCSS-plugins

Test plugins ved å bruke postcss-pakken direkte:

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-alternativer

Ta imot konfigurasjonsalternativer ved å bruke et argument i plugin-fabrikken:

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

Publisere PostCSS-plugins

PostCSS-plugins følger en navnekonvensjon: postcss-plugin-name. De publiseres til npm og legges til i PostCSS-repositoriet. For interne verktøy kan du beholde dem som lokale filer i prosjektet.

Kort sjekk

Hvilken PostCSS-besøkende kalles for hvert CSS-egenskap/verdi-par i stilarket?

Besvar den i den interaktive leksjonen

Oppsummering

Egendefinerte PostCSS-plugins bruker besøkende metoder til å behandle noder i CSS-AST-et. Declaration(decl) for egenskap/verdi-par, Rule(rule) for selektorblokker og AtRule() for @-regler. Bruk nodemetoder som remove(), replaceWith() og cloneAfter() til å endre CSS-treet. Test plugins med postcss-pakken direkte.

Gratis å komme i gang

Lær deg CSS med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 40
Leksjoner: 159

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Egendefinerte PostCSS-pluginer» gratis?

Ja – hele teksten i «Egendefinerte PostCSS-pluginer» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i CSS Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Egendefinerte PostCSS-pluginer»?

Skriv Deres egen PostCSS-plugin for å transformere CSS-noder programmatisk. Du øver på CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med CSS Academy?

Ingen tidligere erfaring er nødvendig. CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Egendefinerte PostCSS-pluginer»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne CSS Academy-leksjonen?

Ja. Alle CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Hva PostCSS gjør, og hvordan det fungerer
Autoprefixer og cssnano
Egendefinerte PostCSS-pluginer
PostCSS i Vite og Webpack

← Tilbake til CSS Academy