css attributify mode to class, support use in vite, rollup, webpack
npm install unplugin-attributify-to-class
English | 简体中文
unplugin-unocss-attributify-wechat 改名为 unplugin-attributify-to-class
@unocss/preset-attributify
html
bg="blue-400">
button
`
生成后的css
`css
[bg~="blue-400"] {
--un-bg-opacity: 1;
background-color: rgba(96,165,250,var(--un-bg-opacity));
}
`
小程序不支持属性选择器 [bg~="blue-400"] ，微信文档
---
使用该插件
`html
bg="blue-400">
button
`
转换后
`html
bg="blue-400"
class="bg-blue-400">
button
`
---
安装
`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(),
],
},
}
`
如何使用
$3
`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
}
`
$3
相关介绍见 attributify-mode
`html
`
默认转换的属性列表为 ['bg', 'flex', 'grid', 'border', 'text', 'font', 'class', 'className', 'p', 'm', 'animate']
`html
text="sm white"
font="mono light"
p="y-2 x-4"
my-attr="y-1 x-2 sm"
>
Button
`
`html
text="sm white"
font="mono light"
p="y-2 x-4"
my-attr="y-1 x-2 sm"
class="text-sm text-white font-mono font-light p-y-2 p-x-4"
>
Button
`
使用 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
text="sm white"
font="mono light"
p="y-2 x-4"
my-attr="y-1 x-2 sm"
class="text-sm text-white font-mono font-light p-y-2 p-x-4 my-attr-y-1 my-attr-x-2 my-attr-sm ">
Button
`
$3
对于 flex、grid、border 等具有与前缀相同的实用程序，将提供一个特殊的 ~ 值
`html
`
可以写成
`html
`
$3
`html
`
转换后
`html
m-2 rounded text-teal-400
class="m-2 rounded text-teal-400"
/>
`
注意事项
* Valueless Attributify 默认是 开启 的，设置 nonValuedAttribute 为 false 关闭
* 默认提取所有 valueless 属性，可以设置 ignoreNonValuedAttributes，排除掉不需要的属性，避免生成多余的 class
* ignoreNonValuedAttributes 默认值 ['class']
`html
`
转换后，会将 my-prop is-top 提取到 class中
`html
m-2 rounded text-teal-400 my-prop is-top
class="m-2 rounded text-teal-400 my-prop is-top"
/>
`
配置 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
m-2 rounded text-teal-400 my-prop is-top
class="m-2 rounded text-teal-400"
/>
`
$3
如果属性模式的名称与元素或组件的属性冲突，可以针对属性模式添加 prefix
`html
text="red"
bg-red
un-text="blue"
un-bg-blue
>
This conflicts with links' text prop
`
设置 前缀匹配
`ts
attributifyToClass({
// 前缀属性默认值un-
prefix: 'un-',
// 仅匹配前缀属性
prefixedOnly: true,
})
`
转换后
`html
text="red"
bg-red
un-text="blue"
un-bg-blue
class="text-blue bg-blue"
>
This conflicts with links' text prop
`
$3
> 针对 uniappp vue2 taro webpack插件， bg="[#333]" 编译后变成 bg- 333，导致样式无法正常显示
> 将 bg="[#333]" 提前转义 bg="[#333]" => bg--fl--w-333-fr
* 默认开启，设置 transformEscape
* 通过 transformRules 设置自定义转换规则，默认转换规则
自定义转换规则
`ts
const myRules = {
'.': '-d-',
'/': '-s-',
':': '-c-',
'%': '-p-',
'!': '-e-',
'#': '-w-',
'(': '-bl-',
')': '-br-',
'[': '-fl-',
']': '-fr-',
'$': '-r-',
}
attributifyToClass({
transformEscape: true,
transformRules: myRules
})
`
$3
> 自定义转换的目标
`ts
attributifyToClass({
exclude: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]my-folder[\\/]/],
include: [/\.vue$/, /\.vue\?vue/]
})
`
---
$3
> 为生成的class选择器添加前缀
`html
bg-green bg-red
text="center left"
class="bg-green bg-red text-center text-left"
>
`
* 设置 classPrefix，生成的class选择器会加上前缀
`ts
const classPrefixExtract = extractorAttributify({
nonValuedAttribute: true,
classPrefix: 'li-',
})
`
转换后，会在生成的 class 中，添加前缀，bg-green => class="li-bg-green"
`html
bg-green bg-red
text="center left"
class="li-bg-green li-bg-red li-text-center li-text-left"
>
`
---
$3
`ts
import { extractorAttributify } from 'unplugin-attributify-to-class/utils'
const options = {
// ...
}
const extractor = extractorAttributify(options)
const code = 'xxxxx'
const newCode = extractor(code)
``