mini-program-tailwind
mini-program-tailwind copied to clipboard
dcasia
方括号语法编译转换产物错误
比如 px-[16px] 没有按照预期编译转换成 px--16px- 而是转换成了 px- 16px 。 但是这种情况是偶然出现。出现的必要但非充分条件是 另外某个代码文件里面className里面也使用了同样的类名 px-[16px]。 目前 px/py/ml 等都有出现上述情况。
环境是： [email protected] 版本
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-' ]
]
:class="
w-[${width > 100 ? 100 : width}px] h-[${height}px]"
@GuoliangWang 这种用字符串模版动态插值的方法本身就是不会被 Tailwind/Windi CSS 支持的，因为具体的值只会在运行时生成。你这个场景下的问题和本插件无关，唯一能做的就是规避该用法。
:class="
w-[${width > 100 ? 100 : width}px] h-[${height}px]"@GuoliangWang 这种用字符串模版动态插值的方法本身就是不会被 Tailwind/Windi CSS 支持的，因为具体的值只会在运行时生成。你这个场景下的问题和本插件无关，唯一能做的就是规避该用法。
但是能不能别影响其他的class啊😄