@aofl/html-webpack-purify-internal-css-plugin
This is a plugin for html-webpack-plugin. It uses PurifyCSS to remove all unused css rules from internal styles of the generated html.
Installation
npm i -D @aofl/html-webpack-purify-internal-css-plugin
Usage
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPurifyInternalCssPlugin = require('@aofl/html-webpack-purify-internal-css-plugin');
module.export = {
...
plugins: [
new HtmlWebpackPlugin(),
new HtmlWebpackPurifyInternalCssPlugin()
]
}
Options
level
Level specifies pruning strategy.
option | Description |
---|
auto | This is the default behavior. It prunes unused css rules based on the generated html and the purgeCss options. |
whitelist | Only keep whitelisted rules. |
all | Prune everything |
none | Prune nothing. (Useful for development to be able to toggle classes in devtools) |
module.export = {
...
plugins: [
new HtmlWebpackPurifyInternalCssPlugin({
level: process.env.NODE_ENV === 'development'? 'none': 'auto'
})
]
}
purgeCss
purgeCss options
module.export = {
...
plugins: [
new HtmlWebpackPurifyInternalCssPlugin({
level: process.env.NODE_ENV === 'development'? 'none': 'auto',
purgeCss: {
whitelist?: Array<string>,
whitelistPatterns?: Array<RegExp>,
whitelistPatternsChildren?: Array<RegExp>,
keyframes?: boolean,
fontFace?: boolean,
rejected?: boolean
}
})
]
}