feat(postcss): 添加插件移除微信小程序不兼容Tailwind规则

- 实现 postcss-remove-wxss-incompatible 插件
- 移除反斜杠转义的重要性修饰符类选择器(.\!xxx)
- 删除依赖 :not 和兄弟选择器的 .space-[x|y]-* 规则
- 删除依赖 :not 和兄弟选择器的 .divide-[x|y]-* 规则
- 解决微信小程序 WXSS 不支持的 CSS 特性问题
This commit is contained in:
2026-06-30 16:38:54 +08:00
parent e4524154e0
commit 5f71295aae
9 changed files with 114 additions and 20 deletions

View File

@@ -0,0 +1,46 @@
/**
* PostCSS 插件:移除 WXSS 不兼容的 Tailwind CSS 规则
*
* 微信小程序 WXSS 不支持以下 CSS 特性:
* 1. 反斜杠转义的特殊字符(如 .\!visible—— !important 修饰符
* 2. :not() 伪类 + ~ 兄弟选择器组合(如 .space-y-4 > :not([hidden]) ~ :not([hidden])
* 3. CSS 自定义属性 / CSS 变量(如 --tw-space-y-reverse
* 4. 嵌套 calc()(如 calc(0.5rem * calc(1 - var(--tw-space-y-reverse)))
*
* 该插件移除以下类型的 Tailwind CSS 规则:
* - .\!xxx 类选择器important 修饰符)
* - .space-[x|y]-* 规则(间距布局,依赖 :not + ~ + CSS 变量 + 嵌套 calc
* - .divide-[x|y]-* 规则(分割线布局,同样依赖不兼容特性)
*/
/** @type {import('postcss').PluginCreator} */
module.exports = (options = {}) => {
return {
postcssPlugin: 'postcss-remove-wxss-incompatible',
Rule(rule) {
const selector = rule.selector
// 1) 移除 .\!xxx 类选择器Tailwind important 修饰符,反斜杠转义的 ! 不兼容 WXSS
const selectors = selector.split(',')
const hasEscapedImportant = selectors.some(s => /\.\\!/.test(s.trim()))
if (hasEscapedImportant) {
rule.remove()
return
}
// 2) 移除 .space-[x|y]-* 规则(依赖 :not + ~ 兄弟组合器WXSS 不兼容)
if (/\.space-[xy]-/.test(selector)) {
rule.remove()
return
}
// 3) 移除 .divide-[x|y]-* 规则(同上,依赖 :not + ~
if (/\.divide-[xy]-/.test(selector)) {
rule.remove()
return
}
}
}
}
module.exports.postcss = true