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

[sapphi-red]

@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;
  }
}

This input is transformed into:

@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/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 :)

[sapphi-red]

Hi, we had sponsored the PostCSS organization through VoidZero via OpenCollective last month to collectively support the PostCSS ecosystem, which I think includes this repo too. We avoid providing financial support for specific issues or pull requests. We do this to avoid the possibility that financial support might cause merging to become a goal in itself, which would remove the long-term perspective and put pressure on library maintainers. Therefore, we prefer to provide financial support to library organizations. I hope you're able to claim your refactoring efforts from OpenCollective. Thanks for your work here!