Configuration
PurgeCSS has a list of options that allow you to customize its behavior. Customization can improve the performance and efficiency of PurgeCSS. You can create a configuration file with the following options.
Configuration file
The configuration file is a simple JavaScript file. By default, the JavaScript API will look for
purgecss.config.js.1
module.exports = {
2
content: ['index.html'],
3
css: ['style.css']
4
}
Copied!
You can then use PurgeCSS with the file:
1
const purgecss = new Purgecss()
2
// or use the path to the file as the only parameter
3
const purgecss = new Purgecss('./purgecss.config.js')
Copied!
Options
1
{
2
content: Array<string | RawContent>,
3
css: Array<string | RawContent>,
4
extractors?: Array<ExtractorsObj>,
5
whitelist?: Array<string>,
6
whitelistPatterns?: Array<RegExp>,
7
whitelistPatternsChildren?: Array<RegExp>,
8
keyframes?: boolean,
9
fontFace?: boolean,
10
rejected?: boolean
11
}
Copied!
- content
You can specify content that should be analyzed by PurgeCSS with an array of filenames or globs. The files can be HTML, Pug, Blade, etc.
1
new Purgecss({
2
content: ['index.html', '**/*.js', '**/*.html', '**/*.vue'],
3
css: ['css/app.css']
4
})
Copied!
PurgeCSS also works with raw content. To do this, you need to pass an object with the
raw property instead of a filename. To work properly with custom extractors you need to pass the extension property along with the raw content.1
new Purgecss({
2
content: [
3
{
4
raw: '<html><body><div class="app"></div></body></html>',
5
extension: 'html'
6
},
7
'**/*.js', '**/*.html', '**/*.vue'],
8
css: [{
9
raw: 'body { margin: 0 }'
10
},
11
'css/app.css']
12
})
Copied!
- extractors
PurgeCSS can be adapted to suit your needs. If you notice a lot of unused CSS is not being removed, you might want to use a custom extractor.
1
new Purgecss({
2
content: ['index.html', '**/*.js', '**/*.html', '**/*.vue'],
3
css: ['css/app.css'],
4
extractors: [
5
{
6
extractor: class {
7
static extract(content) {
8
return content.match(/a-Z/) || []
9
}
10
},
11
extensions: ['html', 'blade']
12
}
13
]
14
})
Copied!
- whitelist
You can whitelist selectors to stop PurgeCSS from removing them from your CSS. This can be accomplished with the options
whitelist and whitelistPatterns.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.- whitelistPatterns
You can whitelist selectors based on a regular expression with
whitelistPatterns.1
const purgecss = new Purgecss({
2
content: [], // content
3
css: [], // css
4
whitelistPatterns: [/red$/]
5
})
Copied!
In the example, selectors ending with
red such as .bg-red will be left in the final CSS.- whitelistPatternsChildren
You can whitelist selectors based on a regular expression with
whitelistPatternsChildren. Contrary to whitelistPatterns, it will also whitelist children of the selectors.1
const purgecss = new Purgecss({
2
content: [], // content
3
css: [], // css
4
whitelistPatternsChildren: [/red$/]
5
})
Copied!
In the example, selectors such as
red p or .bg-red .child-of-bg will be left in the final CSS.- keyframes (default: false)
If you are using a CSS animation library such as animate.css, you can remove unused keyframes by setting the
keyframes option to true.1
new Purgecss({
2
content: ['index.html', '**/*.js', '**/*.html', '**/*.vue'],
3
css: ['css/app.css'],
4
keyframes: true
5
})
Copied!
- fontFace (default: false)
If there are any unused @font-face rules in your css, you can remove them by setting the
fontFace option to true1
new Purgecss({
2
content: ['index.html', '**/*.js', '**/*.html', '**/*.vue'],
3
css: ['css/app.css'],
4
fontFace: true
5
})
Copied!
- rejected (default: false)
It can sometimes be more practical to scan through the removed list to see if there's anything obviously wrong. If you want to do it, use the
rejected option.1
new Purgecss({
2
content: ['index.html', '**/*.js', '**/*.html', '**/*.vue'],
3
css: ['css/app.css'],
4
rejected: true
5
})
Copied!
Last modified 2yr ago
Copy link