https://github.com/neatsoftware/webpack-minimal-classnames
Generate small css class names with webpack css-loader
https://github.com/neatsoftware/webpack-minimal-classnames
css css-loader minification webpack
Last synced: 23 days ago
JSON representation
Generate small css class names with webpack css-loader
- Host: GitHub
- URL: https://github.com/neatsoftware/webpack-minimal-classnames
- Owner: neatsoftware
- Created: 2018-08-17T14:50:23.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-02-04T17:02:18.000Z (about 4 years ago)
- Last Synced: 2025-09-20T04:25:24.083Z (6 months ago)
- Topics: css, css-loader, minification, webpack
- Language: JavaScript
- Homepage:
- Size: 200 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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:
```css
.someLongDescriptiveCssClassName {
color: red;
}
.anotherLongDescriptiveCssClassName {
color: green;
}
```
Output:
```css
.xDK {
color: red;
}
.zyv {
color: green;
}
```
### Usage
```js
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