CSS Academy · Leçon

Modules d’extension PostCSS personnalisés

Écrivez votre propre module d’extension PostCSS pour transformer des nœuds CSS par programmation.

Leçon 3 sur 412 étapes

Modules d’extension PostCSS personnalisés est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.

Pourquoi écrire un module d’extension personnalisé ?

Lorsqu’aucun module d’extension PostCSS existant ne répond à votre besoin — une transformation CSS propre au projet, un utilitaire de migration ou une règle d’analyse personnalisée — l’écriture d’un module d’extension personnalisé vous donne un accès direct à l’AST CSS.

Structure d’un module d’extension

Un module d’extension PostCSS est une fonction qui reçoit un nœud Root (le CSS analysé) et, éventuellement, un objet Result. Utilisez la fabrique postcss.plugin() ou l’approche moderne basée directement sur une fonction :

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

Parcourir les déclarations

Transformez chaque déclaration 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`;
    }
  }
});

Ajouter de nouvelles règles

Insérez une nouvelle règle après chaque règle .btn :

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

Supprimer des déclarations

Supprimez toutes les déclarations color: red (module d’extension de débogage/nettoyage) :

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

Assistants PostCSS

PostCSS fournit des méthodes d’assistance sur les nœuds :

node.remove() : supprime le nœud
node.replaceWith(newNode) : remplace un nœud
node.cloneBefore()/cloneAfter() : insère un clone
postcss.decl()/rule()/atRule() : crée de nouveaux nœuds

Modules d’extension asynchrones

Les modules d’extension PostCSS peuvent être asynchrones, ce qui est utile lorsque vous devez lire des fichiers ou effectuer des requêtes réseau :

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

Tester les modules d’extension PostCSS

Testez les modules d’extension en utilisant directement le paquet 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; }');
});

Options des modules d’extension

Acceptez les options de configuration en transmettant un argument à la fabrique du module d’extension :

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

Publier des modules d’extension PostCSS

Les modules d’extension PostCSS suivent une convention de nommage : postcss-plugin-name. Ils sont publiés sur npm et ajoutés au dépôt PostCSS. Pour les outils internes, conservez-les dans des fichiers locaux de votre projet.

Vérification rapide

Quel visiteur PostCSS est appelé pour chaque paire propriété-valeur CSS de la feuille de style ?

Réponds-y dans la leçon interactive

Récapitulatif

Les modules d’extension PostCSS personnalisés utilisent des méthodes visiteuses pour traiter les nœuds de l’AST CSS. Declaration(decl) traite les paires propriété-valeur, Rule(rule) les blocs de sélecteurs et AtRule() les règles @. Utilisez des méthodes de nœud comme remove(), replaceWith() et cloneAfter() pour modifier l’arbre CSS. Testez directement les modules d’extension avec le paquet postcss.

Gratuit pour commencer

Apprends CSS avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 40
Leçons: 159

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Modules d’extension PostCSS personnalisés » est-elle gratuite ?

Oui — le texte complet de « Modules d’extension PostCSS personnalisés » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Modules d’extension PostCSS personnalisés » ?

Écrivez votre propre module d’extension PostCSS pour transformer des nœuds CSS par programmation. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer CSS Academy ?

Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Modules d’extension PostCSS personnalisés » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?

Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Rôle et fonctionnement de PostCSS
Autoprefixer et cssnano
Modules d’extension PostCSS personnalisés
PostCSS dans Vite et Webpack

← Retour à CSS Academy