postcss自定义插件核心是操作ast节点而非字符串替换；必须用root.walkdecls遍历declaration、postcss-selector-parser处理selector、postcss-value-parser安全修改value，且严格遵循module.exports = postcss.plugin('name', () => (root) => { /逻辑/ })结构。
PostCSS自定义处理规则的核心不是写正则替换字符串，而是操作AST节点；写错节点遍历方式或漏掉root.walkDecls这类关键方法，插件就完全不触发。
为什么直接修改rule.selector会导致样式失效
直接赋值rule.selector = rule.selector.replace(/\./g, '_')看似简单，但PostCSS不会自动同步更新rule.selectors数组，也不会重新解析作用域。某些插件（比如postcss-selector-parser）依赖rule.selectors字段做后续处理，结果生成的CSS语法合法但语义错乱。
- 安全做法是用
postcss-selector-parser解析后再生成新字符串：先parser().astSync(rule.selector)，修改节点，再generate()回字符串 - 修改后必须显式调用
rule.raws.semicolon = true等字段，否则SourceMap可能偏移 - 如果只是简单字符替换且不涉及嵌套、伪类等复杂结构，可临时用
rule.selector直赋，但需在文档里注明限制条件
root.walkDecls比root.walk更精准的原因
绝大多数定制逻辑（单位转换、颜色校验、z-index归一化）都落在Declaration节点上。root.walk会命中注释、@import、@media等无关节点，容易引发意外行为。
-
root.walkDecls只遍历Declaration类型节点，避免类型判断开销 -
decl.value是原始字符串，直接赋值会丢失空格和换行信息；如需保留格式，必须用postcss-value-parser解析后再序列化 - 修改
decl.value后，建议调用decl.value = newValue而非decl.setPropertyAndValue，后者会重置raws导致SourceMap错位
插件函数必须返回(root) => {}结构
常见错误是把插件写成立即执行函数，或者在顶层调用root.walkDecls但没把它包进返回函数里。PostCSS只传AST，不传文件路径或原始内容，插件函数必须严格遵循接收root参数的签名。
- 正确写法：
module.exports = postcss.plugin('my-plugin', () => (root) => { root.walkDecls(/*...*/); }); -
postcss.plugin只是语法糖，本质仍是返回(root) => {}；插件名必须唯一，用于错误堆栈定位 - 不要在插件顶层用
async包裹整个函数——除非你明确处理Promise并返回result，否则PostCSS无法等待异步完成
最常被忽略的是节点脱离原树的问题：用node.remove()或node.replaceWith()后，若没检查node.parent是否还存在，可能导致后续遍历跳过兄弟节点；尤其在嵌套Rule中操作Declaration时，这个细节极易引发静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
