[Feature] Nesting syntax support for native CSS

[generrosity]

Is your feature request related to a problem? Please describe.

Nesting was proposed by W3C in 2019, and browser adoption has been growing. Its not a "problem" as such, just new syntax.

I would reference CanIUse here sorry but it seems to be down. This Aug 2023 article Native CSS nesting now supported by all major browsers has relevant screenshots. I've seen "70% worldwide browser support" start of this year.

 

Describe the solution you'd like

Syntax support for vanilla CSS nesting.

Specifically, this includes

• the ampersand & as a valid (only nested?) yet optional parent selector. For instance "& + &" is valid, and I think & is required to glue double-colon syntax, and required for compound selectors, but is otherwise assumed in context but good for readability.
• allowing CSS statement blocks inside CSS statement blocks recursively (particularly, nesting other @At rules, @scope, etc). I have seen examples going multiple levels deep. This includes invalid nested rules not breaking following nested rules.
• expert remind this is NOT like preprocessors where ampersand can concatenate strings together; its has the same syntax as other symbol selectors and has some equivalence to ":is()".

Additional context

w3 syntax reference w3 Nesting other At-Rules MS referencing, including compound selectors MS concatenation counter-example MS invalid nested rule example MS nesting @AT rules, separate page of examples

Interesting examples for when the ampersand is required, edge cases and previously browser unsupported cases, and delights like ".card{ * {} }" (css-nesting)[https://ishadeed.com/article/css-nesting/]

Last notes

Thank you as always for sharing this tool. 💚

This year diagnosed with ADHD, but using this for years, and loving that I can share visibility and usability hacks with friends and collegues.

[generrosity]

@ankit Sorry. I've been looking over your code. I love your plugin and see you use nesting too.

I think I see eslint is used for checking as it does JS and CSS. But I get lost.

.eslintrc.js specifies "ecmaVersion: 2020" - could that be a factor as this selector came later? Or ... that its still 'in draft' so eslint doesn't implement it even though its widely supported? 🤔 There is a deep rabbithole with 'postcss-nesting' possibly being a module to solve this??

Thanks for your consideration! 🫡