Closed sonofmagic closed 9 months ago
在 tailwindcss
h5 环境中, space-y-4
这类的类名默认会生成这样的选择器: .space-y-4>:not([hidden])~:not([hidden])
不过很遗憾,这种选择器在小程序里会直接 挂掉,因为小程序中 ~
(后续兄弟选择器) 是非常受限的,包括 .space-y-2>view ~ view
这种选择也会在小程序里面之间挂掉,所以不得以使用了 +
(接续兄弟组合器),这2个选择的区别主要在于后一个元素是否紧挨着前一个元素。类似于 .space-y-2>view + view
,但是这样又存在缺陷了,也就是说 必须是紧挨着的 view
才会生效, 所以:
<view class="space-y-2">
<view>view0</view>
<view>view1</view>
<text>text0</text>
<view>view2</view>
<text>text1</text>
</view>
只有 view1
会生效 mt-2
的距离,cssChildCombinatorReplaceValue
是一个解决方案,你可以这样设置: cssChildCombinatorReplaceValue: ['view', 'text']
(其实没有必要把 'text' 加入进来,因为它默认是 inline
的,在布局方面给上下外边距无效,除非你改成 block/inline-block
这种,那还不如使用 view
呢), 它会生成这样的选择器:
.space-y-2>view + view,.space-y-2>view + text,.space-y-2>text + view,.space-y-2>text + text
什么!为什么这么长?? 因为只有这样才能让 view, text 标签不论怎么排列都有效,这就是代价,假如你传入更多选项,它还会变得更长:
cssChildCombinatorReplaceValue: ['view', 'text', '.ice']
: .space-y-2>view:not(.weapp-tw-ig) + view:not(.weapp-tw-ig),.space-y-2>view:not(.weapp-tw-ig) + text:not(.weapp-tw-ig),.space-y-2>view:not(.weapp-tw-ig) + .ice,.space-y-2>text:not(.weapp-tw-ig) + view:not(.weapp-tw-ig),.space-y-2>text:not(.weapp-tw-ig) + text:not(.weapp-tw-ig),.space-y-2>text:not(.weapp-tw-ig) + .ice,.space-y-2>.ice + view:not(.weapp-tw-ig),.space-y-2>.ice + text:not(.weapp-tw-ig),.space-y-2>.ice + .ice
那只传入一个 ':not(n)'
可以嘛,不行 .space-y-2>:not(n) + :not(n)
之间报错挂掉了。因为 >
在小程序里面也存在着诸多限制,后面之间跟伪类会挂。
v3 版本改动前瞻
将会有什么改动?
v3 版本主要是删去一些过时的功能,配置项,同时会改变插件的默认值,使得整体插件变得更易用,更容易安装 假如你没有用到什么自定义配置,那么恭喜你,完全可以平滑升级上来。
配置项改动
删除的配置项
replaceUniversalSelectorWith
选项,使用cssSelectorReplacement.universal
来代替minifiedJs
选项,现在完全遵从用户的配置,用户压缩就压缩,反之亦然jsEscapeStrategy
选项,现在默认只有一种模式replace
/ 不再提供regenerate
模式customReplaceDictionary
的complex
模式,只内置simple
模式 (你如果还要complex
模式 ,可以从'@weapp-core/escape'
引入,再传入customReplaceDictionary
配置项即可)cssMatcher
/htmlMatcher
/jsMatcher
/mainCssChunkMatcher
/wxsMatcher
不再能够传入glob
表达式(**/*.html
这种),现在都是传入一个方法:(name: string) => boolean
cssPreflightRange
只存在一种模式,为all
, 之前的view
选项交给cssSelectorReplacement.universal
进行托管增加的配置项
rem2rpx
: typerem2rpx?: boolean | rem2rpxOptions
rem 转 rpx 配置,默认为 false,不开启,可传入配置项,配置项见 https://www.npmjs.com/package/postcss-rem-to-responsive-pixel 这个配置项代表插件内置了 postcss-rem-to-responsive-pixel ,不过默认不开启,传入一个 true 可以开启:这样的配置,当然你也可以传入
rem2rpxOptions
这样一个 object为什么默认不开启?
postcss-rem-to-responsive-pixel
是外置的,所以开发者可以自由的决定它的加载顺序,不像内置之后都是我决定的。不过内置好处也有,就是开箱即用增强的配置项
cssChildCombinatorReplaceValue
,cssSelectorReplacement.root
,cssSelectorReplacement.universal
现在都可以接受字符串数组了,它们可以自动展开,防止选择器格式化错误问题修改的默认值
cssPreflightRange
从'view'
变为undefined
, 现在all
的作用变成了在tailwindcss
变量注入区域的选择器,添加一个:not(not)
的选择器作为全局选择器的替代cssSelectorReplacement.universal
从'view'
变为['view', 'text']
, 这意味着*
选择器会被展开成view,text
以及对应方式cssChildCombinatorReplaceValue
从'view + view'
变为['view']
replaceUniversalSelectorWith
,jsEscapeStrategy
选项被删除现在选项合并,数组默认行为变为覆盖,原先是合并: