next-optimized-classnames

Reduce all CSS classes produced by CSS modules to the smallest form possible

Classes are only optimized in production builds

Works with SASS/SCSS/CSS modules

Install

npm i next-optimized-classnames

Use

Standalone

// next.config.js

module.exports = require('next-optimized-classnames')()

With custom configuration

// next.config.js

module.exports = require('next-optimized-classnames')({
    // Custom config
})

With other plugins

// next.config.js

module.exports = require('next-compose-plugins')(
    [
        [require('next-optimized-classnames')]
        // Other plugins
    ],
    {
        // Your config
    }
)

Example

Without next-optimized-classnames

<div class="Home_container_x83bc">
    <h1 class="Home_title_x83bc">My website</h1>
    <p class="Home_subtitle_x83bc">This is the BEST website ever!</p>
</div>

With next-optimized-classnames

<div class="a">
    <h1 class="b">My website</h1>
    <p class="c">This is the BEST website ever!</p>
</div>