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

ellhn commented 6 days ago

Describe the bug

I am applying the following css:

@layer reset, bootstrap;
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/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 h1has 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

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] 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.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.