solid-start icon indicating copy to clipboard operation
solid-start copied to clipboard

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

Open yume-chan opened this issue 3 months ago • 0 comments

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:

  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

yume-chan avatar Mar 19 '24 13:03 yume-chan