必须用 postcss-preset-env 而非 postcss-cssnext，因后者已于2019年归档废弃，不再维护，且 browserslist 数据陈旧，无法正确支持 color-mix()、has()、@container 等新特性及现代浏览器前缀。
直接用 postcss-preset-env，别再装 postcss-cssnext —— 后者早在 2019 年就已归档，现在所有维护、特性更新、浏览器数据同步都由 postcss-preset-env 承担。
为什么必须用 postcss-preset-env 而不是 postcss-cssnext
postcss-cssnext 是历史项目，npm 上标记为 deprecated，其 GitHub 仓库已归档（Archived），不再接收 PR 或修复。它依赖的 browserslist 数据陈旧，对 Chrome 120+、Safari 17+、Firefox ESR 115+ 等新版本缺乏识别能力，会导致：
-
color-mix()、has()、@container等 Stage 3+ 特性无法启用或错误降级 -
custom-properties的 fallback 行为与实际浏览器不一致（比如未正确处理var(--x, red)中的嵌套 fallback） - Autoprefixer 部分前缀漏加（如
aspect-ratio在 Safari 15.4–16.3 需要-webkit-aspect-ratio，旧版 cssnext 不识别）
postcss.config.js 最小可用配置
只需三行，不依赖额外插件声明：
module.exports = {
plugins: [
require("postcss-preset-env")({
stage: 3,
features: { "nesting-rules": true }
})
]
}
说明：
立即学习“前端免费学习笔记（深入）”；
-
stage: 3对应 CSSWG 正式草案（如color-mix()、inset()），比默认stage: 2多支持约 12 个实用特性 -
features: { "nesting-rules": true }显式开启嵌套语法（&、&:hover），因为该特性尚未进入 Stage 3，需手动打开 - 无需再单独引入
autoprefixer——postcss-preset-env内置且自动读取browserslist配置
browserslist 配置决定转换结果
转换行为完全由 browserslist 驱动，不是插件参数说了算。必须在 package.json 或根目录 .browserslistrc 中声明：
> 0.2% last 2 versions not dead not IE 11
关键点：
-
not dead表示剔除全球使用率低于 0.5% 且官方已停止维护的浏览器（如 Opera Mini 12、UC Browser for Android <12.12） -
last 2 versions指每个浏览器最新两个主版本，不是“最近发布的两个版本”——例如 Firefox 当前是 127 和 126，不会包含已 EOL 的 125 - 避免写
Chrome >= 80这类硬编码版本号，browserslist会定期从 caniuse 更新支持状态，硬编码容易过期
常见转换失败场景与检查项
如果 display: flex 没加 -webkit-box 前缀，或 var(--c) 没展开成颜色值，先查这三项：
- 确认
postcss-loader在 webpack 的use数组中排在css-loader之后、style-loader之前（顺序错会导致 loader 未执行） - 运行
npx browserslist，看输出是否包含你目标中的浏览器（如没看到safari 16.4，说明配置未生效） - 检查 CSS 文件是否含
@import或@charset声明 ——postcss-preset-env默认跳过含@import的文件，需显式设置importFrom选项
复杂点在于：同一份 CSS，在不同构建环境（CI/本地）可能因 node_modules 缓存导致 browserslist 解析不一致；最容易被忽略的是 postcss-preset-env 对 @layer 和 @scope 的支持仍处于实验阶段，生产环境建议关掉：features: { "cascade-layers": false, "scope-at-rule": false }。
