css-loader-name-generator

Generator of short names of css classes for css-loader

Usage no npm install needed!

<script type="module">
  import cssLoaderNameGenerator from 'https://cdn.skypack.dev/css-loader-name-generator';
</script>

README

Css Loader Name Generator

npm version license downloads language github-issues

Description

Generator of short names of css classes for css-loader.

Installation

npm install css-loader-name-generator --save-dev

Usage

// In webpack config file
const CssLoaderNameGenerator = require('css-loader-name-generator');
// For example: 1 - minimal css class name length, 3 - maximal css class name length
const NameGenerator = new CssLoaderNameGenerator(1, 3);

// In css-loader section
{
    loader: 'css-loader',
    options: {
        modules: {
            getLocalIdent: NameGenerator.getLocalIdent,
            mode: 'local'
        }
    }
}

Additional

Also you can use generator out of css-loader context.

const shortName = NameGenerator.getRandomName('my_module_name');

Example code output

.T {
    background: white;
    border: 1px solid #dbdbdb;
    border-radius: 2px;
    color: #666666;
    font-size: 13px;
    font-weight: 100;
    line-height: 31px;
    padding: 0 12px;
}
.T:focus {
    outline: none;
    border-color: #3380cc; 
}
.T.o {
    display: inline-block;
}
.T.Z {
    background: whitesmoke;
}
.T.d {
    -moz-appearance: textfield; 
}
.T.d::-webkit-outer-spin-button,
.T.d::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; 
}