CSS Academy · Lezione

Plugin PostCSS personalizzati

Scriva il Suo plugin PostCSS per trasformare programmaticamente i nodi CSS.

Plugin PostCSS personalizzati è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.

Perché scrivere un plugin personalizzato?

Quando nessun plugin PostCSS esistente soddisfa una necessità, come una trasformazione CSS specifica del progetto, uno strumento di supporto alla migrazione o una regola di lint personalizzata, scrivere un plugin personalizzato consente di accedere direttamente all'AST CSS.

Struttura di un plugin

Un plugin PostCSS è una funzione che riceve un nodo Root (il CSS analizzato) e, facoltativamente, un oggetto Result. Usi la factory postcss.plugin() o il moderno approccio basato direttamente su una funzione:

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

Scorrere le dichiarazioni

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

Aggiungere nuove regole

Inserisca una nuova regola dopo ogni regola .btn:

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

Rimuovere le dichiarazioni

Rimuova tutte le dichiarazioni color: red (plugin di debug/pulizia):

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

Helper di PostCSS

PostCSS fornisce metodi di supporto sui nodi:

node.remove(): rimuove il nodo
node.replaceWith(newNode): sostituisce un nodo
node.cloneBefore()/cloneAfter(): inserisce un clone
postcss.decl()/rule()/atRule(): crea nuovi nodi

Plugin asincroni

I plugin PostCSS possono essere asincroni, una caratteristica utile quando è necessario leggere file o effettuare richieste di rete:

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 dei plugin PostCSS

Testi i plugin usando direttamente il pacchetto 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; }');
});

Opzioni dei plugin

Accetti le opzioni di configurazione passando un argomento alla factory del plugin:

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

Pubblicare plugin PostCSS

I plugin PostCSS seguono una convenzione di denominazione: postcss-plugin-name. Vengono pubblicati su npm e aggiunti al repository di PostCSS. Per gli strumenti interni, li mantenga come file locali nel progetto.

Verifica rapida

Quale visitor di PostCSS viene chiamato per ogni coppia proprietà: valore nel foglio di stile?

Riepilogo

I plugin PostCSS personalizzati usano metodi visitor per elaborare i nodi dell'AST CSS. Declaration(decl) per le coppie proprietà:valore, Rule(rule) per i blocchi dei selettori, AtRule() per le regole @-. Usi metodi dei nodi come remove(), replaceWith() e cloneAfter() per modificare l'albero CSS. Testi i plugin direttamente con il pacchetto postcss.

Domande Frequenti

La lezione «Plugin PostCSS personalizzati» è gratuita?

Sì — il testo completo di «Plugin PostCSS personalizzati» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.

Cosa imparerò in «Plugin PostCSS personalizzati»?

Scriva il Suo plugin PostCSS per trasformare programmaticamente i nodi CSS. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare CSS Academy?

Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Plugin PostCSS personalizzati»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione CSS Academy?

Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a CSS Academy