.css?url resulting in a different file fingerprint

[kentcdodds]

Describe the bug

I'm trying to migrate https://kentcdodds.com (currently on the Remix compiler) to use the unstable Remix Vite plugin. Everything's working except for the .css?url import. It appears to be that the files are getting built and I'm getting a path as the default import value, however the built file and the path do not match.

Ultimately this means that the browser is looking for /assets/vendors-HTcLOMO0.css but the file is actually accessible at /assets/vendors-S_1f6r_V.css.

Things are working ok during development, but not with the production build (both locally and deployed). You'll find the deployed version here: https://kcd-staging.fly.dev/

Reproduction

https://github.com/kentcdodds/kentcdodds.com

Steps to reproduce

git clone https://github.com/kentcdodds/kentcdodds.com
cd ./kentcdodds.com
git checkout dev
cp .env.example .env
npm install
npm run setup
npm run build
npm start

Open http://localhost:3000 and you'll get 404s for assets. Check build/client/assets and you'll find the assets for CSS have a different fingerprint.

System Info

System:
    OS: macOS 13.6.2
    CPU: (10) arm64 Apple M1 Max
    Memory: 16.76 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - ~/n/bin/node
    Yarn: 1.22.17 - ~/n/bin/yarn
    npm: 10.2.3 - ~/n/bin/npm
    pnpm: 7.25.0 - /opt/homebrew/bin/pnpm
    bun: 1.0.0 - ~/.bun/bin/bun
    Watchman: 2022.10.17.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 120.1.61.116
    Chrome: 120.0.6099.216
    Safari: 16.6
  npmPackages:
    vite: ^5.1.0-beta.0 => 5.1.0-beta.0

Used Package Manager

npm

Logs

N/A

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.

[sapphi-red]

The message I sent on discord:

It seems there are two CSS files generated from the same CSS file. One by the client build (e.g. /build/client/vendors-S_1f6r_V.css) and one by the server build (e.g. /build/server/assets/vendors-HTcLOMO0.css). Because the server request the CSS file with the generated filename by server build and the client build has a different filename for the same CSS file, the request gets 404.

The file name was different because the file content was different. That was happening because Vite sets build.minify: false for SSR (

vite/packages/vite/src/node/build.ts

Line 338 in bf1e9c2

minify: raw?.ssr ? false : 'esbuild',

) and that makes build.cssMinify: false (

vite/packages/vite/src/node/build.ts

Lines 415 to 417 in bf1e9c2

	if (resolved.cssMinify == null) {
	resolved.cssMinify = !!resolved.minify
	}

).

So setting cssMinify: true to match the file content between server and client would fix this. For example, setting that here (https://github.com/remix-run/remix/blob/e90e7e75040a3983d4d773f4f279c92478364e35/packages/remix-dev/vite/plugin.ts#L709). (I think Vite should default that to true in SSR)

Closing as this is working as intended.
I do think Vite should default that to true in SSR but that's a breaking change and we'll need to wait for Vite 6 (#15637).
For now, I think setting cssMinify: true on remix side would be nice.