[Bug]: Rspack ignores layers specified on imports in the main css file

[dnwhte]

Version

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
    Memory: 5.32 GB / 15.92 GB
  Browsers:
    Chrome: 127.0.6533.89
    Edge: Chromium (127.0.2651.74)
  npmPackages:
    @rsbuild/core: ^1.0.1-beta.9 => 1.0.1-beta.9
    @rsbuild/plugin-react: ^1.0.1-beta.9 => 1.0.1-beta.9

Details

The builtin:lightningcss-loader ignores layers specified on imports in the root css file.

Index.css

@layer reset, base, components;

@import './a.css' layer(reset);
@import './b.css' layer(base);

Expected Output

@layer reset {
  .a {
    color: red;
  }
}

@layer base {
  .b {
    color: green;
  }
}

@layer components;

Actual Output

.a {
  color: red;
}

.b {
  color: green;
}

@layer reset, base, components;

Reproduce link

https://codesandbox.io/p/devbox/9lyypl?migrateFrom=7rj2zn

Reproduce Steps

1. Use the builtin:lightningcss-loader in your config
2. In the root css file import another css file and set a layer for it. - @import './component.css' layer(components)
3. Run the rsbuild
4. Check of the components are properly layered in the output css

[chenjiahan]

I think this is an unsupported CSS feature of Rspack and has nothing to do with lightningcss-loader.

• webpack + css-loader + mini-css-extract-plugin: the generated CSS bundle is as expected.
• Rspack + css-loader + CssExtractRspackPlugin: the generated CSS bundle is missing layers.

[chenjiahan]

Maybe related: https://github.com/web-infra-dev/rspack/issues/5340

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. If this issue is still affecting you, please leave any comment (for example, "bump"). We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[chenjiahan]

Fixed by https://github.com/web-infra-dev/rspack/pull/7583