CSS Academy · Lektion

Brugerdefinerede PostCSS-plugins

Skriv Deres eget PostCSS-plugin til programmatisk at transformere CSS-noder.

Lektion 3 af 412 trin

Brugerdefinerede PostCSS-plugins er en gratis CSS Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i CSS Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. CSS Academy-kurset indeholder 4 lektioner i alt.

Hvorfor skrive et brugerdefineret plugin?

Når intet eksisterende PostCSS-plugin løser dit behov – f.eks. en projektspecifik CSS-transformation, en hjælp til migrering eller en brugerdefineret lintregel – giver et brugerdefineret plugin dig direkte adgang til CSS-AST'et.

Pluginstruktur

Et PostCSS-plugin er en funktion, der modtager et Root-element (den fortolkede CSS) og eventuelt et Result-objekt. Brug fabrikken postcss.plugin() eller den moderne direkte funktionsform:

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

Gennemgang af deklarationer

Transformér hver 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`;
    }
  }
});

Tilføjelse af nye regler

Indsæt en ny regel efter hver .btn-regel:

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

Fjernelse af deklarationer

Fjern alle color: red-deklarationer (plugin til fejlfinding og oprydning):

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

Hjælpefunktioner i PostCSS

PostCSS stiller hjælpemetoder til rådighed på elementer:

node.remove(): fjerner elementet
node.replaceWith(newNode): erstatter et element
node.cloneBefore()/cloneAfter(): indsætter en klon
postcss.decl()/rule()/atRule(): opretter nye elementer

Asynkrone plugins

PostCSS-plugins kan være asynkrone – det er nyttigt, når du skal læse filer eller sende netværksanmodninger:

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

Test af PostCSS-plugins

Test plugins ved at bruge pakken postcss 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; }');
});

Pluginindstillinger

Modtag konfigurationsindstillinger ved at tage et argument i pluginfabrikken:

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

Udgivelse af PostCSS-plugins

PostCSS-plugins følger en navngivningskonvention: postcss-plugin-name. De udgives på npm og føjes til PostCSS-lageret. Til interne værktøjer kan du beholde dem som lokale filer i projektet.

Hurtigt tjek

Hvilken PostCSS-visitor kaldes for hvert egenskab:værdi-par i stilarket?

Besvar den i den interaktive lektion

Opsummering

Brugerdefinerede PostCSS-plugins bruger visitormetoder til at behandle CSS-AST-elementer. Declaration(decl) bruges til egenskab:værdi-par, Rule(rule) til vælgerblokke og AtRule() til @-regler. Brug elementmetoder som remove(), replaceWith() og cloneAfter() til at ændre CSS-træet. Test plugins direkte med pakken postcss.

Gratis at komme i gang

Lær CSS med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 40
Lektioner: 159

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Brugerdefinerede PostCSS-plugins” gratis?

Ja — hele teksten til “Brugerdefinerede PostCSS-plugins” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af CSS Academy-kurset, skal du opgradere til CoddyKit PRO. CSS Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Brugerdefinerede PostCSS-plugins”?

Skriv Deres eget PostCSS-plugin til programmatisk at transformere CSS-noder. Du øver dig i CSS Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på CSS Academy?

Der kræves ingen tidligere erfaring. CSS Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Brugerdefinerede PostCSS-plugins”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne CSS Academy-lektion?

Ja. Alle CSS Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Hvad PostCSS gør, og hvordan det fungerer
Autoprefixer og cssnano
Brugerdefinerede PostCSS-plugins
PostCSS i Vite og Webpack

← Tilbage til CSS Academy