inlined SVG is not updated unless the server is restarted

[silvenon]

Describe the bug

I'm implementing my own solution for avoiding FOUC during SSR using Environment API. I'm aware that Vite doesn't offer any recommended path to do this (#16515), I tried implementing various iterations of Hiroshi's plugin linked in that issue, but I wasn't able to make it work, and I didn't need much of that logic for my app anyway.

My project has a single CSS entry point, and what I've found is that if I import it with ?url on SSR, insert the <link> tag, and HMR will just work upon updating the CSS out of the box! I don't know why 😅

However, I've now also found out that updating images imported by that CSS via url() aren't reflected in that CSS, even after a hard refresh. But I also see why — my SVG has already been inlined into the CSS, so the connection has been lost. I can work around this by forcing Vite not to inline during development via build.assetInlineLimit: () => false, now after refreshing the page I get the update, but I'd also like HMR too if possible. However, the build.assetInlineLimit thing doesn't feel like a workaround, but like a hack, I want to understand what's going on and how to do things the Vite way, whatever that might look like.

Any advice for me? Am I going about this the wrong way? Is Vite behaving here as expected by inlining the linked asset during development in SSR with the ?url import? This is something between a bug report and a question, I hope you don't mind me filing it here, it took me a long time to narrow it down.

This is a development-only issue.

Reproduction

https://github.com/silvenon/repro/tree/vite-avoiding-fouc-hmr-css-imports (note the branch name when cloning)

Steps to reproduce

# if you have GitHub CLI
# not sure if this works for cloning just that branch
gh repo clone silvenon/repro tmp-repro -- --branch vite-avoiding-fouc-hmr-css-imports
cd tmp-repro

# alternative to the above if you don't have gh or the --branch thingy doesn't work
git clone https://github.com/silvenon/repro.git tmp-repro
cd tmp-repro
git switch vite-avoiding-fouc-hmr-css-imports

npm install
npm run dev -- --open

• edit the CSS file, it will get updated
• edit the linked SVG file, for example change the stroke color, it won't get updated, even after a hard refresh

As you can guess, the repro (most likely) doesn't need React, I included it because it's easier for me to inline markup that way :smi

System Info

System:
    OS: macOS 15.1.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 226.16 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.18.1 - ~/.n/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.8.2 - ~/.n/bin/npm
    pnpm: 9.15.0 - /opt/homebrew/bin/pnpm
    bun: 1.1.29 - ~/.bun/bin/bun
  Browsers:
    Chrome: 131.0.6778.140
    Edge: 131.0.2903.99
    Safari: 18.1.1
  npmPackages:
    vite: ^6.0.3 => 6.0.3

Used Package Manager

npm

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.

[sapphi-red]

It looks like a bug. It seems this happens without SSR: https://stackblitz.com/edit/vitejs-vite-nsqeovkr?file=src%2Fripples.svg&terminal=dev

[silvenon]

Thanks for confirming and already working on the solution!

Huh, I'm surprised to find this in regular client environment as well, I thought I tested this there and found the regular /ripples.svg link in the compiled development code, I'll let you know if I remember how I ended up with that.