css && selector is not working properly during build (original) (raw)

Describe the bug

When I write the following css module:

.hi { && { color: blue; }

color: red; }

I expect

._hi_ffrjt_1._hi_ffrjt_1{color:#00f} ._hi_ffrjt_1 {color:red;}

But I get:

._hi_ffrjt_1{color:red;color:#00f}

This is not the specificity I was expecting and is causing bugs for me, specifically when using CSS modules composes property. I think the minifier is trying to be smart(?) but it doesn't work with CSS modules

Reproduction

https://stackblitz.com/edit/vue3-vite-typescript-starter-klkv2k?file=src%2Fhi.module.css

Steps to reproduce

Run pnpm build and inspect output css

System Info

Used Package Manager

npm

Logs

Please see stackblitz after running prod build.

Validations