Bug report

What is the current behavior?

In CSS 2.1, any @import rules must precede all other rules (except the @charset rule, if present). link

• esbuild chooses to generate invalid code with warnings.
• webapck chooses to be tolerated and tries to generate correct output.

input:

webpack output

@import url(https://some/other/external/css);
@import url(https://some/external/css);
.c {
  background: red;
}

.c {
  color: yellow;
}

body {
  background: red;
}

.b {
  background: red;
}

.b {
  color: yellow;
}

If the current behavior is a bug, please provide the steps to reproduce.

input:

What is the expected behavior?

esbuild output

/* src/import/c.css */
.c {
  background: red;
}
@import url(https://some/other/external/css);
.c {
  color: yellow;
}

/* src/import/a.css */
body {
  background: red;
}

/* src/import/b.css */
.b {
  background: red;
}
@import url(https://some/external/css);
.b {
  color: yellow;
}

with warning

▲ [WARNING] All "@import" rules must come first [invalid-@import]

    src/import/b.css:5:0:
      5 │ @import url("https://some/external/css");
        ╵ ~~~~~~~

  This rule cannot come before an "@import" rule

    src/import/b.css:1:0:
      1 │ .b {
        ╵ ^

▲ [WARNING] All "@import" rules must come first [invalid-@import]

    src/import/c.css:5:0:
      5 │ @import url("https://some/other/external/css");
        ╵ ~~~~~~~

  This rule cannot come before an "@import" rule

    src/import/c.css:1:0:
      1 │ .c {
        ╵ ^

Other relevant information:
webpack version: ^5.73.0
Node.js version:
Operating System:
Additional tools:

I just want to make sure the current behavior of webpack is intended or a UB?