css-classes-minifier

Why

Utility tool to rename css classes with a generated shorter name.

A simple tool to minify CSS classes in CSS and other (JS, HTML, etc.) files.

Example API

import cssClassesMinifier from 'css-classes-minifier';
 
(async () => {
  console.log('Starting minifying...');
 
  await cssClassesMinifier({ files: ['files/scripts*.js', 'files/styles*.css'], css: ['files/styles*.css'] });
 
  console.log('Minification completed!');
})();

Example API

css-classes-minifier -f "files/scripts*.js,files/styles*.css" -c "files/styles*.css"

Parameters

Options can be provided as third argument of main function:

NOTES

This tool search classes selectors in "files" parameter glob using a regex to find the exact class name.

For example this classes (text-red-600 and text-green-600) will NOT be recognized:

<div className={`text-${ error ? 'red' : 'green' }-600`}></div>

While in this example classes will be recognized:

<div className={error ? 'text-red-600' : 'text-green-600' }></div>

Writing templates without concatenating classes permit to know at build time classes effectivly used. PurgeCSS remove classes from CSS searching in template files in the same way. This permit to reduce amount of classes in final CSS files, reducing bundle size.