remix
remix copied to clipboard
remix-run
Different timestamps are being appended to the link tags when preloading a CSS assets
Reproduction
https://stackblitz.com/edit/remix-run-remix-ajdepa?file=app%2Froot.tsx
System Info
System:
OS: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
CPU: (24) x64 13th Gen Intel(R) Core(TM) i7-13700KF
Memory: 8.98 GB / 15.54 GB
Container: Yes
Shell: 5.8.1 - /usr/bin/zsh
Binaries:
Node: 20.11.1 - /run/user/1000/fnm_multishells/54183_1711393627418/bin/node
npm: 10.2.4 - /run/user/1000/fnm_multishells/54183_1711393627418/bin/npm
pnpm: 8.15.5 - /run/user/1000/fnm_multishells/54183_1711393627418/bin/pnpm
Browsers:
Chrome: 123.0.6312.58
npmPackages:
@remix-run/dev: 2.8.1 => 2.8.1
@remix-run/node: 2.8.1 => 2.8.1
@remix-run/react: 2.8.1 => 2.8.1
@remix-run/serve: 2.8.1 => 2.8.1
vite: 5.2.6 => 5.2.6
Used Package Manager
pnpm
Expected Behavior
Both the preload and the regular link tags should be updated with the same timestamp.
Actual Behavior
When preloading a CSS asset after the initial load, the timestamps differ between the preload link and the regular link tag, as only the preload link tag is updated with the new timestamp. This causes the browser to not reflect any changes made to the CSS file.
The timestamp will update correctly and HMR works as expected if the stylesheet link is in the <body> tag while keeping the preload link inside the <head>. I don't think you would need the same stylesheet preloaded if it's already in the <head>. If you really want to send it earlier, then the HTTP Link Header might be a better fit.
Here's a demo using the Link preload method:
https://stackblitz.com/edit/remix-run-remix-qvjdby
I also tried playing around with your setup to force the timestamp update by following the manual mode docs, but it looks like HMR still ignores updating the second stylesheet link if they're both in the <head>.
