postcss本身不解析自定义css函数，必须用postcss-value-parser安全解析ast中的function节点，提取参数、注入变量、计算结果后通过stringify和replacewith替换，且插件须置于postcss-custom-properties之后、autoprefixer之前。
PostCSS 本身不解析自定义 CSS 函数（如 calc() 以外的 my-fn()），必须靠插件在 AST 层遍历并手动识别、计算、替换 —— 否则这些函数会原样输出，浏览器直接报错或忽略。
如何识别并提取自定义函数调用
不能靠正则匹配 value 字符串，否则会破坏括号嵌套、引号、注释等结构。必须用 postcss-value-parser 安全解析：
-
postcss-value-parser能正确区分函数节点、括号层级、逗号分隔参数，比如color: my-fn(var(--a), 10px, rgba(0,0,0,0.5)) - 遍历所有
Declaration节点后，对decl.value调用postcss-value-parser(decl.value) - 再递归 walk 每个节点，用
node.type === 'function'判断是否为函数调用，并检查node.value === 'my-fn' - 注意：
node.nodes是参数列表，不是字符串，需再次 parse 单个参数才能取值
如何安全替换函数为计算结果
替换不能直接拼字符串，否则 SourceMap 错位、空格丢失、注释消失。正确做法是用 postcss-value-parser 修改后重新生成：
- 拿到目标函数节点后，调用
node.nodes.forEach(...)提取参数原始值（如node.nodes[0].value可能是var(--a)） - 若参数含
var()，需先走一遍变量注入逻辑（比如读取:root声明或外部 JSON），否则无法计算 - 计算完结果（如
'#ff6b35'或'24px'），用postcss-value-parser的stringify()生成合规字符串 - 最后调用
node.replaceWith(postcss-value-parser.string({ value: result }))，而非直接改decl.value
为什么 calc() 不需要你写插件，但 color-mix() 需要
calc() 是浏览器原生支持的函数，PostCSS 插件（如 postcss-preset-env）只负责降级兼容；而 color-mix()、hwb()、oklch() 等新函数在旧浏览器中无实现，且其参数可能含变量引用，必须在构建期展开：
-
postcss-preset-env会识别color-mix(in srgb, var(--a), var(--b))并尝试转成rgb()，但它不会处理未声明的var()—— 这部分得你自己的插件先完成变量注入 - 如果你写了
my-gradient(45deg, #f00, #00f)，PostCSS 完全不认识，连语法树都不会标记为“函数”，必须靠postcss-value-parser手动捞出来 - 插件顺序至关重要：必须在
postcss-custom-properties之后（确保var()已替换）、在autoprefixer之前（避免前缀干扰函数名）
最容易被忽略的是函数参数里的单位隐式转换和颜色空间校验 —— 比如 my-lighten(hsl(240, 100%, 50%), 20%) 中的 20% 是相对亮度还是绝对值，这个语义必须由你的插件明确定义并执行，PostCSS 不提供任何默认行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
