[Feature]: Better support for CSS layers

[meesvandongen]

What problem does this feature solve?

When using libraries that use @layer within rspress, the "unlayered" preflight / css reset will have higher priority than any styled declared using the @layer directive. As a result, the highest priority CSS rules may not be the desired rules.

Next to this, the control over the order of css file content in the resulting css bundle file is limited, complicating @layer usage. Considering the user has a library with multiple @layers, the order would need to be defined by the user before any rules are attached to such a layer. (Otherwise the order may be wrong).

/** At the top of the bundled file */
@layer rp-preflight, user-library1, user-library2;

/** later... */

@layer user-library1 {
  /** attach some css rule */
}

I experienced this last problem when I used the bundleless output of modern.js module, since CSS Modules are not bundled in this mode. The individual files inside node_modules will import the CSS files that have been built. In Rspress, all those files will be bundled into 1 css file. The order of the imports (which is related to the order of the bundle) is harder to control in this case.

What does the proposed API look like?

For the first point, something like this in base.css could help:

@import url(./preflight.css) layer(rp-preflight);

For the second point; the code could be altered such that the globalStyles is always the first file.

[meesvandongen]

As a workaround I can use

head: ["<style>@layer rp-preflight, user-library1, user-library2;</style>"],

But this works only during build (is that intended?).

[chenjiahan]

This may be related to: web-infra-dev/rspack#7452