mini-program-tailwind icon indicating copy to clipboard operation
mini-program-tailwind copied to clipboard

feat: add optional "customAttributes"

Open uxuip opened this issue 3 years ago • 1 comments

起因: 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>

uxuip avatar Sep 21 '22 10:09 uxuip

如果不想引入实现通配符的库,也可以改用正则匹配

uxuip avatar Sep 21 '22 10:09 uxuip

Thanks for your contribution, this is an awesome feature!

ItsRyanWu avatar Apr 21 '23 07:04 ItsRyanWu