Community Plugin
View plugin on GitHub
See starters using this

gatsby-plugin-minify-classnames

Minify classnames created with CSS Modules. This plugin is compatible with official Gatsby Less, Sass, Stylus and PostCSS plugins.

/* Without gatsby-plugin-minify-classnames */

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

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

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

/* With gatsby-plugin-minify-classnames */

.b_b {
  display: flex;
}

.b_c {
  padding: 1rem;
}

.c_b {
  position: fixed;
}

Install

$ npm install gatsby-plugin-minify-classnames

Configure

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

// gatsby-config.js

module.exports = {
  plugins: [
    `gatsby-plugin-less`,
    `gatsby-plugin-sass`,
    `gatsby-plugin-stylus`,
    `gatsby-plugin-postcss`,
    {
      resolve: `gatsby-plugin-minify-classnames`,
      options: {
        dictionary: 'bcdfghjklmnpqrstvwxyzBCDFGHJKLMNPQRSTVWXYZ0123456789',
        enable: true,
      },
    },
  ],
}

Options

dictionary

Default: 'bcdfghjklmnpqrstvwxyzBCDFGHJKLMNPQRSTVWXYZ0123456789'. Type: string.

Set a custom dictionary to create the minified classnames. The generated classnames should always start with letters, so the string must have at least one letter.

enable

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

Condition to enable the plugin. Set it to true to always enable the plugin, even on development environment.

License

The MIT License