Gatsby-plugin-mini-css-class-name NPM

gatsby-plugin-mini-css-class-name

Minifying CSS class names if using CSS Modules.

- <p class="post-module--text--w-3Tg">Hello</p>
+ <p class="a">Hello</p>

Install

npm i gatsby-plugin-mini-css-class-name
#or
yarn add gatsby-plugin-mini-css-class-name

How to use

// In your gatsby-config.js
module.exports = {
  plugins: [`gatsby-plugin-mini-css-class-name`],
}

If you need to pass plugin options:

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-mini-css-class-name`,
      options: {
        prefix: `x-`,
      },
    },
  ],
}

⚠️ This plugin must be the last plugin witch work with CSS in your gatsby-config.js. This plugin contributes change to Webpack config and other plugins can delete the changes.

// In your gatsby-config.js
module.exports = {
  plugins: [
    `gatsby-plugin-postcss`,
    `gatsby-plugin-mini-css-class-name`, // after PostCSS
  ],
}

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