docs: document bug in safari that caches css and prevents hmr

[powersurge360]

• I have tried upgrading by running bundle update vite_ruby.
• I have read the troubleshooting section before opening an issue.

Description 📖

In Safari on macOS (at least) when using vite_stylesheet_tag it is difficult to get new copies of a stylesheet as it changes. I believe this is because Safari isn't respecting the Cache-Control: no-cache when an ETag header is set. I am unsure if this is a bug in rails, vite-ruby or vite-rails. I was unable to work out where the ETag is set. I also tried in Chrome and there didn't seem to be an issue.

Reproduction 🐞

Please provide a link to a repo that can reproduce the problem you ran into.

Vite Ruby Info

Run bin/rake vite:info and provide the output:

Logs 📜

If not providing a reproduction:

Output

Run DEBUG=vite-plugin-ruby:* bin/vite dev or DEBUG=vite-plugin-ruby:* bin/vite build and provide the output:

bin/vite present?: true
vite_ruby: 3.2.3
vite_rails: 3.0.12
rails: 7.0.3.1
node: v16.17.0
npm: 8.15.0
yarn: 1.22.19
pnpm: 7.5.2
ruby: ruby 3.1.2p20 (2022-04-12 revision 4491bb740a) [arm64-darwin21]

installed packages:
pimiibo@ /Users/powersurge360/projects/pimiibo
├─┬ vite-plugin-ruby@3.1.2
│ └── vite@3.1.0 deduped
└── vite@3.1.0

Screenshots 📷

Provide console or browser screenshots of the problem.

On first load

On second load

On manually clearing caches and reloading again

[ElMassimo]

Hi Kevin!

Sounds like a bug in Safari, as the spec is very clear on that responses with no-cache should always be revalidated with the server before reusing.

I'll investigate during the week, but given that this library is using Rails stylesheet_link_tag it's unlikely that I'll include a workaround for Safari's behavior here.

See this post for a potential workaround.

[powersurge360]

Sounds very reasonable. Is there any way a note can be added to documentation pointing out that this may not work correctly in Safari? It was a bit of a bear to work out what was flaking. It looks as though the js files don't send etags, so you can import your CSS in your JS files and that also works fine.

[ElMassimo]

Yeah, adding this to the Troubleshooting section, including the "import from JS" workaround would be nice.

PRs are welcome!

[ElMassimo]

Closed by #261, thanks!