https://github.com/mellowco/unplugin-transform-class
transform class by rules, support use in vite, rollup, webpack
https://github.com/mellowco/unplugin-transform-class
transformer unplugin vite webpack
Last synced: 3 months ago
JSON representation
transform class by rules, support use in vite, rollup, webpack
- Host: GitHub
- URL: https://github.com/mellowco/unplugin-transform-class
- Owner: MellowCo
- License: mit
- Created: 2022-07-04T14:52:06.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-05-10T08:04:05.000Z (8 months ago)
- Last Synced: 2025-10-22T04:53:28.689Z (3 months ago)
- Topics: transformer, unplugin, vite, webpack
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/unplugin-transform-class
- Size: 2.29 MB
- Stars: 13
- Watchers: 1
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
unplugin-transform-class
English | 简体中文
transfrom `html class` selector by custom rules
---
static class
```html
tracking-[2/5]
```
setting rules
```js
const rules = {
'/': '-s-',
':': '-c-',
'[': '-fl-',
']': '-fr-',
}
transformClass({
rules
})
```
transfrom
```html
tracking-[2/5]
```
---
dynamic class
```html
111111111
111111111
```
transfrom
```html
111111111
111111111
```
## installation
```shell
npm i unplugin-transform-class -D
```
Vite
```ts
import transformClass from 'unplugin-transform-class/vite'
import { defineConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
// https://github.com/MellowCo/unplugin-transform-class
transformClass(),
],
})
```
webpack
```ts
const transformClass = require('unplugin-transform-class/webpack')
module.exports = {
configureWebpack: {
plugins: [
// https://github.com/MellowCo/unplugin-transform-class
transformClass(),
],
},
}
```
---
## usage
### options
```ts
export interface Options {
/**
* custom transform Rules
* @default
* {
'.': '_dl_',
'/': '_sl_',
':': '_cl_',
'%': '_pes_',
'!': '_el_',
'#': '_wn_',
'(': '_lbl_',
')': '_lbr_',
'[': '_lfl_',
']': '_lfr_',
'$': '_do_',
',': '_lco_',
'=': '_eqe_',
}
*/
rules?: Record
/**
* exclude
* @default [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/]
*/
exclude?: FilterPattern
/**
* include
* @default [/\.[jt]sx?$/, /\.vue$/, /\.vue\?vue/]
*/
include?: FilterPattern
}
```
---
### custom transform Rules
```ts
// webpack
// const transformClass = require('unplugin-transform-class/webpack')
// import transformClass from 'unplugin-transform-class/webpack'
// vite
import transformClass from 'unplugin-transform-class/vite'
const myRules = {
'.': '-ddd-',
'/': '-ss-',
':': '-cc-',
'%': '-pp-'
}
transformWeClass({
rules: myRules
})
```
---
### exclude include
```ts
// webpack
// const transformClass = require('unplugin-transform-class/webpack')
// import transformClass from 'unplugin-transform-class/webpack'
// vite
import transformClass from 'unplugin-transform-class/vite'
transformWeClass({
exclude: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]my-folder[\\/]/],
include: [/\.vue$/, /\.vue\?vue/]
})
```
---
### utils
```ts
import { defaultRules, escapeRegExp, restoreSelector, transformCode, transformEscapESelector, transformSelector } from 'unplugin-transform-class/utils'
const code = `
tracking-[2/5]
`
const rules = {
'/': '-s-',
':': '-c-',
'[': '-fl-',
']': '-fr-',
}
const newCode = transformCode(code, rules)
```
---
## use case
### use atomic css in miniprogram
> transfrom the escape class not supported by miniprogram, like `\\`，`\:` `\[` `\$` `\.` , implement the atomic css in miniprogram
> for example use [unocss-preset-weapp](https://github.com/MellowCo/unocss-preset-weapp), use unocss development in miniprogram
related links
* [unocss-preset-weapp](https://github.com/MellowCo/unocss-preset-weapp) - the unocss preset for wechat miniprogram.