https://github.com/hunghg255/vite-minify-css-module
Vite plugin minify css module class
https://github.com/hunghg255/vite-minify-css-module
clean-css minify-css plugin vite
Last synced: 3 months ago
JSON representation
Vite plugin minify css module class
- Host: GitHub
- URL: https://github.com/hunghg255/vite-minify-css-module
- Owner: hunghg255
- Created: 2023-11-04T09:46:38.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-08-05T11:39:04.000Z (about 1 year ago)
- Last Synced: 2025-04-07T23:01:37.183Z (6 months ago)
- Topics: clean-css, minify-css, plugin, vite
- Language: TypeScript
- Homepage:
- Size: 926 KB
- Stars: 9
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
A plugin minify css module for Vitejs
## 🌈 Features
- 🍰 Minify css module class name
- 🍰 Support clean-css options
## 📦 Installation
```bash
npm i vite-minify-css-module@latest -D
```
## support vite and rollup.
Basic
```ts
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
```typescript
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:
```css
@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":
```css
@keyframes a {
/* CSS HERE */
}
.v {
/* CSS HERE */
}
.c .s .w {
/* CSS HERE */
}
```