React Router build invalid css in production enviroment

[zbinlin]

Reproduction

git clone https://github.com/zbinlin/react-router-mra
npm install
npm run build
cat build/client/assets/root-AE-gBz9I.css | grep test

Missing space between adjacent var() calls in minified CSS causes invalid syntax.

System Info

System:
    OS: Linux 6.15 Arch Linux
    CPU: (16) x64 AMD Ryzen 7 7840HS w/ Radeon 780M Graphics
    Memory: 4.41 GB / 14.81 GB
    Container: Yes
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 24.4.1 - /usr/bin/node
    Yarn: 4.9.1 - ~/.local/bin/yarn
    npm: 11.4.1 - ~/.local/bin/npm
    pnpm: 9.12.2 - ~/.local/bin/pnpm
  Browsers:
    Chromium: 138.0.7204.168
  npmPackages:
    @react-router/dev: ^7.7.1 => 7.7.1 
    @react-router/node: ^7.7.1 => 7.7.1 
    @react-router/serve: ^7.7.1 => 7.7.1 
    react-router: ^7.7.1 => 7.7.1 
    vite: ^6.3.3 => 6.3.5

Used Package Manager

npm

Expected Behavior

.test{--tw-gradient-to: currentColor;--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}

Actual Behavior

.test{--tw-gradient-to:currentColor;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}

[machour]

This seems to be an issue with lightningcss, which is used by tailwindcss:

playground showing your issue

Should be fixed by this PR:

parcel-bundler/lightningcss#1029

Closing this issue since there's nothing we can do on our end