mini-css-class-name

Minimum size unique CSS class names generator. It can be used with Webpack, Gatsby and PostCSS 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

css-loader

Use with the Webpack css-loader resolver

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

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,
          },
        },
      },
    ],
  },
};

Development and Production Environments

Setup of minimizing the class names only in the production build. In the development environment, you may use a human-readable class name template. It will be more easy to debug your projects.

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: process.env.NODE_ENV === 'production'
            ? { getLocalIdent: localIndent }
            : { localIdentName: '[path][name]__[local]--[hash:base64:5]' },
        },
      },
    ],
  },
};

postcss-modules

Use minimazer with the PostCSS postcss-modules plugin

const generateScopedName = require('mini-css-class-name/postcss-modules');

Example

const { readFile } = require('node:fs/promises');
const postcss = require('postcss');
const postcssModules = require('postcss-modules');
const generateScopedName = require('mini-css-class-name/postcss-modules');

const getStyles = async () => {
  const path = './styles.css';
  const source = await readFile(path, 'utf8');

  let json;

  const { css } = await postcss([
    postcssModules({
      getJSON(_, jsonData) {
        json = jsonData;
      },
      generateScopedName: generateScopedName(/* options */),
    }),
  ]).process(source, { from: path });

  return { json, css };
};

Gatsby

You also can use it with Gatsby v2, v3, v4 or v5

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