CSS Academy · Lektion

Anpassade PostCSS-pluginer

Skriv ett eget PostCSS-plugin som transformerar CSS-noder programmatiskt.

Lektion 3 av 412 steg

Anpassade PostCSS-pluginer är en gratis lektion i CSS Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i CSS Academy innehåller totalt 4 lektioner.

Varför skriva ett eget plugin?

När inget befintligt PostCSS-plugin löser ert behov – till exempel en projektspecifik CSS-transformation, ett migreringshjälpmedel eller en anpassad lintregel – ger ett eget plugin er direkt åtkomst till CSS-AST:n.

Pluginstruktur

Ett PostCSS-plugin är en funktion som tar emot en Root-nod (den tolkade CSS:en) och eventuellt ett Result-objekt. Använd fabriken postcss.plugin() eller det moderna tillvägagångssättet med en direkt 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;

Gå igenom deklarationer

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

Lägga till nya regler

Infoga en ny regel efter varje .btn-regel:

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

Ta bort deklarationer

Ta bort alla deklarationer med color: red (ett plugin för felsökning och rensning):

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

Hjälpfunktioner i PostCSS

PostCSS tillhandahåller hjälpfunktioner på noder:

node.remove(): tar bort noden
node.replaceWith(newNode): ersätter en nod
node.cloneBefore()/cloneAfter(): infogar en klon
postcss.decl()/rule()/atRule(): skapar nya noder

Asynkrona plugins

PostCSS-plugins kan vara asynkrona – det är användbart när ni behöver läsa filer eller göra nätverksanrop:

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

Testa PostCSS-plugins

Testa plugins genom att använda paketet postcss direkt:

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

Pluginalternativ

Acceptera konfigurationsalternativ genom att ta emot ett argument i pluginfabriken:

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

Publicera PostCSS-plugins

PostCSS-plugins följer en namnkonvention: postcss-plugin-name. De publiceras till npm och läggs till i PostCSS-arkivet. För interna verktyg kan ni behålla dem som lokala filer i projektet.

Snabbkontroll

Vilken PostCSS-visitor anropas för varje egenskaps- och värdepar i stilmallen?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Anpassade PostCSS-plugins använder visitor-metoder för att bearbeta noder i CSS-AST:n. Declaration(decl) används för egenskaps- och värdepar, Rule(rule) för selektorblock och AtRule() för @-regler. Använd nodmetoder som remove(), replaceWith() och cloneAfter() för att ändra CSS-trädet. Testa plugins direkt med paketet postcss.

Gratis att börja

Lär dig CSS med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 40
Lektioner: 159

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Anpassade PostCSS-pluginer” gratis?

Ja – hela texten till ”Anpassade PostCSS-pluginer” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i CSS Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Anpassade PostCSS-pluginer”?

Skriv ett eget PostCSS-plugin som transformerar CSS-noder programmatiskt. Ni övar på CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig CSS Academy?

Du behöver inga förkunskaper. Utbildningen i CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Anpassade PostCSS-pluginer”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här CSS Academy-lektionen?

Ja. Varje CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till CSS Academy