unplugin-attributify-to-class
English | 简体中文
[
](https://www.npmjs.com/package/unplugin-attributify-to-class)
将原子化css [attributify mode](https://github.com/unocss/unocss/tree/main/packages/preset-attributify#attributify-mode) 收集并添加到 class 中， 以支持在小程序中使用 attributify mode
为了贴合功能语义，`unplugin-unocss-attributify-wechat` 改名为 `unplugin-attributify-to-class`
---
## 为什么使用
使用 `@unocss/preset-attributify`
```html
```
生成后的css
```css
[bg~="blue-400"] {
--un-bg-opacity: 1;
background-color: rgba(96,165,250,var(--un-bg-opacity));
}
```
小程序不支持属性选择器 [bg~="blue-400"] ，[微信文档](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)
---
使用该插件
```html
```
转换后
```html
```
---
## 安装
```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(),
],
},
}
```
## 如何使用
### options
```ts
export interface Options {
/**
* @default 'un-'
*/
prefix?: string
/**
* 仅匹配前缀属性
* @default false
*/
prefixedOnly?: boolean
/**
* 需要转换的属性列表
* @default ['bg', 'flex', 'grid', 'border', 'text', 'font', 'class', 'className', 'p', 'm', 'animate']
*/
attributes?: string[]
/**
* 忽略的非值属性列表
* @default ['class']
*/
ignoreNonValuedAttributes?: string[]
/**
* 支持匹配非值属性
*
* For example
* ```html
*
* ```
*
* @default true
*/
nonValuedAttribute?: boolean
/**
* 转换转义字符 [ # $
* @default true
*/
transformEscape?: boolean
/**
* 自定义转义字符转换规则
* @default https://github.com/MellowCo/unplugin-transform-class#options
*/
transformRules?: Record
/**
* 排除转换目标
* @default [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/]
*/
exclude?: FilterPattern
/**
* 需要转换的目标
* @default [/\.vue$/, /\.vue\?vue/]
*/
include?: FilterPattern
/**
* 为生成的class选择器添加前缀
* @default ''
*/
classPrefix?: string
}
```
### Attributify Mode
相关介绍见 [attributify-mode](https://github.com/unocss/unocss/tree/main/packages/preset-attributify#attributify-mode)
```html
```
默认转换的属性列表为 ['bg', 'flex', 'grid', 'border', 'text', 'font', 'class', 'className', 'p', 'm', 'animate']
```html
```
```html
```
使用 `attributes` , 添加新的属性
```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
```
### 前缀自参照
对于 `flex`、`grid`、`border` 等具有与前缀相同的实用程序，将提供一个特殊的 `~` 值
```html
```
可以写成
```html
```
### Valueless Attributify
```html
```
转换后
```html
```
注意事项
* Valueless Attributify 默认是 `开启` 的，设置 `nonValuedAttribute` 为 `false` 关闭
* 默认提取所有 valueless 属性，可以设置 `ignoreNonValuedAttributes`，排除掉不需要的属性，避免生成多余的 `class`
* `ignoreNonValuedAttributes` 默认值 `['class']`
```html
```
转换后，会将 `my-prop` `is-top` 提取到 `class`中
```html
```
配置 `ignoreNonValuedAttributes` 忽略 `my-prop` `is-top`
```ts
import { attributifyToClass, defaultIgnoreNonValuedAttributes } from 'unplugin-attributify-to-class/vite'
// import { attributifyToClass, defaultIgnoreNonValuedAttributes } from 'unplugin-attributify-to-class/webpack'
attributifyToClass({
// 开启 valueless attributify
nonValuedAttribute: true,
// 忽略的非值属性列表
ignoreNonValuedAttributes: [...defaultIgnoreNonValuedAttributes, 'my-prop', 'is-top']
})
```
```html
```
### Properties Conflicts
如果属性模式的名称与元素或组件的属性冲突，可以针对属性模式添加 `prefix`
```html
This conflicts with links' `text` prop
```
设置 前缀匹配
```ts
attributifyToClass({
// 前缀属性默认值`un-`
prefix: 'un-',
// 仅匹配前缀属性
prefixedOnly: true,
})
```
```html
This conflicts with links' text prop
```
### transformEscape
> 针对 `uniappp vue2` `taro` `webpack插件`， `bg="[#333]"` 编译后变成 `bg- 333`，导致样式无法正常显示
> 将 `bg="[#333]"` 提前转义 `bg="[#333]" => bg--fl--w-333-fr`
* 默认开启，设置 `transformEscape`
* 通过 `transformRules` 设置自定义转换规则，[默认转换规则](https://github.com/MellowCo/unplugin-transform-class)
自定义转换规则
```ts
const myRules = {
'.': '-d-',
'/': '-s-',
':': '-c-',
'%': '-p-',
'!': '-e-',
'#': '-w-',
'(': '-bl-',
')': '-br-',
'[': '-fl-',
']': '-fr-',
'$': '-r-',
}
attributifyToClass({
transformEscape: true,
transformRules: myRules
})
```
### include exclude
> 自定义转换的目标
```ts
attributifyToClass({
exclude: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]my-folder[\\/]/],
include: [/\.vue$/, /\.vue\?vue/]
})
```
---
### classPrefix
> 为生成的class选择器添加前缀
```html
```
* 设置 `classPrefix`，生成的class选择器会加上前缀
```ts
const classPrefixExtract = extractorAttributify({
nonValuedAttribute: true,
classPrefix: 'li-',
})
```
转换后，会在生成的 `class` 中，添加前缀，bg-green => class="li-bg-green"
```html
```
---
### utils 导出
```ts
import { extractorAttributify } from 'unplugin-attributify-to-class/utils'
const options = {
// ...
}
const extractor = extractorAttributify(options)
const code = 'xxxxx'
const newCode = extractor(code)
```
相关链接
* [unocss-preset-weapp](https://github.com/MellowCo/unocss-preset-weapp) - UnoCSS 小程序预设