@import with layer gets reordered before @layer and changes the behavior

[sapphi-red]

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

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

This input is transformed into:

@import url('https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.css') layer(bootstrap);
@layer reset, bootstrap;
@layer reset {
  h1 {
    margin-top: 100px;
  }
}

But the output CSS has a different meaning from the input CSS (bootstrap layer is now overridden with reset layer).

Reproduction: https://stackblitz.com/edit/template-sapphi-red-postcss-sass-kasrpt?file=src%2Finput.css,postcss.js

[romainmenke]

Thank you for reporting this @sapphi-red

This is a rather complex issue and will require a substantial rewrite.
Is this an effort that Vite could support financially?

---

fyi: this issue doesn't exist in @csstools/postcss-bundler

But there I didn't implement a lot of non-standard behavior nor did I provide any of the customization options that exist in postcss-import.

@csstools/postcss-bundler isn't suitable for Vite but it does show that this issue is solvable :)