PostCSS需插件支持色彩函数转换；postcss-color-functional-notation是官方唯一支持rgb()/hsl()/color-mix()/color-contrast()的插件，但必须配合postcss-preset-env显式启用color-functional-notation并设stage:2，且color-mix()需额外插件、color-contrast()无法真正降级。
PostCSS 本身不直接转换色彩函数，它靠插件实现；postcss-color-functional-notation 是唯一能处理 rgb()、hsl()、color-mix()、color-contrast() 等现代语法的官方插件，但必须配合 postcss-preset-env 正确启用。
为什么直接写 rgb(255 0 0) 会报错或不生效
浏览器原生支持空格分隔的 rgb(255 0 0)（无逗号），但仅限于已广泛支持的函数（如 Chrome 111+、Firefox 117+）。低版本浏览器仍需逗号语法 rgb(255, 0, 0)，且不识别 color-mix() 或 color-contrast()。PostCSS 不是运行时引擎，它只在构建时做语法重写 —— 如果没配对插件，这些函数会被原样输出，然后被老浏览器静默忽略或报解析错误。
- 常见错误现象：
color: rgb(255 0 0);在 IE11 或 Safari 15.6 下显示为 transparent 或 fallback 颜色 - 使用场景：你正在用
oklch()定义主题色，或用color-contrast()做文字自适应，但 CI 构建后样式失效 - 关键点：
postcss-preset-env默认不启用 Stage 2+ 的色彩特性，必须显式开启color-functional-notation
怎样配置 postcss-preset-env 支持 color-mix() 和 color-contrast()
这两个函数属于 CSS Color Level 4，目前处于 Stage 2，postcss-preset-env 默认不处理。你需要手动启用对应特性，并注意它们的转换限制：
-
color-mix()可被降级为rgba()近似值（依赖插件postcss-color-mix，但该插件未被 preset-env 内置，需单独安装） -
color-contrast()无法真正“降级”，插件只能警告或跳过；实际项目中应搭配 JS fallback 或限定使用范围（如仅用于支持的现代浏览器） - 配置示例（
postcss.config.js）：
module.exports = {
plugins: [
require('postcss-preset-env')({
features: {
'color-functional-notation': true,
// 注意：color-mix 和 color-contrast 不在此键下控制
},
// stage 至少设为 2，否则 color-functional-notation 不生效
stage: 2
})
]
}
⚠️ 单独启用 color-functional-notation 只能转换基础函数（rgb/hsl/hwb 的空格语法），对 color-mix() 无效 —— 它需要额外插件，且当前生态中尚无稳定、广泛兼容的自动降级方案。
立即学习“前端免费学习笔记（深入）”；
哪些色彩函数能被安全降级，哪些必须放弃
不是所有现代色彩函数都适合 PostCSS 转换。能否降级取决于函数语义是否可静态推导：
- ✅ 安全降级：
rgb(255 0 0)→rgb(255, 0, 0)；hsl(226 100% 50%)→hsl(226, 100%, 50%)；oklch(0.8 0.2 240)→ 保留（不降级，仅检查语法） - ⚠️ 有条件支持：
color-mix(in srgb, red 50%, blue 50%)—— 可转为近似rgba(128, 0, 128, 1)，但精度丢失，且仅支持srgb空间 - ❌ 无法降级：
color-contrast(var(--bg), #000 #fff)、oklch(from var(--primary) l c h)—— 涉及变量计算或动态感知，PostCSS AST 无法求值，构建时只能报错或跳过 - 性能提示：启用
color-functional-notation对构建速度影响极小；但若大量使用color-mix()并启用模拟降级，会显著增加处理时间
真正容易被忽略的是：PostCSS 插件只处理“静态已知值”。一旦色彩函数里出现 var(--theme-color)、calc() 或相对语法（如 from var(--x)），几乎所有插件都会停手 —— 它们不是 CSS 解释器，没有运行时上下文。这类逻辑必须交给 CSS 变量 + 媒体查询，或 JS 控制，别指望 PostCSS 替你算出来。
