CSS variables with same value defined in media query are merged incorrectly

[CLDXiang]

Describe the bug

When I define two different CSS variables with same value in media query, only one of these CSS variables will remain in the building result.

e.g.

@media (prefers-color-scheme: dark) {
  body {
    --VAR-1: #000;
  }
}

@media (prefers-color-scheme: dark) {
  body {
    --VAR-2: #000;
  }
}

building output:

@media (prefers-color-scheme: dark){body{--VAR-2: #000}}

Reproduction

https://github.com/CLDXiang/vite-css-var-in-media-merge-bug

Steps to reproduce

No response

System Info

System:
    OS: macOS 12.5.1
    CPU: (20) x64 Intel(R) Core(TM) i9-10910 CPU @ 3.60GHz
    Memory: 2.07 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
    Yarn: 1.22.17 - ~/.yarn/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm
  Browsers:
    Chrome: 108.0.5359.124
    Firefox: 100.0.2
    Safari: 15.6.1
  npmPackages:
    vite: ^4.0.0 => 4.0.4

Used Package Manager

yarn

Logs

No response

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.

[CLDXiang]

Seems caused by esbuild's minify at this line.

Run esbuild --bundle style.css --outfile=out.css --minify will produce this bug, so it's actually an esbuild bug. Will vite handle this on its own or report this to esbuild?

[sapphi-red]

@CLDXiang Thanks for digging down! Would you report this to esbuild?

[CLDXiang]

@sapphi-red ok. evanw/esbuild#2838