Next classnames minifier

Library for configuring style (css/scss/sass) modules to generate compressed classes (.header -> .a, .nav -> .b, ..., .footer -> .aad, etc.) with support for changes and rebuilding without clearing the built application.

Important

This description is for >=2.2.0. See instructions for previous versions at next-classnames-minifier/tree/2.1.1

Reasons

Compressing classes can reduce the size of the generated html and css by up to 20%, which will have a positive effect on page rendering and metrics (primarily FCP)

Installation

Using npm:

npm i next-classnames-minifier

Using yarn:

yarn add next-classnames-minifier

Usage

Create next.config.js file in your project and apply the library.

Base:

const withClassnamesMinifier = require('next-classnames-minifier').default;

module.exports = withClassnamesMinifier({ type: process.env.NODE_ENV === 'development' ? 'none' : 'minified' })({
    // next.js config
});

With next-compose-plugins:

const withClassnamesMinifier = require('next-classnames-minifier').default;
const withPlugins = require('next-compose-plugins');

module.exports = withPlugins([
    [withClassnamesMinifier({ type: process.env.NODE_ENV === 'development' ? 'none' : 'minified' })]
], nextConfig);

Configuration

Options

• type - variant of changing classnames method;
• templateString - custom template string, only works with "custom" type;
• prefix - custom prefix that will be added to each updated class;
• reservedNames - array of reserved names that should not be used by this package (must include prefix);

Type

next-classname-minifier has 3 types of changing classnames:

• minified — the main option. It is not recommended to use this option in development mode, it may slow down the update;
• custom — create a class using a template string rule, can be used for debugging;
• none — use the default CSS modules option, default for development mode;

It is recommended to disable minification for development.

Configuration example:

module.exports = withPlugins([
    [withClassnamesMinifier({ type: process.env.NODE_ENV === 'development' ? 'none' : 'minified' })]
], nextConfig);

Custom mode example:

module.exports = withPlugins([
    [withClassnamesMinifier({ type: 'custom', templateString: '[path][name]__[local]_[hash:base64:5]' })]
], nextConfig);

License

MIT