Incorrect warning message for `@layer` between `@import`s

[sapphi-red]

The following CSS is invalid as the @import is not consecutive.

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@100;200;300;400;500;600;700&display=swap');

@layer reset, base, variant, state, component;

@import url(./tester.css) layer(base);

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

If this CSS is input, postcss-import outputs the following warning:

@import must precede all other statements (besides @charset or empty @layer)

This message is true, but doesn't apply to this input. @import does precede all other statements besides empty @layer. In this case, I think the warning message needs to be something like "@import must be consecutive".

[romainmenke]

I've created a Stylelint plugin to aid people with @import and bundlers:

https://github.com/csstools/postcss-plugins/tree/main/plugins-stylelint/no-invalid-at-import-rules-when-bundling#readme

Demo

This also warns with a more accurate message for this scenario

@import statements must be precede all other nodes except for @charset or @layer and all @import statements must be consecutive.

---

If I recall correctly it was fairly complex in the current codebase to keep track of this specific case.

I might be misremembering :)