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

mini-css-class-name

License

MIT