rpx 任意值颜色或长度单位二义性与解决方案
这是一个什么问题?
在不使用 weapp-tailwindcss
的情况下,你直接写这样的 rpx
写法:
<div class="text-[32rpx]"></div>
最终它会生成这样的 css
:
.text-\[32rpx\] {
color: 32rpx
}
为什么 rpx
这个好端端的长度单位,会变成颜色呢?
原因在于 rpx
不是一个标准的 W3C
规定的 CSS
长度单位,这是微信小程序自己定的 WXSS
单位。
而 tailwindcss
在针对具有二义性的任意值写法,例如以下单位:
text-[]
border-[]
bg-[]
outline-[]
ring-[]
这些会去校验括号内的任意值,是否为有效的 CSS
长度单位写法!
如果为 true
,则生成出长度 css
节点,反之则生成出颜色 css
节点:
/* text-[16px] */
.text-\[16px\] {
font-size: 16px
}
/* text-[#fafafa] */
.text-\[\#fafafa\] {
--tw-text-opacity: 1;
color: rgb(250 250 250 / var(--tw-text-opacity))
}
那么问题来了,rpx
在单位校验的时候,由于不认识这个单位,导致单位无效所有被分到了 颜色组,所以造成了这个问题!那么如何解决呢?
目前插件的 hack 方案
目前,我做了一个解决方案,我在 weapp-tailwindcss
植入了一个逻辑,使得插件可以通过分析 tailwindcss
运行时代码,来打上支持 rpx
单位的补丁,使得 tailwindcss
支持这样的写法,生成出长度单位的 css
。
这也是为什么要让大家去执行 weapp-tw patch
的原因。
这个解决方案直到最新的 3.3.3
版本,都是有效的。
然而,以后 tailwindcss
将会使用由 rust
编写的新引擎。
这时候这种 hack
方式将会失效,毕竟那种情况下都是二进制文件了!
那么为了预防这种可能出现的危机,我们应该怎么做呢?
解决方案
我们可以在使用这些带有二义性的单位的时候,通过 length
或 color
这种的前缀来指定它应该是什么,例如:
<div class="text-[22rpx]">...</div>
<div class="text-[#bada55]">...</div>
<!-- 变成下列的写法 -->
<div class="text-[length:22rpx]">...</div>
<div class="text-[color:#bada55]">...</div>
这样就通过指定的方式,直接跳过了长度单位校验,生成出长度单位的 css
了!
.text-\[length\:22rpx\] {
font-size: 22rpx
}
同样你可以使用这 2 个前缀来指定 css
变量的生成形式:
<!-- 生成 font-size -->
<div class="text-[length:var(--my-var)]">...</div>
<!-- 生成 color -->
<div class="text-[color:var(--my-var)]">...</div>