Webpack Incremental Ident

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.

Installation

Via npm:

$ npm install webpack-incremental-ident --save-dev

Via yarn:

$ yarn add -D webpack-incremental-ident

Usage

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$/]
    })
  ]
}

Configuration

new IncrementalCSS(options);

options.logPath

• Type: String
• Required

Path to your json file to keep track of your incremental class names.

options.characters

• Type: Array
• Default: abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-_

Characters are included in class names.

options.fallbackIdent

• Type: String
• Default: ""

Fallback to an ident name strategy if classname doesn't exist in logPath

options.blacklist

• Type: Array of regex
• Default: []

List of class names will be ignored for example ad