Angular

Le builder application d'Angular, utilisé par défaut pour les nouveaux projets, applique PostCSS à vos styles globaux et aux styles de vos composants. Depuis Angular CLI 17.2, il charge un fichier de configuration PostCSS personnalisé : vous pouvez donc ajouter PurgeCSS avec son plugin PostCSS. Vous n'avez besoin ni d'un builder personnalisé ni d'une configuration webpack.

Installation

npm i -D @fullhuman/postcss-purgecss

yarn add @fullhuman/postcss-purgecss --dev

Configuration

Créez postcss.config.json à la racine de votre workspace (à côté de angular.json) ou de votre projet :

{
  "plugins": {
    "@fullhuman/postcss-purgecss": {
      "content": ["./src/**/*.html", "./src/**/*.ts"],
      "safelist": [":host"]
    }
  }
}

Les entrées de content incluent les templates de vos composants : les fichiers .html et les templates intégrés aux fichiers .ts. Quand vous lancez ng build, les sélecteurs inutilisés sont supprimés de vos styles globaux et des styles de vos composants.

Les règles sur :host et :host(...) ne correspondent à aucun élément de vos templates. Jusqu'à la version 8.0.0, PurgeCSS les supprime si :host n'est pas dans la safelist. Les versions suivantes les conservent sans cela.

À savoir :

• Angular lit uniquement postcss.config.json ou .postcssrc.json. Un fichier postcss.config.js est ignoré.
• Si votre projet a déjà l'un de ces fichiers, par exemple pour Tailwind CSS, ajoutez-y PurgeCSS au lieu d'en créer un second : Angular lit uniquement le premier fichier qu'il trouve.
• La configuration s'applique à tous les builds, ng serve compris.
• PurgeCSS s'exécute une fois par feuille de style (vos styles globaux et les styles de chaque composant), et chaque exécution lit tous les fichiers de content. Sur un projet de grande taille, gardez des globs content aussi précis que possible.

Safelist avec des expressions régulières

PurgeCSS interprète une chaîne de caractères écrite entre barres obliques comme une expression régulière. Vous pouvez donc mettre dans la safelist, depuis postcss.config.json, des noms de classes construits à l'exécution ou ajoutés par une bibliothèque de composants :

{
  "plugins": {
    "@fullhuman/postcss-purgecss": {
      "content": ["./src/**/*.html", "./src/**/*.ts"],
      "safelist": [":host", "/^btn-/"]
    }
  }
}

Les drapeaux se placent après la dernière barre oblique, comme dans "/^btn-/i". Toute autre chaîne de caractères correspond toujours exactement à un sélecteur. Voir Motifs.

Jusqu'à la version 8.0.0

La version 8.0.0 et les précédentes comparent chaque chaîne de caractères telle quelle : "/^btn-/" ne met rien dans la safelist. Avec ces versions, écrivez la safelist dans un fichier purgecss.config.js, dans le dossier où vous lancez ng build, et retirez safelist de postcss.config.json :

// purgecss.config.js
exports.safelist = [":host", /^btn-/];

Si votre package.json contient "type": "module", écrivez plutôt export const safelist = [":host", /^btn-/];.