Whitelisting
You can whitelist selectors to stop PurgeCSS from removing them from your CSS. This can be accomplished with the PurgeCSS options
whitelist and whitelistPatterns, or directly in your CSS with a special comment.Specific selectors
You can whitelist selectors with
whitelist.1
const purgecss = new Purgecss({
2
content: [], // content
3
css: [], // css
4
whitelist: ['random', 'yep', 'button']
5
})
Copied!
In the example, the selectors
.random, #yep, button will be left in the final CSS.Patterns
You can whitelist selectors based on a regular expression with
whitelistPatterns and whitelistPatternsChildren.1
const purgecss = new Purgecss({
2
content: [], // content
3
css: [], // css
4
whitelistPatterns: [/red$/],
5
whitelistPatternsChildren: [/blue$/]
6
})
Copied!
In the example, selectors ending with
red such as .bg-red, and children of selectors ending with blue such as blue p or .bg-blue .child-of-bg, will be left in the final CSS.Patterns are regular expressions. You can use regexr to verify the regular expressions correspond to what you are looking for.
In the CSS directly
You can whitelist directly in your CSS with a special comment. Use
/* purgecss ignore */ to whitelist the next rule.1
/* purgecss ignore */
2
h1 {
3
color: blue;
4
}
Copied!
Use
/* purgecss ignore current */ to whitelist the current rule.1
h1 {
2
/* purgecss ignore current */
3
color: blue;
4
}
Copied!
You can use
/* purgecss start ignore */ and /* purgecss end ignore */ to whitelist a range of rules.1
/* purgecss start ignore */
2
h1 {
3
color: blue;
4
}
5
6
h3 {
7
color: green;
8
}
9
/* purgecss end ignore */
10
11
h4 {
12
color: purple;
13
}
14
15
/* purgecss start ignore */
16
h5 {
17
color: pink;
18
}
19
20
h6 {
21
color: lightcoral;
22
}
23
24
/* purgecss end ignore */
Copied!
Last modified 2yr ago
Copy link