https://github.com/mellowco/unplugin-attributify-to-class
css attributify mode to class, support use in vite, rollup, webpack
https://github.com/mellowco/unplugin-attributify-to-class
attributify unplugin vite webpack
Last synced: 3 months ago
JSON representation
css attributify mode to class, support use in vite, rollup, webpack
- Host: GitHub
- URL: https://github.com/mellowco/unplugin-attributify-to-class
- Owner: MellowCo
- License: mit
- Created: 2022-08-07T14:45:40.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-11-14T13:15:56.000Z (about 2 years ago)
- Last Synced: 2025-10-20T18:34:04.941Z (3 months ago)
- Topics: attributify, unplugin, vite, webpack
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/unplugin-attributify-to-class
- Size: 2.2 MB
- Stars: 18
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
unplugin-attributify-to-class
English | 简体中文
[
](https://www.npmjs.com/package/unplugin-attributify-to-class)
collect and add atomized css [attributify mode](https://github.com/unocss/unocss/tree/main/packages/preset-attributify#attributify-mode) to class , support the use of attributify mode in miniprogram
to fit the functional semantics，`unplugin-unocss-attributify-wechat` rename to `unplugin-attributify-to-class`
---
## Why use it
use `@unocss/preset-attributify`
```html
button
```
generated css
```css
[bg~="blue-400"] {
--un-bg-opacity: 1;
background-color: rgba(96,165,250,var(--un-bg-opacity));
}
```
miniprogram does not support property selectors [bg~="blue-400"] ，[wechat documents](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F)
---
use this plugin
```html
button
```
transform
```html
button
```
---
## Installation
```shell
npm i -D unplugin-attributify-to-class
```
vite
```ts
import { defineConfig } from 'vite'
import { attributifyToClass, defaultAttributes, defaultIgnoreNonValuedAttributes } from 'unplugin-attributify-to-class/vite'
export default defineConfig({
plugins: [
// https://github.com/MellowCo/unplugin-attributify-to-class
attributifyToClass(),
],
})
```
webpack
```js
const { defaultAttributes, defaultIgnoreNonValuedAttributes, attributifyToClass } = require('unplugin-attributify-to-class/webpack')
module.exports = {
configureWebpack: {
plugins: [
// https://github.com/MellowCo/unplugin-attributify-to-class
attributifyToClass(),
],
},
}
```
## Usage
### Options
```ts
export interface Options {
/**
* @default 'un-'
*/
prefix?: string
/**
* Only match for prefixed attributes
* @default false
*/
prefixedOnly?: boolean
/**
* A list of attributes to transform class
* @default ['bg', 'flex', 'grid', 'border', 'text', 'font', 'class', 'className', 'p', 'm', 'animate']
*/
attributes?: string[]
/**
* A list of non-valued attributes to be ignored from extracting
* @default ['class']
*/
ignoreNonValuedAttributes?: string[]
/**
* Support matching non-valued attributes
*
* For example
* ```html
*
* ```
*
* @default true
*/
nonValuedAttribute?: boolean
/**
* Transform escape char like [ # $ . ,
* @default true
*/
transformEscape?: boolean
/**
* Custom transform Rules for escape char
* @default https://github.com/MellowCo/unplugin-transform-class#options
*/
transformRules?: Record
/**
* Rules to exclude transforming target
* @default [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/]
*/
exclude?: FilterPattern
/**
* Rules to include transforming target
* @default [/\.vue$/, /\.vue\?vue/]
*/
include?: FilterPattern
/**
* Add prefix for class
* @default ''
*/
classPrefix?: string
}
```
### Attributify Mode
See [attributify-mode](https://github.com/unocss/unocss/tree/main/packages/preset-attributify#attributify-mode)
```html
Button
```
Default transfrom attributes list ['bg', 'flex', 'grid', 'border', 'text', 'font', 'class', 'className', 'p', 'm', 'animate']
```html
Button
```
Add new `attributes`, like `my-attr`
```ts
import { attributifyToClass, defaultAttributes } from 'unplugin-attributify-to-class/vite'
// import { attributifyToClass, defaultAttributes } from 'unplugin-attributify-to-class/webpack'
attributifyToClass({
attributes: [...defaultAttributes, 'my-attr']
})
```
```html
Button
```
### Prefix Self-referencing
For utilities like flex, grid, border, that have the utilities same as the prefix, a special ~ value is provided.
```html
Button
```
Can be written as
```html
Button
```
### Valueless Attributify
```html
```
It will be add class after transform
```html
```
Notice
* Valueless Attributify default value is `true`
* Extract all valueless attributes by default，you can use `ignoreNonValuedAttributes`，exclude unnecessary attributes to avoid generating redundant class
* `ignoreNonValuedAttributes` default value is `['class']`
```html
```
After transform ，`my-prop` and `is-top` will be add to class
```html
```
Setting `ignoreNonValuedAttributes` to ignore `my-prop` `is-top`
```ts
import { attributifyToClass, defaultIgnoreNonValuedAttributes } from 'unplugin-attributify-to-class/vite'
// import { attributifyToClass, defaultIgnoreNonValuedAttributes } from 'unplugin-attributify-to-class/webpack'
attributifyToClass({
// open valueless attributify
nonValuedAttribute: true,
// ignore non-valued attributes
ignoreNonValuedAttributes: [...defaultIgnoreNonValuedAttributes, 'my-prop', 'is-top']
})
```
```html
```
### Properties Conflicts
If the name of the attributes mode ever conflicts with the elements' or components' properties, you can add `un-` prefix to be specific to attributify mode.
```html
This conflicts with links' `text` prop
```
Setting
```ts
attributifyToClass({
prefix: 'un-',
prefixedOnly: true,
})
```
Transform
```html
This conflicts with links' text prop
```
### TransformEscape
> Because `uniappp vue2` `taro` `webpack plugin`， `bg="[#333]"` compile as `bg- 333`, the style cannot be displayed normally
> so transform escape char for bg="[#333]", `bg="[#333]" => bg--fl--w-333-fr`
* Default open，setting with `transformEscape`
* You can setting custom rules with `transfromRules`, [default transformRules](https://github.com/MellowCo/unplugin-transform-class)
custom transfrom rules
```ts
const myRules = {
'.': '-dxxx-',
'/': '-sxxx-',
':': '-cxxx-',
'%': '-pxxx-',
'!': '-exxx-',
'#': '-wxxx-',
'(': '-blxxx-',
')': '-brxxx-',
'[': '-flxxx-',
']': '-frxxx-',
'$': '-rxxx-',
}
attributifyToClass({
transformEscape: true,
transformRules: myRules
})
```
### Include exclude
```ts
attributifyToClass({
exclude: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]my-folder[\\/]/],
include: [/\.vue$/, /\.vue\?vue/]
})
```
---
### classPrefix
> Add prefix for class
```html
```
Setting classPrefix with `li-`
```ts
attributifyToClass({
nonValuedAttribute: true,
classPrefix: 'li-',
})
```
After transform , bg-green => class="li-bg-green"
```html
```
related links
* [unocss-preset-weapp](https://github.com/MellowCo/unocss-preset-weapp) - Uthe unocss preset for wechat miniprogram.
---
### utils
```ts
import { extractorAttributify } from 'unplugin-attributify-to-class/utils'
const options = {
// ...
}
const extractor = extractorAttributify(options)
const code = 'xxxxx'
const newCode = extractor(code)
```