dcasia/mini-program-tailwind

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

sanmmm opened this issue · 5 comments

sanmmm commented

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

环境是： taro@3.4.12 版本

ItsRyanWu commented

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

GuoliangWang commented

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

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

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

GuoliangWang commented

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

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

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

shinyruo-nmsl commented

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