README

mini-css-class-name

Minimum size unique CSS class names generator. It can be used with Webpack and Gatsby ecosystems.

Install

npm i mini-css-class-name --save-dev
# or
yarn add mini-css-class-name -D

How to use

const miniCssClassName = require('mini-css-class-name');

const generate = miniCssClassName({
  prefix: 'x__',
  suffix: '--y',
});

generate(); // x__a--y
generate(); // x__b--y
generate(); // x__c--y

Reset method

const miniCssClassName = require('mini-css-class-name');

const generate = miniCssClassName();

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

generate.reset();

generate(); // a

Exclude Pattern

You can use a regular expression to exclude any characters from the template string.

// remove underscore and dash
const generate = miniCssClassName({ excludePattern: /[_-]/g });

// keep only alphabet characters
const generateABC = miniCssClassName({ excludePattern: /[^a-z]/gi });

Default template string

'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_-0123456789';

CSS Modules

There are two ways to plugin it's depending on css-loader version.

css-loader <= 1.x || ~2.x

const createLocalIdent = require('mini-css-class-name/css-loader');

const localIndent = createLocalIdent(/* options */);

module.exports = {

  // webpack config ...

  module: {
    rules: [
      {
        test: /\.css$/,
        loader: 'css-loader',
        options: {
          modules: true,
          getLocalIdent: localIndent,
        },
      },
    ],
  },
};

css-loader >= 3.0.0

const createLocalIdent = require('mini-css-class-name/css-loader');

const localIndent = createLocalIdent(/* options */);

module.exports = {

  // webpack config ...

  module: {
    rules: [
      {
        test: /\.css$/,
        loader: 'css-loader',
        options: {
          modules: {
            getLocalIdent: localIndent,
          },
        },
      },
    ],
  },
};

Documentation about css-modules

Gatsby

You also can use it with Gatsby v2 or v3

gatsby-plugin-mini-css-class-name

Options

Name	Type	Default	Description
prefix	`{String}`	`''`	A custom prefix will be added to each class name
suffix	`{String}`	`''`	A custom suffix will be added to each class name
excludePattern	`{RegExp}`	`null`	A regular expression for removing characters

License

MIT

Usage no npm install needed!