postcss-preset-env 是当前最可靠的颜色语法转换方案，因 postcss-cssnext 已废弃且混用会引发 ast 冲突；其颜色功能需显式设 stage: 3 并单独启用 features，转换结果严格依赖 .browserslistrc 配置。
postcss-preset-env 是当前最可靠的颜色语法转换方案，postcss-cssnext 已废弃，混用会引发冲突。
为什么不能直接用 postcss-cssnext
它早在 2021 年就进入维护模式，2023 年后不再更新；其颜色函数（如 color()、hwb()）已被 postcss-preset-env 完整继承并重构。项目里同时装两者，会导致 AST 处理重复或覆盖——比如同一个 color(red alpha(20%)) 可能被转两次，生成无效的 rgba() 嵌套或丢失透明度。
postcss-preset-env 中颜色功能必须显式启用 stage
默认 stage: 2 不处理 color()、hwb()、带斜杠的 rgb()（如 rgb(255 0 0 / 50%)）等特性，它们属于 CSS Color Module Level 4，规范状态为 stage 3。
- 必须在配置中设
stage: 3，否则这些语法原样输出，现代浏览器能认，但旧浏览器直接失效 - 即使开了
stage: 3，某些功能仍需单独打开：例如features: { 'color-function': true }才激活color()解析 -
hwb()和新rgb()/hsl()语法由color-mod-function和color-hex-alpha等子功能控制，不依赖全局 stage
转换结果取决于 .browserslistrc，不是“越新越好”
比如你写了 background: hwb(200 10% 20%)，插件不会无脑转成 rgba()——它查 .browserslistrc，发现目标含 Chrome 90+，而 Chrome 90 原生支持 hwb()，那就保留原样；若目标含 Firefox 88（不支持），才会降级为近似 rgb() 值。
- 务必用独立
.browserslistrc文件，内容如：last 2 versions、> 1%、not dead - 执行
npx browserslist验证实际生效范围，避免 package.json 里写错位置导致配置静默失效 - IE11 等已淘汰环境不会触发
hwb()或color()转换，因为无合理 fallback 方案——这时应主动避免使用
变量 + 颜色函数组合时注意解析顺序
CSS 自定义属性（--main: red）和 color(var(--main) alpha(30%)) 能一起用，但转换链是：先由 postcss-custom-properties（内置在 postcss-preset-env 中）展开变量，再交给 color-function 处理。如果变量值本身含空格或括号（如 --c: rgb(100 200 50)），可能被提前截断。
- 安全写法：变量只存基础值（
red、#333、hsl(200 50% 50%)），复杂计算留给color() - 避免嵌套函数调用，如
color(color(red l(20%)) alpha(50%))—— 多数插件不支持递归解析 - 调试时加
verbose: true到插件配置，看控制台输出哪一步卡住
browserslist 的精确性与 stage 的显式声明。一个没生效的 hwb() 降级，往往不是插件装错了，而是 .browserslistrc 没被读到，或者 stage 还卡在默认的 2。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
