Incorrect @import order in css bundle

[edoardocavazza]

Describe the bug

In CSS, if an entry is imported more than once, the last @import should win over the previous ones.
Instead, Vite generates the CSS bundle preserving just the first import.

For example:

@import './a.css';
@import './b.css';
@import './a.css';

should be equivalent to:

@import './b.css';
@import './a.css';

but Vite treats it like:

@import './a.css';
@import './b.css';

Reproduction

https://github.com/edoardocavazza/vite-css-bundle

Steps to reproduce

• Run yarn install to dependencies.
• Run yarn serve to start http-server
  • Navigate to http://127.0.0.1:8080
  • Note the red background (a.css wins over b.css that wins over the first a.css)
• Run yarn dev to start vite
  • Navigate to http://localhost:5173/
  • Note the blue background

System Info

System:
    OS: macOS 14.2.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 475.28 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.2.3 - ~/.nvm/versions/node/v18.19.0/bin/npm
    pnpm: 8.6.3 - ~/Library/pnpm/pnpm
    bun: 1.0.30 - ~/.bun/bin/bun
  Browsers:
    Chrome: 122.0.6261.129
    Safari: 17.2.1
  npmPackages:
    vite: ^5.2.0 => 5.2.2

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[edoardocavazza]

Side note: using lightningcss as transformer it works as expected.

[sapphi-red]

The inconsistency has been there for a long time and I guess we cannot change the behavior of postcss-import.
evanw/esbuild#465 (comment), postcss/postcss-import#462

[edoardocavazza]

I understand the problem of introducing a fix that leads to a breaking change. On the other hand, it should be very clear in Vite's documentation that this issue exists and that the CSS output is potentially very different from that of other tools like esbuild and lightningcss.