css && selector is not working properly during build

[aeharding]

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

Stackblitz environment

Used Package Manager

npm

Logs

Please see stackblitz after running prod build.

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

This seems to be a bug in esbuild (evanw/esbuild#3997).