Webpack plugin transform your css class name into shortest form.
✍️ Using incremental class names causes problem because of two reasons:
- Webpack potentially compiles input files in different order.
- You change the order when using
require/import
.
This plugin solves the problem above by keeping track of incremental class names and reuse them for following compilings.
Via npm:
$ npm install webpack-incremental-ident --save-dev
Via yarn:
$ yarn add -D webpack-incremental-ident
const IncrementalCSS = require('webpack-incremental-ident');
const webpackConfig = {
...
module: {
rules: [
{
test: /\.css$/,
loader: 'css-loader',
options: {
getLocalIdent: IncrementalCSS.getLocalIdent,
}
}
]
},
plugins: [
new IncrementalCSS({
logPath: path.resolve(__dirname, '../stats/css.json'),
blacklist: [/^ad$/]
})
]
}
new IncrementalCSS(options);
- Type:
String
- Required
Path to your json file to keep track of your incremental class names.
- Type:
Array
- Default:
abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-_
Characters are included in class names.
- Type:
String
- Default:
""
Fallback to an ident name strategy if classname doesn't exist in logPath
- Type:
Array of regex
- Default:
[]
List of class names will be ignored for example ad