simonwep/vite-plugin-optimize-css-modules

🗜 Mangle / minimize css module classnames in production like facebook and Google do!

Vite Plugin - Optimize CSS Modules

Mangle classnames in production - save up to 20% on css for free!

Setup

This plugin requires vite of v3 or greater. It only makes sense to use if you're using css modules.

$ npm install --save-dev vite-plugin-optimize-css-modules

In your vite.config.ts simply add the plugin:

import { optimizeCssModules } from 'vite-plugin-optimize-css-modules';
import { defineConfig } from 'vite';

export default defineConfig({
    plugins: [
        optimizeCssModules()
    ]
})

And that's it. When running vite build your generated CSS should be significantly smaller.

How does it work?

By default, when using css modules, you end up with hashes or other long class-names in your bundled css files:

@keyframes _close-card_pzatx_1 {
    /* ...css */
}

._card_pzatx_32 {
    /* ...css */
}

._back_pzatx_49 ._content_pzatx_70 ._close_pzatx_74 {
    /* ...css */
}

By using this module, the smalles possible classname will be used for each "id":

@keyframes a {
    /* ...css */
}

.v {
    /* ...css */
}

.c .s .w {
    /* ...css */
}

vite-plugin-optimize-css-modules's Issues

What about caching?

One of the advantages of vite's SHAs is that they remain unchanged if the file contents remain unchanged after building the project. This means that no matter how many times you build and deploy, users will not have to re-download files that they have in their cache already.

On the other hand this means that using your plugin, users might not re-download certain files that could have changed if they have them cached already since the identifier (the css class name) did not change as well.
Am I mistaken in that?

Tailwind Support

Is this plugin support for tailwindcss?

Why not use base36?

Please forgive my silly question.

Is there a reason why you don’t simply do index.toString(36) instead of what you are doing now with your createCounter function?