Skip to content

hunghg255/vite-minify-css-module

Repository files navigation

logo

A plugin minify css module for Vitejs

NPM Version NPM Downloads Minizip Contributors License

🌈 Features

  • 🍰 Minify css module class name
  • 🍰 Support clean-css options

📦 Installation

npm i vite-minify-css-module@latest -D

support vite and rollup.

Basic
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import MinifyCssModule from 'vite-minify-css-module/vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    MinifyCssModule({
      cleanCSS: {
        level: {
          2: {
            mergeSemantically: true,
            restructureRules: true,
          },
        },
      },
    }),
  ],
});


🌸 DefaultConfiguration

export interface PluginOptions {
  dictionary?: string;
  clearnCSS?: OptionsOutput;
}

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 HERE */
}

._card_pzatx_32 {
  /* CSS HERE */
}

._back_pzatx_49 ._content_pzatx_70 ._close_pzatx_74 {
  /* CSS HERE */
}

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

@keyframes a {
  /* CSS HERE */
}

.v {
  /* CSS HERE */
}

.c .s .w {
  /* CSS HERE */
}

About

Vite plugin minify css module class

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

 

Packages

No packages published