CSS `@layer` bundling misses selectors inside media queries

Describe the bug

@import 'layers.css' layer(demo);

where layers.css contains:

h1 {
  color: red;
}

@media (min-width: 100px) {
  h1 {
    color: green;
  }
}

incorrectly produces:

@layer demo {
  h1 {
    color: red;
  }
}

@media (min-width: 100px) {
  h1 {
    color: green;
  }
}

instead of (this is just one correct way):

@layer demo {
  h1 {
    color: red;
  }

  @media (min-width: 100px) {
    h1 {
      color: green;
    }
  }
}

This means any media queries are unlayered, giving them the top most precedence and specificity over styles in layers.

Vanilla Vite example: https://stackblitz.com/edit/vitejs-vite-vlemhc?file=layers.css,style.css Demo: https://vitejs-vite-vlemhc--5173.local.webcontainer.io/

I’d like a way to disable it for now, but don’t see one.

Reproduction

https://stackblitz.com/edit/vitejs-vite-vlemhc?file=layers.css,style.css

System Info

System:
    OS: macOS 12.4
    CPU: (16) x64 Intel(R) Xeon(R) W-2140B CPU @ 3.20GHz
    Memory: 799.40 MB / 64.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 18.2.0 - /usr/local/bin/node
    npm: 8.9.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 103.0.5060.134
    Chrome Canary: 106.0.5201.0
    Firefox: 102.0.1
    Firefox Developer Edition: 102.0
    Firefox Nightly: 103.0a1
    Safari: 15.5
    Safari Technology Preview: 15.4
  npmPackages:
    vite: 3.0.2 => 3.0.2

Used Package Manager

npm

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.

[argyleink]

bug is fixed 👍🏻

[romainmenke]

I suspect this will be fixed by : https://github.com/postcss/postcss-import/pull/496 Haven’t verified this but it seems to be the same issue and vite uses postcss-import.