https://github.com/kiosion/vite-plugin-class-mangler

Vite plugin for minifying / obfuscating CSS classes in production builds
https://github.com/kiosion/vite-plugin-class-mangler

react svelte sveltekit vite vite-plugin vitejs vue

Last synced: 4 months ago
JSON representation

Vite plugin for minifying / obfuscating CSS classes in production builds

• Host: GitHub
• URL: https://github.com/kiosion/vite-plugin-class-mangler
• Owner: kiosion
• Archived: true
• Created: 2022-07-27T03:28:01.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-10-02T20:33:28.000Z (over 2 years ago)
• Last Synced: 2024-09-07T05:56:43.902Z (5 months ago)
• Topics: react, svelte, sveltekit, vite, vite-plugin, vitejs, vue
• Language: TypeScript
• Homepage:
• Size: 625 KB
• Stars: 31
• Watchers: 5
• Forks: 3
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  
vite-plugin-class-mangler

  
Vite plugin for minifying / obfuscating classes in production builds. Compatible with Tailwind, inline, or imported styles.

  



## Supported frameworks

- Vue (In progress)

- React (In progress)

- Svelte

## Installation

> This plugin is still a work-in-progress, I'm currently working out how to extract used classes from templates & scripts before bundling, and replace all references within style tags, css, and scss files after parsing - The 'buildEnd' hook would be good timeline-wise, but doesn't allow for modification of the code. If you're knowledgable with the Vite/Rollup plugin APIs, contributions would be appreciated!

## Usage

Add to your vite config:

```js

import { defineConfig } from 'vite';

import ClassMangler from 'vite-plugin-class-mangler';

export default defineConfig({

  plugins: [

    ClassMangler()

  ]

});

```

Optionally, customize any of the following options:

```js

ClassMangler({

  dev: true,

  min: 2,

  max: 6,

  length: 8,

  suffixes: ['.svelte', '.html']

})

```

'Dev' determines whether to apply the plugin on serve or build. It defaults to 'false', only replacing class names in production builds.

Min / max are inclusive integers used for randomizing the length of the generated classes. If 'length' is provided instead, these will be ignored.

Suffixes can be overriden, provided as an array of strings, although the defaults should work in most cases (['.svelte', '.tsx', '.jsx', '.html', '.vue']).

## Testing

Run unit tests:

```bash

yarn test

```

## Credits

Forked from [vite-plugin-tailwind-obfuscate](https://github.com/misbahansori/vite-plugin-tailwind-obfuscate)