solid-start
solid-start copied to clipboard
[Bug?]: required `<style>` tag is removed on navigation
Duplicates
- [X] I have searched the existing issues
Latest version
- [X] 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.
https://github.com/solidjs/solid-start/assets/1330321/e8a01d93-8bcf-4f8e-b6d4-75efda25a58d
Expected behavior 🤔
The <style>
tag keeps there because app.tsx
still requires it.
Steps to reproduce 🕹
Steps:
- Create a new Solid Start project using
basic
tempate - Add
<Counter/>
to somewhere inapp.tsx
-
pnpm dev
- 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