🐛 The CSS parser doesn't support nested selectors with pseudo-classes about biome

[denbezrukov]

swc has the same problem: https://swc-css.netlify.app/?code=eJzLTczMU6jm4sxJTErNscrIL0stAnE50_LzSnTLUzPTM0qsFEwNDKy5OGu5agFeiw4W

Workaround:

main {
	& label:hover {
		font-weight: 500;
	}
}

The problem is that it's impossible to understand if the next element is a property declaration or a pseudo-class with a type selector. We can try to check the token after : and see if it's a known pseudo-class. Do you think this is a good solution?

[Sec-ant]

Thanks for checking this issue!

swc has the same problem: https://swc-css.netlify.app/?code=eJzLTczMU6jm4sxJTErNscrIL0stAnE50_LzSnTLUzPTM0qsFEwNDKy5OGu5agFeiw4W

I wonder what the "Allow legacy nesting" option means in swc. If I enable it, it seems to parse the selector with pseudo classes correctly. And if I disable it, it won't parse nesting selectors at all, even without a pseudo class: https://swc-css.netlify.app/?code=eJzLTczMU6jm4sxJTErNATE40_LzSnTLUzPTM0qsFEwNDKy5OGu5agH83Au4

The problem is that it's impossible to understand if the next element is a property declaration or a pseudo-class with a type selector. We can try to check the token after : and see if it's a known pseudo-class. Do you think this is a good solution?

I'm not sure about checking for known pseudo classes. I have a very limited knowledge about how our parser works and the CSS spec. But I wonder if it is possible to backtrack when it encounters an opening curly brace { if it erroneously reads it as a property declaration the first pass?

I do think the workaround is good enough for users who encounter this problem!