[Bug]: CSS rules not keeping order

[Profesor08]

Version

System:
    OS: Windows 11 10.0.26200
    CPU: (24) x64 AMD Ryzen 9 3900XT 12-Core Processor
    Memory: 9.40 GB / 31.92 GB
  Browsers:
    Chrome: 141.0.7390.123
    Edge: Chromium (140.0.3485.54)
    Firefox: 143.0.1 - C:\Program Files\Mozilla Firefox\firefox.exe
    Internet Explorer: 11.0.26100.1882
  npmPackages:
    @rsbuild/core: ^1.5.14 => 1.5.17

Details

CSS rules are sorted in some order and this causes bugs.

Expected:

.content {
  display: grid;
  gap: var(--size-md);
  background-color: darkblue;
  transition:
    ease opacity 0.3s,
    ease display 0.3s,
    ease scale 0.3s,
    ease translate 0.3s,
    ease transition 0.3s;
  transition-behavior: allow-discrete;
}

Actual:

.content {
    gap: var(--size-md);
    transition-behavior: allow-discrete;
    background-color: #00008b;
    transition: opacity .3s, display .3s, scale .3s, translate .3s, transition .3s;
    display: grid;
}

Explanation: transition overlaps transition-behavior

Is there some way to disable this?

Reproduce link

in description

Reproduce Steps

rsbuild-css-rules-order.zip

1. npm install
2. npm run dev

In some situation this reproduces in dev, in some after build.

[chenjiahan]

Lightning CSS transformed the CSS code and produced the results shown in this issue.

Can be reproduced in the Lightning CSS playground:

You can report this case to Lightning CSS issue (parcel-bundler/lightningcss#572), or disable the Lightning CSS via Rsbuild configurations.

[Profesor08]

Disabling lightningcss fixes in dev mode. But after build, order changes.

export default defineConfig({
  tools: {
    lightningcssLoader: false
  }
});

[Profesor08]

I have figured out how to disable entirely lightingcss and rules sorting

import { defineConfig } from '@rsbuild/core';
import { pluginCssMinimizer } from '@rsbuild/plugin-css-minimizer';

export default defineConfig({
  plugins: [pluginCssMinimizer({
    pluginOptions: {
      minimizerOptions: {
        preset: ["default", {
          cssDeclarationSorter: false,
        }]
      }
    }
  })],
  tools: {
    lightningcssLoader: false
  }
});

[chenjiahan]

Closed as this is an upstream issue