Bug report

Actual Behavior

When having @layer definition in top of a css file, and @import statements (that imports css into some of those layers) later in that file, css-loader seems to ignore the @layer definition.

Example: background is green, and the layer order is "red, blue, text, green":
https://3gw6f7.sse.codesandbox.io/ (source: https://codesandbox.io/s/css-loader-notworking-3gw6f7?file=/src/styles/base.css)

Expected Behavior

Background should be blue, and the layer order should be "text, red, green, blue".

How Do We Reproduce?

In a project using webpack v5.88.1, react v17, and css-loader v6.8.1, do the following:

1. Make two css files that define different backgrond colors for an html element.
2. Make one css file with @layer definitions first, with @import statements for importing the background color files in previous step into some of the layers, and a css rule that also uses one of the layers.
3. Make a third css file with another background color for the html element, that uses one of the layers, but is imported in a js code file.
4. Observe that the order of layers is wrong: Instead of respecting the initial @layer order, layers are ordered by where they appear in code.

Other relevant information

A workaround is: Split the css file with @layer and @import statements in two files, and make sure the @layer file is imported first. Observe that the order of layers is correct: The initial @layer order is respected.

Example of working workaround. By importing layers file first - background is blue, and the layer order is "text, red, green, blue":
https://rwcrwd.sse.codesandbox.io/ (source: https://codesandbox.io/s/css-loader-workaround-rwcrwd?file=/src/styles/layers.css)