Vite 如何处理删除内置 .css 文件中的 .css 嵌套？

Question

我一直在使用 Vite，并注意到由于删除了嵌套，构建的 .css 文件与原始源不同。具体来说，Vite 似乎会展平或删除生成的 .css 文件中的嵌套选择器。

我很好奇Vite内部的机制或流程导致了这种行为。 Vite 在构建过程中使用哪些具体步骤或插件来处理嵌套 CSS 选择器的删除？

我没有使用任何 postcss 插件，如 postcss-nesting 等。

可以在这里看到： 预构建：https://stackblitz.com/edit/vitejs-vite-f5jflt?file=src%2Findex.css 构建后：https://stackblitz.com/edit/vitejs-vite-f5jflt?file=dist%2Fassets%2Findex-Mku-Fj7f.css

我翻遍了Vite文档并搜索了相关信息，但一直没能找到关于这种转变是如何发生的清晰解释。

Answer 1

Vite内部使用PostCSS，所以看起来它会自动扁平化CSS：

    "node_modules/@vue/compiler-sfc": {
      "version": "3.4.5",
      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.5.tgz",
      "integrity": "sha512-jauvkDuSSUbP0ebhfNqljhShA90YEfX/0wZ+w40oZF43IjGyWYjqYaJbvMJwGOd+9+vODW6eSvnk28f0SGV7OQ==",
      "dependencies": {
        "@babel/parser": "^7.23.6",
        "@vue/compiler-core": "3.4.5",
        "@vue/compiler-dom": "3.4.5",
        "@vue/compiler-ssr": "3.4.5",
        "@vue/shared": "3.4.5",
        "estree-walker": "^2.0.2",
        "magic-string": "^0.30.5",
        "postcss": "^8.4.32",
        "source-map-js": "^1.0.2"
      }
    },

但是为什么需要嵌套呢？目前还没有很好地支持。