mini-css-class-name

mini-css-class-name

Minimum size unique CSS class names generator. It can be used with Webpack, Vite, 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 mini-css-class-name 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 };
};

Vite

Use mini-css-class-name with Vite's CSS Modules. The example shows how to generate minified class names in production and readable names in development.

import { defineConfig } from 'vite';
import generateScopedName from 'mini-css-class-name/postcss-modules';

export default defineConfig(({ mode }) => {
  const isProd = mode === 'production';

  return {

    // Vite config ...

    css: {
      modules: {
        generateScopedName: isProd
          ? generateScopedName(/* options */)
          : '[name]__[local]___[hash:base64:5]',
      },
    },
  };
});

Development vs Production:

• Production: Uses generateScopedName() to generate minimum size class names (e.g., a, b, c)
• Development: Uses readable template [name]__[local]___[hash:base64:5] for easier debugging

Gatsby

You can also 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