# vite-plugin-classname

> A quick plugin to register className prefixes, this eliminates the need for component library authors to define an additional prefix variable in both the JS and CSS sections.

Latest version **0.0.3** (published 2022-04-10) · 0 weekly downloads

## Install

```sh
npm install vite-plugin-classname
pnpm add vite-plugin-classname
yarn add vite-plugin-classname
bun add vite-plugin-classname
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2022-04-10 |
| First published | 2022-04-10 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 224.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Spencer17x |
| Maintainers | dpxxx |

## Links

- npm: https://www.npmjs.com/package/vite-plugin-classname
- npm.io page: https://npm.io/package/vite-plugin-classname

## Dependencies (1)

- [css-tree](https://npm.io/package/css-tree.md) ^2.1.0

## Recent versions

- 0.0.3 (latest) — 2022-04-10
- 0.0.2 — 2022-04-10
- 0.0.1 — 2022-04-10

## README

# vite-plugin-classname

A quick plugin to register className prefixes, this eliminates the need for component library authors to define an additional prefix variable in both the JS and CSS sections.

It is better to prevent class name conflicts in your component library

## Install

```shell
$ pnpm add vite-plugin-classname -D
```

```tsx
// vite.config.ts
import { defineConfig } from 'vite';
import { VitePluginClassName } from 'vite-plugin-classname';

export default defineConfig({
  plugins: [
    VitePluginClassName({ prefixClassName: 'demo' })
  ]
})
```

## Usage

> It will process CSS files by default
>
> If you use CSS preprocessors, you'll need to configure them a little extra

### Set the prefix class name

```tsx
VitePluginClassName({ 
  prefixClassName: 'demo', 
})
```

### Use sass

```tsx
VitePluginClassName({ 
  prefixClassName: 'demo', 
  cssSuffix: ['.sass']
})
```

### Use scss

```tsx
VitePluginClassName({ 
  prefixClassName: 'demo', 
  cssSuffix: ['.scss']
})
```

### Use less

```tsx
VitePluginClassName({ 
  prefixClassName: 'demo', 
  cssSuffix: ['.less']
})
```

### Use styl

```tsx
VitePluginClassName({ 
  prefixClassName: 'demo', 
  cssSuffix: ['.styl']
})
```

---
_Source: https://npm.io/package/vite-plugin-classname · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._