Webpack Minimal Classnames

Generate small css class names when using css modules with webpack css-loader.
Recommended to do only doing during production builds as a minification step.
This differs from simply using css-loader's [hash:base64:n] by handling any collisions & allowing to configure excluded names.

Example

Input:

.someLongDescriptiveCssClassName {
  color: red;
}
.anotherLongDescriptiveCssClassName {
  color: green;
}

Output:

.xDK {
  color: red;
}
.zyv {
  color: green;
}

Usage

const MinimalClassnameGenerator = require('webpack-minimal-classnames')

const generateMinimalClassname = MinimalClassnameGenerator({
  length: 3,
  excludePatterns: [/ad/i]
})

{
  test: /\.css$/,
  loaders: [
    {
      loader: 'css-loader',
      options: {
        modules: {
          getLocalIdent: generateMinimalClassname
        }
      }
    }
  ]
}

Options

length (number) - Length of generated class names
default: 3
If the max number of names is generated for a given length, it will start generating more at an incremented length

excludePatterns (RegExp[]) - Array of regex patterns to exclude generating as a class name