search

dcasia / mini-program-tailwind

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

方括号语法编译转换产物错误 #68

Open sanmmm opened 2 years ago

sanmmm commented 2 years ago

比如 px-[16px] 没有按照预期编译转换成 px--16px- 而是转换成了 px- 16px 。 但是这种情况是偶然出现。出现的必要但非充分条件是 另外某个代码文件里面className里面也使用了同样的类名 px-[16px]。 目前 px/py/ml 等都有出现上述情况。

环境是： taro@3.4.12 版本

ItsRyanWu commented 2 years ago

可以提供一个例子让我复现一下吗？

GuoliangWang commented 2 years ago

Taro vue3 组件中有动态class类似这样会出问题 :class="w-[${width > 100 ? 100 : width}px] h-[${height}px]" 看来不能采用这种高端用法了😄。 我调试看 插件会这样替换class classFieldsChanges [ [ ' w-[100px] h-[100px]', ' w--100px- h--100px-' ], [ 'w-[', 'w--' ], [ 'px] h-[', 'px- h--' ], [ 'px]', 'px-' ] ]

ItsRyanWu commented 2 years ago

:class="w-[${width > 100 ? 100 : width}px] h-[${height}px]"

@GuoliangWang 这种用字符串模版动态插值的方法本身就是不会被 Tailwind/Windi CSS 支持的，因为具体的值只会在运行时生成。你这个场景下的问题和本插件无关，唯一能做的就是规避该用法。

GuoliangWang commented 2 years ago

:class="w-[${width > 100 ? 100 : width}px] h-[${height}px]"

@GuoliangWang 这种用字符串模版动态插值的方法本身就是不会被 Tailwind/Windi CSS 支持的，因为具体的值只会在运行时生成。你这个场景下的问题和本插件无关，唯一能做的就是规避该用法。

但是能不能别影响其他的class啊😄

shinyruo-nmsl commented 3 months ago

我也遇到了类似的问题，导致样式不能生效： imageimage