See what's launched

The next gen Gatsby is here Performance, developer velocity, and scaling to meet Enterprise needs - See what’s launched

Sign Up for Free
Community Plugin
View plugin on GitHub

gatsby-plugin-minify-classnames npm

Minify CSS Modules class names. This plugin is tested with official CSS plugins — gatsby-plugin-less, gatsby-plugin-sass and gatsby-plugin-stylus.

Installation

npm install gatsby-plugin-minify-classnames

Usage

Note: add this plugin after Less/Sass/Stylus plugins.

/* gatsby-config.js */

module.exports = {
  plugins: [
    'gatsby-plugin-less',
    'gatsby-plugin-sass',
    'gatsby-plugin-stylus',
    {
      resolve: 'gatsby-plugin-minify-classnames',
      options: {
        /* gatsby-plugin-minify-classnames options here */
      }
    }
  ]
}

Options

dictionary

Type: string. Default: 'bcdfghjklmnpqrstvwxyzBCDFGHJKLMNPQRSTVWXYZ0123456789'.

Characters used to generate the minified class names. Class names should start with letters, so the string must have at least one letter. To avoid issues with specific class names and ad blockers — e.g. ad —, the default dictionary uses only consonants and numbers.

enable

Type: boolean. Default: process.env.NODE_ENV === 'production'.

Set it to true to enable the plugin, false to disable. By default, it’ll be enabled on production environments.

prefix

Type: string. Default: ''.

suffix

Type: string. Default: ''.

How it works

It shortens the class name length by mapping the resourcePath and the localName to incremental strings.

Example

The files index.module.css and menu.module.css, respectively:

.container {
  display: flex;
}

.footer {
  padding: 1rem;
}
.container {
  position: fixed;
}

Generate the following CSS with gatsby-plugin-minify-classnames:

/* index.module.css */

.b_b {
  display: flex;
}

.b_c {
  padding: 1rem;
}

/* menu.module.css */

.c_b {
  position: fixed;
}

With gatsby-plugin-minify-classnames disabled, the following CSS would be generated:

/* index.module.css */

.index-module--container--l2fVb {
  display: flex;
}

.index-module--footer--3V8ew {
  padding: 1rem;
}

/* menu.module.css */

.menu-module--container--28fe0 {
  position: fixed;
}

License

The MIT License

© 2022 Gatsby, Inc.