search

web-infra-dev / rspack

The fast Rust-based web bundler with webpack-compatible API 🦀️
https://rspack.dev
MIT License
10.04k stars 573 forks source link

[Bug]: CSS `@layer` order is messed up #8489

Open ModyQyW opened 2 days ago

ModyQyW commented 2 days ago

Version

System:
    OS: macOS 15.1
    CPU: (10) arm64 Apple M2 Pro
    Memory: 91.75 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 131.0.6778.70
    Safari: 18.1
  npmPackages:
    @rsbuild/core: ^1.1.4 => 1.1.4 
    @rsbuild/plugin-react: ^1.0.7 => 1.0.7

Details

I have developed a small project using Rsbuild and PrimeReact. I've noticed that both dev and build are generating the CSS @layer in the wrong order, resulting in incorrect CSS styles.

Image

As a comparison, PrimeReact officially provides a Vite Demo and when I run it, the CSS @layer order is correct and the CSS styles are correct.

Image

I am not sure if this is a problem with Rspack, Rsbuild, other tools, or other settings. Feel free to let me know. Thanks! 🙏

Reproduce link

https://github.com/ModyQyW/trimmean-now

Reproduce Steps

  1. git clone git@github.com:ModyQyW/trimmean-now.git
  2. pnpm install
  3. pnpm dev
  4. Check index. The button is not styled accordingly, it is expected to be styled accordingly.