PurgeCSS
Donate
Become a backer or sponsor to support our work.
On this page
Sponsors
Sometimes you may be surprised that some styles are missing from the production environment, most likely because they have been removed by PurgeCSS. This article describes how to prevent styles from being deleted by PurgeCSS.
There are multiple ways to add styles to PurgeCSS’s safelisting, so that the styles won’t be get removed by PurgeCSS.
Safelist with Comments
This approach uses special comment to tell PurgeCSS do not to remove the styles.
1/*! purgecss start ignore */
2
3// STYLES GOES HERE.
4
5/*! purgecss end ignore */
Safelist with Configuration
HB allows configuring PurgeCSS, this approach is useful to add some classes, ids and tags which used by JavaScript, since Hugo unable to detect used styles in JS way.
assets/hb/modules/[name]/purgecss.config.toml
1classes = []
2ids = []
3tags = []
4attributes = []
5safelist_deep = []
6safelist_greedy = []
7safelist_standard = []
Please replace
[name] with your module name. For theme’s users, use custom instead.| Name | Type | Description |
|---|---|---|
classes | array | HTML class name, such as w-100, bg-success. |
ids | array | HTML id. |
tags | array | HTML tags, such as h1, a. |
attributes | array | HTML attributes, e.g. data-bs-theme. |
safelist_deep | array | PurgeCSS safelisting patterns1. |
safelist_greedy | array | PurgeCSS safelisting patterns1. |
safelist_standard | array | PurgeCSS safelisting patterns1. |
Testing
We’re able to test it locally with -e, --renderToDisk and --disableFastRender flags.
1hugo server \
2 -e production \
3 --gc \
4 --renderToDisk \
5 --disableFastRender \
6 -b http://localhost:1314 \
7 -p 1314
