lightning css 不支持高级语法降级，仅处理标准css及原生嵌套草案；不兼容sass/less语法，对@apply等规则直接报错；仅自动裁剪合法现代css特性或配合postcss预处理。
Lightning CSS 本身不支持“高级语法降级”，它只处理标准 CSS + 原生嵌套草案
Lightning CSS 不是预处理器，也不兼容 Sass/Less 的 @mixin、@extend、&:hover 嵌套（除非显式启用并符合 CSS Nesting Level 1 规范）。它对所谓“高级语法”的理解非常窄：仅限浏览器已实现或草案中明确的原生特性，比如 & 嵌套、@layer、@container、color-mix()、oklch() 等。如果你写了 @apply 或 @tailwind，Lightning CSS 直接报 Unknown at rule 并中断——它不会尝试降级，只会拒绝。
所以，“用 Lightning CSS 实现高级语法降级”这个说法本身有误导性。真正能做的，是：
- 让合法的现代 CSS（如嵌套、
color(display-p3)）按目标浏览器能力自动裁剪或保留 - 把预处理器产出的标准 CSS 喂给它做压缩和前缀补全
- 在它之前用其他工具（如 PostCSS）处理掉它不认识的语法
想用嵌套语法？必须写成原生格式，并配好 browserslist
Lightning CSS 支持 CSS Nesting Level 1，但要求写法严格：
- 必须用
&符号，不能省略（.btn { &__icon { ... } }✅，.btn { __icon { ... } }❌） - 嵌套层级不能超过浏览器实际支持深度（Chrome 120+ 支持 4 层，旧版 Safari 可能只认 2 层）
- 需在项目根目录配置
browserslist，例如：">0.5%", "not dead", "not Chrome 否则它无法判断是否该展开嵌套为扁平选择器
- 遇到不支持嵌套的目标浏览器（如 Chrome 110），它会自动将
.card { & .title { color: red; } }转为.card .title { color: red; }，而不是报错
@layer、@container、color-mix() 这类特性怎么安全落地？
这些属于“现代但非所有浏览器支持”的特性，Lightning CSS 的处理逻辑是查表决策，不是模拟降级：
-
@layer：若目标浏览器全支持（Chrome 110+、Firefox 117+、Safari 17.4+），它保留；否则直接移除整条规则，不尝试转成普通 class -
@container：同样查browserslist，不支持则整段丢弃，不会 fallback 成 JS 检测 + class 切换 -
color-mix(in srgb, red 50%, blue 50%)：不支持时，整个声明被删除，不会替换成purple或rgb(128,0,128) -
color(display-p3 1 0.3 0.8)：若目标环境不支持display-p3，它不会 fallback 到rgb()，而是直接跳过该声明——你必须自己写 fallback，例如：color: rgb(255, 0, 0);<br>color: color(display-p3 1 0 0);
为什么 errorRecovery: true 不是万能解药？
这个选项只在部分版本的 lightningcss 中存在（如 1.21.0+），且作用极其有限：
- 它仅对某些解析错误（如漏分号、错位括号）提供容错，让编译继续，但不会修复语义错误
- 遇到
@apply、@tailwind、@use这类完全不识别的 at-rule，依然抛ParseError: Unknown at rule - 它不恢复 CSS Modules 的
composes解析失败，也不修复@import非模块文件导致的作用域泄漏 - 开启后错误信息变弱，调试反而更难——建议仅用于 CI 构建阶段临时兜底，开发期仍应前置拦截
真正可控的方式，是在 Lightning CSS 前加一层 PostCSS，用 postcss-import、postcss-nesting、autoprefixer 把语法提前规整成它能吃的格式。Lightning CSS 的快，前提是输入干净；它不是修理工，是高速压模机——喂进去的坯料歪了，它只会卡死，不会帮你掰直。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
