Native Nested CSS: flatten automatically for the output

The CMS Questions
1

I like the syntax of native nested CSS:

I use it in my project.

Browsers before approximately 2023 do not support nested css.

Is there a nice method in Kirby to flatten nested css automatically for the output?

Thanks for your advice : )

2

There is not such a method builtin to Kirby as what happens on the front end with things like CSS and Javascript is up to you. You would need to use a post processor if you wanted to flatten it to old style CSS. Something like Esbuild should do it i think.

Personally I use SCSS which has nesting, compiled (aka flattenned) via Esbuild. Any valid CSS file is also a valid SCSS file, just rename the extension if you end up having to prorcess it as SCSS rather the CSS for the nested code. Ive never tried it with CSS through a post processor so I dont know how it work but worth a go.