Minify CSS Modules class names. This plugin is tested with official CSS plugins
— gatsby-plugin-less
, gatsby-plugin-sass
and gatsby-plugin-stylus
.
npm install gatsby-plugin-minify-classnames
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 */
}
}
]
}
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.
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.
Type: string
. Default: ''
.
Type: string
. Default: ''
.
It shortens the class name length by mapping the resourcePath
and the
localName
to incremental strings.
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;
}