主流浏览器已原生支持color-mix()、color-contrast()、oklch()等函数，PostCSS颜色插件不仅冗余，还会干扰原生能力、掩盖兼容性问题，并因无法模拟运行时上下文导致深色模式失效或fallback错误。
color-mix()、color-contrast()、oklch() 这些函数已在主流浏览器原生支持，PostCSS 插件不再是“提前用未来语法”的权宜之计，而是冗余甚至有害的构建环节。
PostCSS 颜色插件现在会干扰原生能力
比如 postcss-color-mod-function 仍会把 color-mod(var(--c) lightness(-10%)) 编译成固定 rgb(…) 值，而现代浏览器本可直接运行 color(lch, var(--c) l(85%)) 并响应变量变化。插件越积极，越掩盖真实兼容性问题。
常见错误现象：
- 开发者写了
color(oklch, var(--primary) l(70%))，但插件误判为旧语法，强行编译成静态值，导致深色模式切换时文字颜色卡死 -
postcss-preset-env默认启用color-function，却没关掉已废弃的color-mod支持，造成双重转换
原生函数依赖运行时上下文，插件无法模拟
color-contrast() 必须读取当前元素实际渲染的背景色（可能来自 background: linear-gradient(...) 或多个层叠），而 PostCSS 在构建时根本不知道最终样式如何计算，所有“模拟 fallback”都是猜的。
使用场景差异：
立即学习“前端免费学习笔记（深入）”；
- 你需要根据
prefers-color-scheme动态调整按钮悬停色 → 用color(oklch, var(--brand) l(60%) c(80%))，运行时生效 - 你只要一组固定灰阶用于图标 → 用 SCSS 的
lighten($gray, 10%)编译出确定值，更轻量也更可控
兼容性策略已从“降级”转向“渐进启用”
过去靠 PostCSS 把新函数转成旧语法，现在推荐用 @supports + 显式 fallback，逻辑更清晰，调试更直接：
button {
color: color-contrast(#333, #fff #000 AA);
@supports not (color-contrast: ) {
color: #000;
}
}
注意：@supports (color-mix: ) 在 Safari 16.3 及更早版本会直接解析失败，整条规则被跳过，必须写成 @supports not (color-mix: ) 才安全。
容易踩的坑：
- 误以为
postcss-color-mix能处理变量，其实它只认字面量如red 60%，遇到var(--accent) 60%直接忽略 - 在
color-mix(in srgb, …)里混入oklch()值，浏览器报错，插件也无法降级 - 开启
preserve: true导致生成两条 background 声明，旧浏览器取后一条，新浏览器反而可能被层叠顺序误导
