dcasia / mini-program-tailwind

让你的小程序用上原汁原味的 Tailwind/Windi CSS
https://www.craft.do/s/Wx2f9cjGwyZYOx
499 stars 41 forks source link

feat: add optional "customAttributes" #75

Closed uxuip closed 1 year ago

uxuip commented 2 years ago

起因: 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 commented 2 years ago

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

ItsRyanWu commented 1 year ago

Thanks for your contribution, this is an awesome feature!