Wrong order of imports causing broken CSS file

[andresbm05]

Bug report

I'm trying to build my app which contains a scss file like this:

/*! /* webpackIgnore: true */
@import url("/assets/themes.css");
@import "~normalize.css";
// ...

I need the relative URL to be kept because that file is not available at build time, that's why I use webpackIgnore: true.

The problem is that these imports are being resolved in inverse order, so the resulting CSS file looks like this:

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ // ... ALL NORMALIZE STYLES
@charset "UTF-8";/*! /* webpackIgnore: true */@import url(/assets/themes.css) //...

This causes this warning (which I think should be an error)

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

    brand.styles.333111hafft76be9.css:354:0:
      354 │ @import url("assets/themes.css");
          ╵ ~~~~~~~

  This rule cannot come before an "@import" rule

    brand.styles.333111hafft76be9.css:11:0:
      11 │ html {
         ╵ ^

Actual Behavior

The imports are resolved in inverse order

Expected Behavior

Imports should keep the defined order, even more if they are CSS imports that have to be kept on top.

How Do We Reproduce?

As explained above, it can be reproduced with this code:

/*! /* webpackIgnore: true */
@import url("/assets/themes.css");
@import "~normalize.css";

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

System:
OS: Windows 11 10.0.22621
CPU: (12) x64 Intel(R) Xeon(R) W-10855M CPU @ 2.80GHz
Memory: 13.05 GB / 31.75 GB
Binaries:
Node: 20.11.0 - C:\Program Files\nodejs\node.EXE
npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Chromium (123.0.2420.97)
Internet Explorer: 11.0.22621.1
Monorepos:
Lerna: 5.2.0
Packages:
webpack-bundle-analyzer: 4.7.0 => 4.7.0

[alexander-akait]

There is a fix #1600

[alexander-akait]

Please try https://github.com/webpack-contrib/css-loader/releases/tag/v7.1.2