All the stylesheets CSS file loading twice on build

[khanakia]

I'm using React Router as a...

framework

Reproduction

• Clone the Repo https://github.com/khanakia/reactrouter_css_loading_twice
• pnpm build
• Run http-server-spa build/client index.html 8090 to preview the build

System Info

(main) ✗ npx envinfo --system --npmPackages '{vite,react-router,@react-router/*}' --binaries --browsers

  System:
    OS: macOS 14.6.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 1.01 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.12.0 - ~/.nvm/versions/node/v22.12.0/bin/node
    npm: 10.9.0 - ~/.nvm/versions/node/v22.12.0/bin/npm
    pnpm: 9.15.3 - ~/.nvm/versions/node/v22.12.0/bin/pnpm
    bun: 1.2.2 - ~/.bun/bin/bun
    Watchman: 2024.12.02.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 132.1.74.51
    Chrome: 132.0.6834.160
    Edge: 122.0.2365.92
    Safari: 18.0
  npmPackages:
    @react-router/dev: ^7.1.3 => 7.1.5 
    @react-router/fs-routes: ^7.1.3 => 7.1.5 
    @react-router/node: ^7.1.3 => 7.1.5 
    @react-router/serve: ^7.1.3 => 7.1.5 
    react-router: ^7.1.3 => 7.1.5 
    vite: ^6.0.11 => 6.0.11

Used Package Manager

pnpm

Expected Behavior

It should load the CSS file only once

Actual Behavior

It's loading the CSS file twice with same Code inside

[HatemJerbi]

Hi,

I encountered the same issue. The problem arises when using the TailwindCSS 4 Vite plugin while importing CSS as a URL (e.g., import stylesheet from './app.css?url').

As a workaround, you can import the CSS as a side-effect module (import './app.css') and remove { rel: 'stylesheet', href: stylesheet } from your links. Alternatively, you can avoid using the TailwindCSS Vite plugin and switch to the TailwindCSS PostCSS plugin instead: Tailwind PostCSS Installation.

Maybe a React Router maintainer can provide more insight !

[timdorr]

Correct, this is an issue with Vite and the tailwind plugin, not with React Router.

[philipp-spiess]

Hey folks!

I looked into this from the Tailwind CSS extension side. What's happening is that React Router runs two separate builds, one for the server and one for the client. The Tailwind CSS extension progressively scans components for class names and by the time the first build is finished (client build in this case), we haven't scanned through the server modules yet. This causes the stylesheet to become updated in the server build later which causes Vite or React Router to inline both CSS files since they're different...

A repro for this that doesn't use Tailwind CSS btw is this minimal Vite plugin that works with a minimal React Router setup is this:

{
  name: "transform-css",
  transform(code, id) {
    if (id.includes(".css?transform-only")) {
      return `/*! ${Date.now()} */\n${code}`;
    }
  },
},

@timdorr What's coordinating the two Vite builds here? Is that React Router specific?

[markdalgleish]

@philipp-spiess We're just running a Vite client build followed by a Vite server build (in the common case where you only have a single server bundle). You should still be getting this issue with vite build && vite build --ssr.