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: |API name|CLI param|type|required|default|description| |---|---|---|---|---|---| |files|-f or --files|array of glob|x||glob that contains classes to replace |css|-c or --css|array of glob|x||glob that contains selectors to replace |prefix|-p or --prefix|string||empty string|prefix string to use in replaced class |suffix|-s or --suffix|string||empty string|suffix string to use in replaced class |whitelist|-w or --whitelist|array of string||[]|array of classes to exclude from replace

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.