esbuild CSS压缩默认启用minify时自动移除空格、注释等，但不转译CSS特性；cssTarget需单独配置以控制rgba()、gap等特性的兼容性降级，且默认跟随target，易导致兼容问题。
esbuild CSS压缩默认行为是什么
esbuild 的 minify 选项对 CSS 是「开箱即用」的：只要启用 minify: true，它就会自动压缩 CSS（移除空格、注释、合并重复规则等），且不依赖额外插件。但注意——它不做转译，比如不会把 rgba(0,0,0,0.5) 改成 #0008，也不会把 gap 属性降级为 margin。压缩 ≠ 兼容性处理。
target 和 cssTarget 必须分开配
这是最容易踩坑的地方：很多人以为设了 target: ['chrome61'] 就万事大吉，结果发现低版本安卓 WebView 里 #RGBA 颜色炸了。因为 esbuild 的 JavaScript 转译和 CSS 处理是两套逻辑，cssTarget 才真正控制 CSS 特性的降级边界。
-
target控制 JS 语法（如箭头函数、可选链）是否转译 -
cssTarget控制 CSS 特性（如rgba()、grid、clamp()）是否被重写或规避 - 两者可以不同：例如
target: 'es2017'+cssTarget: 'chrome61'是常见组合，JS 保留现代语法，CSS 向后兼容到 Chrome 61（2018 年）
哪些 CSS 特性会因 cssTarget 变化而被处理
esbuild 内置的 CSS 兼容表（css_table.go）决定了具体行为。典型影响包括：
-
rgba()→ 当cssTarget≤chrome61或safari11时，会被转为rgb() + opacity或十六进制近似值（取决于上下文） -
hsl()、hsla()在老 Safari 中可能被转为rgb() -
gap在 Flexbox 中若目标不支持，esbuild 不会自动 fallback（需手动加margin），但它会拒绝输出不兼容的 Gridgap -
@supports规则本身会被保留，但内部声明可能被按cssTarget过滤
没有显式设置 cssTarget 时，它默认跟随 target；但一旦 target 是语言标准（如 es2020），cssTarget 就退化为最宽泛的支持范围，容易漏掉 CSS 兼容问题。
立即学习“前端免费学习笔记（深入）”；
实际配置示例与验证方式
推荐在 esbuild.build() 或 Vite 的 build 配置中显式声明：
esbuild.build({
entryPoints: ['src/index.js'],
bundle: true,
minify: true,
target: ['es2017'],
cssTarget: ['chrome61', 'firefox63', 'safari11.1'],
outfile: 'dist/bundle.js'
})
验证是否生效：
- 检查输出 CSS 中是否还有
#RGBA十六进制色值（如有，说明cssTarget没起作用或设得太高） - 用浏览器 DevTools 的「Rendering」面板开启「Emulate CSS media features」，模拟旧版渲染引擎看是否样式错乱
- 注意：esbuild 不生成 polyfill，
cssTarget只做安全降级，不补功能（如sticky不支持就是不支持）
真正麻烦的不是压缩，而是「压缩后还保持兼容」——这要求你清楚知道目标环境的真实能力边界，而不是只盯着 JS 语法。一个 cssTarget 配错，就可能让整个页面颜色失真或布局崩溃。
