postcss-nesting不支持原生@nest语法，仅处理Sass风格隐式嵌套（如& h2），将其字符串拼接展开为兼容CSS；它不解析@nest、不校验&位置、不转换原生嵌套，仅透传原样输出。
做不到。postcss-nesting 不转译原生 @nest 语法，也不支持浏览器尚未实现的嵌套特性；它只处理 Sass 风格的隐式嵌套（如 & h2），且输出的是兼容旧浏览器的扁平 CSS —— 这和“让旧浏览器支持原生嵌套”是两回事。
postcss-nesting 实际干了什么
它把类似 Sass 的写法当作字符串拼接任务来执行：
-
.card { & h2 { color: red; } }→ 展开成.card h2 { color: red; } -
.btn { &:hover { background: blue; } }→ 展开成.btn:hover { background: blue; } - 所有
&都被无条件替换，不校验位置、不识别@nest、不检查是否在合法上下文中 - 它不解析、不保留、也不转换任何原生嵌套语法；
@nest & .title { }在它眼里就是普通选择器字面量，原样透传
为什么你不能靠它“支持原生嵌套”
原生嵌套（@nest + &）是浏览器运行时解析的语法，不是构建时可降级的特性：
- Chrome 119+ / Safari 17.4+ / Edge 119+ 才开始稳定支持
@nest，Firefox 仍需手动开启实验标志（layout.css.nesting.enabled = true），且生产环境不可依赖 - 旧浏览器（如 Chrome @nest 或非法
&会直接跳过整条规则，不报错、不警告、DevTools 里也看不到 - postcss-nesting 插件本身不处理
@nest，所以你写了它也不会编译、不会 fallback、更不会 polyfill
想在旧浏览器跑嵌套样式，只能用 postcss-nested
如果你的目标是“让旧浏览器支持嵌套写法”，那必须用另一套插件：postcss-nested（注意拼写，不是 postcss-nesting）：
立即学习“前端免费学习笔记（深入）”；
-
postcss-nested模拟 Sass 风格：允许.card { h2 { color: red; } }这种缩进式写法 - 它会在构建时展开为兼容性 CSS：
.card h2 { color: red; } - 它已归档、不再维护，但仍是目前唯一能将“隐式嵌套”转为旧浏览器可用代码的工具
- 二者不可共存：
postcss-nesting和postcss-nestedAST 处理逻辑冲突，同时启用会报TypeError: Cannot read property 'type' of undefined或静默失效
真正上线前必须盯住的三个点
无论你选哪条路，这些地方最容易漏掉：
- 构建流程是否真的透传了
@nest：Webpack 用户要确认css-loader ≥ 6.8且importLoaders没禁用嵌套解析；Vite ≥ 4.5 默认支持，但若用了自定义 PostCSS 配置，可能误删@nest块 - Safari 17.3 的
&:hover静默失效缺陷：本地测 Chrome 没问题，但真实 iOS 用户可能根本看不到悬停效果 - Firefox 用户兜底方案：它不支持
@nest且不报错，必须双写传统规则（如同时保留.card .title { }和.card { @nest & .title { } }）或统一用postcss-nested编译全量 CSS
原生嵌套不是渐进增强特性，它没有 fallback 机制。你写的 @nest 就是交给浏览器直解的最终代码，构建工具能做的只有“别破坏它”或者“干脆不用它”。
