dcasia / mini-program-tailwind

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

带特殊符号([].!/)的样式没有正确转换,导致失效 #105

Closed jhxlhl1023 closed 1 year ago

jhxlhl1023 commented 1 year ago

描述这个问题: 存在部分文件的编译结果没有将 className 的特殊符号转换,原因已查明。 即:扫描和收集 rawVsModifiedPairs 的顺序,和 compilation.hooks.afterOptimizeAssets.tap 的 assets 顺序不一定一致 导致本应用于替换 文件A 的 pair,被用于替换了 文件B,造成替换结果混乱。 如: 文件A: className: "w-full p-[24px] m-[24px]" => 转换错误,不完全转换 "w-full p--24px- m-[24px]" 文件B: className: "w-full p-[24px]" => 转换错误,无变化

如何复现: 文件A: className: "w-full p-[24px] m-[24px]" 文件B: className: "w-full p-[24px]"

期待的结果: 文件A: className: "w-full p--24px- m--24px-" 文件B: className: "w-full p--24px-"

问题相关截图: 由于 rawVsModifiedPairs 匹配错乱,这里剩余了一些无法匹配的项。 image

本插件版本: 1.5.6

开发框架版本(三选一填写):

其余信息:

ItsRyanWu commented 1 year ago

谢谢 debug, 正在处理

ItsRyanWu commented 1 year ago

请升级至 1.5.7-beta.0 试试看呢?如果没有问题我就发布正式版了

jhxlhl1023 commented 1 year ago

经过测试是可以修复问题。

不过我想法是将 rawVsModifiedPair 根据 key.length 倒序来解决匹配错乱的问题~ 先长后短,应该就不会错乱了,暂且把想法放在这里,没试过,不知道可不可行。

rawVsModifiedPair.sort(([key0], [key1]) => key1.length - key0.length);
ItsRyanWu commented 1 year ago

经过测试是可以修复问题。

不过我想法是将 rawVsModifiedPair 根据 key.length 倒序来解决匹配错乱的问题~ 先长后短,应该就不会错乱了,暂且把想法放在这里,没试过,不知道可不可行。

rawVsModifiedPair.sort(([key0], [key1]) => key1.length - key0.length);

这似乎是一种更简单奏效的思路。我目前的方案是根据引号的开始和结束做了严格的开头至结尾的匹配,所以应该可以防止出现匹配错乱的问题了。