mini-css-class-name

Minimum size unique CSS class names generator

Install

npm i mini-css-class-name
# or
yarn add mini-css-class-name

Start

// CommonJS
const miniClassNames = require('mini-css-class-name');
// ES6
import miniClassName from 'mini-css-class-name';

Basic

import miniClassNames from 'mini-css-class-name';

const generate = miniClassNames({
  prefix: 'x__',
  suffix: '--',
  hash: 4,
});

generate(); // x__a--e9di
generate(); // x__b--ei27
generate(); // x__c--e80f

Reset

import miniClassNames from 'mini-css-class-name';

const generate = miniClassNames();

generate(); // a
generate(); // b
generate(); // c

generate.reset();

generate(); // a

CSS Modules

webpack.config.js

const getLocalIdent = require('mini-css-class-name/css-loader');
// or ES6
// import { getLocalIdent } from 'mini-css-class-name';

// css-loader < v3.0.0
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        loader: 'css-loader',
        options: {
          modules: true,
          getLocalIdent: getLocalIdent(/* options */),
        },
      },
    ],
  },
}

// css-loader >= v3.0.0
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        loader: 'css-loader',
        options: {
          modules: {
            getLocalIdent: getLocalIdent(/* options */),
          },
        },
      },
    ],
  },
}

Options

Name	Type	Default	Description
prefix	{String}	""	prefix added to each class name
suffix	{String}	""	suffix added to each class name
hash	{Number}	0	length of generating a hash key

License

MIT