Vite moves @import at the top leading to an erroneous layers order

[ellhn]

Describe the bug

I am applying the following css:

@layer reset, bootstrap;
@import url('https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.css') layer(bootstrap);

@layer reset {
  h1 {
    margin-top: 100px;
  }
}

to <h1>Text</h1>

I am expecting:
bootstrap layer to take precedence over reset layer and h1 to have a top margin of 0px.

What is actually happening:
reset layer takes precedence over bootstrap layer and h1 has a top margin of 100px.

Reproduction

https://stackblitz.com/edit/vitejs-vite-ucaxjr?file=main.js,style.css&terminal=dev

Steps to reproduce

No response

System Info

Chrome and Firefox

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.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-ucaxjr (Open reproduction)

[sapphi-red]

This seems to be an upstream issue: postcss/postcss-import#567