赵忠林
5f71295aae
- 实现 postcss-remove-wxss-incompatible 插件 - 移除反斜杠转义的重要性修饰符类选择器（.\!xxx） - 删除依赖 :not 和兄弟选择器的 .space-[x|y]-* 规则 - 删除依赖 :not 和兄弟选择器的 .divide-[x|y]-* 规则 - 解决微信小程序 WXSS 不支持的 CSS 特性问题
47 lines
1.6 KiB
JavaScript
47 lines
1.6 KiB
JavaScript
/**
|
||
* 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
|