mini-program-tailwind
mini-program-tailwind copied to clipboard
feat: add optional "customAttributes"
起因: vant 小程序组件库有很多自定义class,如 button,但是插件只能转换class
灵感: 在 @vitejs/plugin-vue2 插件中,有一个 transformAssetUrls 配置,可以配置需要转换的attribute
实现: 为了写起来简单方便,选择使用通配符或字符串匹配attribute,使用到的库 micromatch 对象key用于匹配tag,值用于匹配attribute,多个时使用数组
// 配置
{
utilitiesSettings: {
customAttributes: {
'van-*': 'custom-class',
'van-image': ['image-class', 'loading-class', 'error-class'],
},
},
}
输入:
<van-image class="w-[0.5px]" custom-class="w-[0.5px]" image-class="w-[0.5px]" other-attr="w-[0.5px]"></van-image>
输出:
<van-image class="w--0-d-5px-" custom-class="w--0-d-5px-" image-class="w--0-d-5px-" other-attr="w-[0.5px]"></van-image>
如果不想引入实现通配符的库,也可以改用正则匹配
Thanks for your contribution, this is an awesome feature!