PurgeCSS is een geweldig hulpmiddel dat ongebruikte CSS van je site verwijdert. In deze sectie gaan we dieper in op hoe PurgeCSS werkt en waar je op moet letten.

Hoe werkt het?

PurgeCSS vereist dat de volgende configuratie is ingesteld.

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}

Dit instrueert Hugo om gebruikte tags, klassen en id’s te berekenen en vervolgens hugo_stats.json te genereren.

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

Ten slotte gebruikt PurgeCSS dit bestand om ongebruikte CSS te verwijderen.

PurgeCSS werkt alleen in de production-omgeving.

We raden NIET aan om postcss.config.js en assets/main/config/rtl/postcss.config.js te overschrijven, omdat dit onverwachte problemen kan veroorzaken bij versie-updates.

Beperkingen

De hugo_stats.json werkt alleen in *.html-sjablonen, dat wil zeggen dat CSS-klassen, tags en id’s die in JavaScript-bestanden worden gebruikt, alsnog worden verwijderd.

Maar maak je geen zorgen, er zijn twee manieren om dit probleem op te lossen.

Extra statistieken

Maak een bestand genaamd extra_stats.json aan met dezelfde structuur als hugo_stats.json in de hoofdmap van je site, en voeg de extra CSS handmatig toe.

extra_stats.json MOET worden gecommit naar je repo.

HTML-blok in *.html-bestanden plaatsen

Een veelvoorkomend scenario is het renderen van HTML-blokken via JavaScript. Als je JavaScript gebruikt om DOM-elementen te genereren, worden gebruikte CSS-klassen genegeerd door hugo_stats.json. Je kunt ze handmatig toevoegen aan extra_stats.json, maar er is een betere manier via de sjabloonengine.

  1. Definieer eerst een sjabloonblok in *.html-partials.
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 berekent gebruikte CSS in 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",

Zoals je kunt zien, wordt de CSS (custom-widget-bar) die binnen een <script>-tag wordt gebruikt, niet opgenomen in hugo_stats.json. Gebruik daarom andere HTML-tags met de klasse d-none om je sjabloon te omhullen.

d-none is een Bootstrap CSS-hulpklasse, gelijk aan display: none.

  1. Render vervolgens het sjabloon via een sjabloonengine naar keuze.
1const tmpl = document.getElementById('template-custom-widget-bar').innerHTML;
2render(tmpl, data);

Testen

Voor lokaal testen moet je de production-omgeving opgeven via hugo server -e production -b http://localhost:1313, omdat PurgeCSS alleen werkt in de production-omgeving.

Soms werken PurgeCSS en PostProcess niet goed samen; het kan nodig zijn om Hugo Server af en toe opnieuw te starten.