https://github.com/amannn/vite-plugin-pretty-css-modules
Use prettier generated class names in development, while applying minification in production.
https://github.com/amannn/vite-plugin-pretty-css-modules
Last synced: about 2 months ago
JSON representation
Use prettier generated class names in development, while applying minification in production.
- Host: GitHub
- URL: https://github.com/amannn/vite-plugin-pretty-css-modules
- Owner: amannn
- License: mit
- Created: 2024-02-23T11:29:23.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-02T14:23:13.000Z (about 1 year ago)
- Last Synced: 2024-10-06T03:41:19.943Z (8 months ago)
- Language: TypeScript
- Size: 34.2 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vite-plugin-pretty-css-modules
Use pretty generated class names in development, while applying minification in production:
- **Development**: `${filename}-${selectorName}-${shortUniqueHash}` (e.g. `TodoList-root-3a92`)
- **Production**: `c${shortUniqueHash}` (e.g. `c3a92`)
## Usage
```ts
// vite.config.ts
import {defineConfig} from 'vite';
import prettyCssModules from 'vite-plugin-pretty-css-modules';
export default defineConfig({
plugins: [prettyCssModules()]
});
```
## Configuration
The hash is generated with [the `crypto` module](https://nodejs.org/api/crypto.html) based on the file path and can be configured as follows:
```ts
declare function prettyCssModules(opts?: {
/** Defaults to `shake256` (see https://nodejs.org/api/crypto.html#cryptocreatehashalgorithm-options) */
algorithm: string;
/** In bytes, defaults to `2` (which equals 65,536 unique strings) */
outputLength: number;
});
```