postcss、vite、webpack重写rgb()/hsl()新语法，是为兼容旧浏览器自动降级为rgba()/hsla()，非多此一举，而是通过颜色降级插件（如postcss-color-function）实现静默兜底。
构建工具自动转换现代颜色格式，不是“多此一举”，而是为了在不牺牲开发体验的前提下，守住浏览器兼容底线。它本质上是在 rgb(255 0 0 / 0.5) 和 rgba(255, 0, 0, 0.5) 之间做一次静默兜底。
为什么 PostCSS、Vite、Webpack 会重写 rgb() 和 hsl()？
因为这些工具默认启用了 CSS 颜色降级插件（如 postcss-color-function 或 postcss-env-function），它们识别到现代空格分隔语法或斜杠 alpha 语法后，会主动回退为传统逗号+rgba()/hsla() 形式。
- 目标不是“让新写法变旧”，而是避免用户手动写两套颜色声明
- 仅当检测到目标浏览器不支持时才触发（例如
browserslist中包含Chrome ） - 转换发生在构建阶段，不影响源码可读性——你仍可放心写
hsl(226 100% 50% / 0.8) - 不转换
color-mix()或color-contrast()：这类函数目前无成熟降级方案，工具通常直接报错或忽略
color-contrast() 为什么几乎从不被转换？
它没有等效的传统 CSS 替代写法。构建工具遇到 color: color-contrast(var(--bg) vs #000, #fff to AA);，要么跳过，要么抛警告，不会尝试模拟逻辑。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 原因很实在：对比度计算依赖 WCAG 公式和运行时背景值，JS 都难 100% 模拟，更别说静态构建时
- 部分工具（如 modern-normalize 插件）会加
@supports包裹，但不会重写函数本身 - 如果你看到它被“转成 JS”，那大概率是某套 UI 库的 runtime 主题层在接管，不是构建工具干的
如何确认某个颜色写法是否被构建工具动过？
看最终产物 CSS 文件里对应行的实际输出，而不是源码或 dev server 的热更新结果。
- 检查构建后
dist/下的 CSS：如果写了rgb(255 0 0 / 0.5)却看到rgba(255, 0, 0, 0.5)，说明降级生效 - 在
vite.config.ts中临时禁用css.postcss或设build.cssTarget: 'chrome112'，再构建对比 - 注意：Sass/Less 编译器（如
sassCLI）默认不处理颜色函数，它们只管变量和嵌套，降级靠后续 PostCSS
真正容易被忽略的点是：构建工具只管语法兼容性，不管语义合理性。比如你把 --color-text-emphasis 设成 color-mix(in srgb, red 70%, blue 30%)，工具照常编译，但深色模式下这个混合色并不会自动反转——逻辑解耦还得靠你自己设计变量体系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
