How does Vite handle removal of .css nesting in built .css files?

Issue

I've been working with Vite and noticed that the built .css files differ from the original source due to the removal of nesting. Specifically, Vite seems to flatten or remove nested selectors in the generated .css files.

I'm curious about the internal mechanisms or processes within Vite that result in this behavior. What specific steps or plugins does Vite utilize to handle the removal of nested CSS selectors during the build process?

I'm not using any plugins for postcss like postcss-nesting, etc.

It can be seen here: Pre-build: https://stackblitz.com/edit/vitejs-vite-f5jflt?file=src%2Findex.css Post-build: https://stackblitz.com/edit/vitejs-vite-f5jflt?file=dist%2Fassets%2Findex-MKu-Fj7f.css

I've looked through the Vite documentation and searched for related information, but I haven't been able to find a clear explanation of how this transformation occurs.

Solution

Vite uses PostCSS internally, so it seems it flattens CSS automatically:

    "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"
      }
    },

But why do you need it nested? It's not supported yet well.

Answered By - Alexander Nenashev