Optimize generated CSS by removing unused selectors (#2008)

Hugo generates stats about the HTML elements, IDs and classes that can be found in the website,
and we post-process the rendered CSS with postcss-purgecss that uses those stats to remove unused selectors.

Signed-off-by: Kévin Commaille <zecakeh@tedomum.fr>
This commit is contained in:
Kévin Commaille 2024-12-10 23:55:14 +01:00 committed by GitHub
parent 54d872e19b
commit 1accb9e93f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 1240 additions and 279 deletions

15
postcss.config.js Normal file
View file

@ -0,0 +1,15 @@
// Remove unused CSS selectors.
const purgecss = require('@fullhuman/postcss-purgecss')({
// Use stats generated by Hugo.
content: [ './hugo_stats.json' ],
defaultExtractor: (content) => {
let els = JSON.parse(content).htmlElements;
return els.tags.concat(els.classes, els.ids);
}
});
module.exports = {
plugins: [
...(process.env.HUGO_ENVIRONMENT === 'production' ? [ purgecss ] : [])
]
};