Why does vite allow nested CSS without PostCSS plugin

[jtheberge]

Hi, as title states, I'm using Vite and noticed I can use nested CSS despite not having any PostCSS plugin added. I don't see any plugins as dependencies of Vite, so how is this possible?

[ngustavo]

Trying to use nested classes on Vite 2.9.2 won't work or throw any error.
It's just ignored by Vite, and Chrome highlights it as unknown property.

[jtheberge]

I'm writing nested CSS with Vite and seeing output working fine in the browser. I see here now postCSS is also a dependency https://github.com/vitejs/vite/blob/main/packages/vite/package.json#L47

[ngustavo]

That's weird. So PostCSS automatically adds nested classes? You don't need any plugin such as postcss-nesting?
How did you achieve that?
Can you reproduce it on vite.new?

[isaacwein]

Nested css workes for me - can i use

check out my stackblitz

[gjstreicher]

I also noticed this today. it's pretty nifty, but it would be nice if this was clearly stated in the Vite documentation.

Also, which style does it use? Is it the'postcss-nested style or the postcss-nesting style?

[sapphi-red]

It is not written in the docs separately as CSS nesting is an official CSS feature now (CSS support implies CSS nesting support).
Vite does not use postcss for CSS nesting support (uses esbuild or lightningcss), but it should work the same with postcss-nesting as that plugin also follows the official CSS Nesting spec.

[gjstreicher]

@sapphi-red I see. How is then that my built and minified CSS file contains flattened CSS?

Is esbuild responsible for this?

[sapphi-red]

esbuild or lightningcss (depending on your config) will flatten them.

[gjstreicher]

I've looked up the esbuild docs and see that they transpile CSS based on a set browser target.

I also see Vite has docs on what targets it uses.

I guess this is a case of RTFM 😂