[Bug?]: required <style> tag is removed on navigation

[yume-chan]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

If a <style> tag is (either directly or indirectly) referenced by both app.tsx and routes/a.tsx, but not referenced by routes/b.tsx, it will be removed when navigating from /a to /b.

I think this only happens in dev mode, because prod mode has a different style injection method.

Recording.2024-03-19.210830.mp4

Expected behavior 🤔

The <style> tag keeps there because app.tsx still requires it.

Steps to reproduce 🕹

Steps:

1. Create a new Solid Start project using basic tempate
2. Add <Counter/> to somewhere in app.tsx
3. pnpm dev
4. Click the About link in the top

Observation: the counter button loses its styling

Full repro: https://github.com/yume-chan/style-removed

Context 🔦

This is similar to #1191, although that issue might be caused by their specific configuration, the underlying problem truly exists.

It's not uncommon that the shell layout and some page both reference the same style, for example they both use a <Button> component which imports button.css.

If another page doesn't use that <Button> component, this <style> tag will be removed when navigating to that page, causing bad developer experiences.

The root cause might lay in vinxi, the style runtime might need to count the references to each style, and only remove them when not used. https://github.com/nksaraf/vinxi/blob/main/packages/vinxi/runtime/style.js

Your environment 🌎

## System:
 - OS: Windows 11 10.0.26040
 - CPU: (12) x64 AMD Ryzen 5 5600X 6-Core Processor
 - Memory: 4.49 GB / 31.91 GB
## npmPackages:
 - @solidjs/meta: ^0.29.2 => 0.29.3
 - @solidjs/router: ^0.13.1 => 0.13.1
 - @solidjs/start: ^0.7.6 => 0.7.6
 - solid-js: ^1.8.15 => 1.8.15
 - vinxi: ^0.3.10 => 0.3.10