https://github.com/Simonwep/vite-plugin-optimize-css-modules

🗜 Mangle / minimize css module classnames in production like facebook and Google do!
https://github.com/Simonwep/vite-plugin-optimize-css-modules

css css-minify css-modules plugin vite vite-plugin

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/Simonwep/vite-plugin-optimize-css-modules
• Owner: simonwep
• Created: 2022-09-14T15:27:12.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2024-07-06T14:27:48.000Z (7 months ago)
• Last Synced: 2024-10-17T00:49:47.793Z (3 months ago)
• Topics: css, css-minify, css-modules, plugin, vite, vite-plugin
• Language: TypeScript
• Homepage:
• Size: 32.2 KB
• Stars: 30
• Watchers: 2
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• fucking-awesome-vite - vite-plugin-optimize-css-modules - Generate the smallest possible CSS-Classes when CSS-Modules are used. (Plugins / Framework-agnostic Plugins)
• awesome-vite - vite-plugin-optimize-css-modules - Generate the smallest possible CSS-Classes when CSS-Modules are used. (Plugins / Framework-agnostic Plugins)

README

        





    
Vite Plugin - Optimize CSS Modules




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




  

  

  

  



### Setup

This plugin requires [vite](https://vitejs.dev/) of v3 or greater.

It only makes sense to use if you're using [css modules](https://vitejs.dev/config/shared-options.html#css-modules).

```sh

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

```

In your [`vite.config.ts`](https://vitejs.dev/config/#configuring-vite) simply add the plugin:

```ts

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:

```css

@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":

```css

@keyframes a {

    /* ...css */

}

.v {

    /* ...css */

}

.c .s .w {

    /* ...css */

}

```