Vue.js核心项目中CSS子选择器在:has伪类中的异常丢失问题分析

问题背景

在Vue.js 3.4.24版本中，开发人员发现了一个与CSS作用域和嵌套样式相关的有趣问题。当使用scoped样式并配合嵌套CSS语法时，在某些情况下CSS子选择器(>)会在编译过程中意外丢失，导致样式表现与预期不符。

问题现象

具体表现为，在Vue单文件组件中使用如下CSS结构时：

<style scoped>
:deep(.foo:has(> span)) {
  :deep(&) span {
    background-color: green;
  }
}
</style>

开发环境(dev)和生产环境(build)会呈现不同的样式效果。在开发环境下，只有直接子元素的span会被正确着色，而在生产环境下，所有层级的span都会被着色。

根本原因

经过技术分析，这个问题实际上源于esbuild在CSS编译过程中的一个bug。当处理包含:deep(&)的嵌套CSS结构时，esbuild会错误地移除:has伪类中的子选择器(>)，导致编译后的CSS选择器范围扩大。

正确的编译结果应该是：

[data-v-f41b19b6] :is([data-v-f41b19b6] .foo:has(>span)) span{background-color:green}

但实际得到的错误结果是：

[data-v-f41b19b6] :is([data-v-f41b19b6] .foo:has(span)) span{background-color:green}

解决方案

针对这个问题，Vue.js核心团队提供了两种可行的解决方案：

1. 使用lightningcss替代esbuild：在vite配置中将CSS压缩工具切换为lightningcss，它能正确处理这种CSS结构。

export default defineConfig({
  plugins: [vue()],
  build: {
    cssMinify: 'lightningcss'
  }
});

2. 禁用CSS压缩：虽然不推荐，但可以通过设置cssMinify: false来避免这个问题，不过这会牺牲CSS的优化效果。

技术建议

对于Vue.js开发者来说，在使用scoped样式和嵌套CSS时，应当注意以下几点：

1. 当使用:has伪类配合子选择器时，建议在生产构建后验证生成的CSS是否符合预期
2. 考虑项目对浏览器兼容性的要求，选择合适的CSS处理工具
3. 复杂的嵌套CSS结构可能会增加编译过程出错的风险，建议保持CSS结构简洁

这个问题虽然表面上是Vue.js项目中的现象，但实际上是底层工具链的问题，开发者应当根据项目实际情况选择合适的解决方案。