Should avoid bundling invalid `@import`

[colinaaa]

Bug report

When using @import that is not the first statement (besides @charset or empty @layer), it should be ignored.

.foo {
	color: red;
}

@import "./bar.css"; /** <-- Should be ignored */

Actual Behavior

The bar.css would be bundled by Webpack / Rspack.

This is because css-loader generates an import to bar.css

Expected Behavior

The bar.css should be ignored. Just like Browsers, postcss-import and lightningcss does.

How Do We Reproduce?

1. Clone https://github.com/colinaaa-reproductions/css-loader-repro-invalid-at-import
2. Run pnpm install
3. Run pnpm run build to see build results of Webpack / Rspack / Rsbuild / PostCSS
4. Run npx http-server to see the behavior of the browser

Please paste the results of npx webpack-cli info here, and mention other relevant information.

  System:
    OS: Linux 5.15 veLinux GNU/Linux 2 (lyra) 2 (lyra)
    CPU: (64) x64 Intel(R) Xeon(R) Platinum 8457C
    Memory: 245.78 GB / 251.61 GB
  Binaries:
    Node: 24.6.0 - /run/user/1001/fnm_multishells/1085744_1758014209177/bin/node
    npm: 11.5.1 - /run/user/1001/fnm_multishells/1085744_1758014209177/bin/npm
    pnpm: 10.15.1 - /run/user/1001/fnm_multishells/1085744_1758014209177/bin/pnpm
  Packages:
    css-loader: ^7.1.2 => 7.1.2 
    html-webpack-plugin: ^5.6.4 => 5.6.4 
    webpack: ^5.101.3 => 5.101.3 
    webpack-cli: ^6.0.1 => 6.0.1

[alexander-akait]

We used to do this, but we changed it, some build tools often concatenate CSS with invalid order (especial with custom position of @import, we populate them at top in mini-css-extract-plugin), user should use linters to catch this, yes, we can improve this, but it decease performance and break some things, so I prefer when developer use linters to catch some problems

[colinaaa]

Thank you for your reply!