Package Exports

classnames-minifier
classnames-minifier/dist/ClassnamesMinifier.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (classnames-minifier) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

The logic of minifying is taken out of the next-classnames-minifier library.

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 classnames-minifier

Using yarn:

yarn add classnames-minifier

Configuration

Options

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);
cacheDir - directory where this library will write the cache. Passing this parameter will enable caching. Use this option only if your framework really needs it;
distDir - directory where the project is being assembled. Used only when caching is enabled to synchronize caches between this library and the project;

Configuration example:

// webpack.config.js
const classnamesMinifier = new ClassnamesMinifier({
    prefix: '_',
    reservedNames: ['_en', '_de'],
});
// ...
loaders.push(
    {
        loader: require.resolve('css-loader'),
        options: {
            importLoaders: 3,
            modules: {
                mode: 'local',
                getLocalIdent: classnamesMinifier.getLocalIdent,
            },
        },
    },
);

If the framework you are using utilizes component caching between builds, you can configure caching in classnames-minifier as well. As a result, module classes between builds will use the same compressed classes.

// webpack.config.js
const classnamesMinifier = new ClassnamesMinifier({
    distDir: path.join(process.cwd(), 'build'),
    cacheDir: path.join(process.cwd(), 'build/cache'),
});
// ...
loaders.push(
    classnamesMinifier.postLoader,
    {
        loader: require.resolve('css-loader'),
        options: {
            importLoaders: 3,
            modules: {
                mode: 'local',
                getLocalIdent: classnamesMinifier.getLocalIdent,
            },
        },
    },
    classnamesMinifier.preLoader,
);

License

MIT