PurgeCSS est un outil génial qui supprime les CSS inutilisés de votre site. Dans cette section, nous verrons comment fonctionne PurgeCSS et à quoi devons-nous prêter attention.

Comment ça marche ?

Le PurgeCSS nécessite que la configuration suivante soit définie.

config.toml

1[build]
2  writeStats = true
3[taxonomies]
4  author = 'authors'
5  category = 'categories'
6  series = 'series'
7  tag = 'tags'

config.yaml

1build:
2  writeStats: true
3taxonomies:
4  author: authors
5  category: categories
6  series: series
7  tag: tags

config.json

 1{
 2   "build": {
 3      "writeStats": true
 4   },
 5   "taxonomies": {
 6      "author": "authors",
 7      "category": "categories",
 8      "series": "series",
 9      "tag": "tags"
10   }
11}

Il indique à Hugo de calculer les balises, classes et identifiants utilisés, puis génère le hugo_stats.json.

1{
2  "htmlElements": {
3    "tags": [],
4    "classes": [],
5    "ids": []
6}

Enfin PurgeCSS s’appuie sur ce fichier pour purger les CSS inutilisés.

Le PurgeCSS fonctionne uniquement sous l’environnement production.

Nous NE PAS recommander de remplacer postcss.config.js et assets/main/config/rtl/postcss.config.js, sinon des problèmes inattendus se produiront lors des mises à jour de version.

Limites

Le hugo_stats.json ne fonctionne que dans les modèles *.html, c’est-à-dire que toutes les classes CSS, balises et identifiants utilisés sur les fichiers JavaScript seront toujours purgés.

Mais ne vous inquiétez pas, il existe deux manières de résoudre ce problème.

Statistiques supplémentaires

Créez simplement un fichier appelé extra_stats.json avec la même forme de hugo_stats.json à la racine de votre site et insérez-y manuellement le CSS supplémentaire.

extra_stats.json DOIT être engagé dans votre dépôt.

Mettez le bloc HTML dans les fichiers *.html

Un scénario courant consiste à rendre des blocs HTML à l’aide de JavaScript. Si vous utilisez JavaScript pour générer un élément DOM, tout CSS utilisé sera ignoré par hugo_stats.json. Bien sûr, vous pouvez l’ajouter manuellement à extra_stats.json, mais il existe une meilleure façon de le faire via le moteur de modèles.

  1. Tout d’abord, nous devrons définir un bloc modèle dans les partiels *.html.
1<div class="d-none" id="template-custom-widget-foo">
2  <div class="custom-widget-foo"></div>
3</div>
4
5<script type="text/html" id="template-custom-widget-bar">
6  <div class="custom-widget-bar">
7    NOTE THAT: ANY CSS INSIDE THE SCRIPT TAG WONT BE INCLUDED INTO THE STATS FILE.
8  </div>
9</script>

Hugo calculera le CSS utilisé dans hugo_stats.json.

1$ cat hugo_stats.json | grep custom-widget-
2  "custom-widget-foo",
3  "template-custom-widget-foo",
4  "template-custom-widget-bar",

Comme vous pouvez le voir, le CSS (custom-widget-bar) utilisé dans la balise <script> ne sera pas inclus dans hugo_stats.json, nous devrions donc utiliser d’autres balises HTML avec la classe d-none pour envelopper votre modèle.

d-none est un utilitaire CSS Bootstrap, égal à display: none.

  1. Et puis restituez le modèle via n’importe quel moteur de modèle.
1const tmpl = document.getElementById('template-custom-widget-bar').innerHTML;
2render(tmpl, data);

Tests

Vous devrez spécifier l’environnement production pour les tests locaux via hugo server -e production -b http://localhost:1313, car PurgeCSS ne fonctionne que sur l’environnement production.

Parfois, PurgeCSS et PostProcess ne fonctionnent pas très bien, vous devrez donc peut-être redémarrer Hugo Server de temps en temps.