Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

client:only ui component loses its style in a persistent island #8114

Closed
1 task
abernier opened this issue Aug 17, 2023 · 8 comments · Fixed by #8472
Closed
1 task

client:only ui component loses its style in a persistent island #8114

abernier opened this issue Aug 17, 2023 · 8 comments · Fixed by #8472
Assignees
@matthewp
Labels
- P4: important Violate documented behavior or significantly impacts performance (priority) feat: view transitions Related to the View Transitions feature (scope)

Comments

@abernier
Copy link

abernier commented Aug 17, 2023 •
edited
Loading

What version of astro are you using?

2.10.9

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Mac, Linux

What browser are you using?

Chrome

Describe the Bug

I have a transition:persistent island. In that island, I get a client:only React component.

screencast: https://storage.googleapis.com/abernier-portfolio/flyme3.mov

When I navigate to a new page:

  • ✅ island is persisted (my React component not rerendered -- that's fine)
  • ❌ BUT I lose the style imported from my React component

since the Player react-component is not re-rendered, and the island persistent (<marquee> proves it), it's weird my imported style gets touched in the head...

NB: it only happens when client:only

What's the expected result?

the client UI style should be untouched across navigation

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-l21t7u?file=src%2Flayouts%2FLayout.astro,src%2Fpages%2Fmoon.astro,src%2Fcomponents%2FPlayer.tsx,src%2Fpages%2Findex.astro,src%2Fcomponents%2Fplayer.css&on=stackblitz

Participation

  • I am willing to submit a pull request for this issue.
@github-actions github-actions bot added the needs triage Issue needs to be triaged label Aug 17, 2023
@natemoo-re natemoo-re added feat: view transitions Related to the View Transitions feature (scope) - P4: important Violate documented behavior or significantly impacts performance (priority) labels Aug 17, 2023
@github-actions github-actions bot removed the needs triage Issue needs to be triaged label Aug 17, 2023
@erixweb
Copy link

erixweb commented Aug 18, 2023 •
edited
Loading

Hi. I've been looking at the reproducible example and what I did is change from client:only to client:load. This has worked for me.

If you want to use client:only, documentation marks you must specify the correct framework for it to work.

@abernier
Copy link
Author

If you want to use client:only, documentation marks you must specify the correct framework for it to work.

I've tested with client:only="react" but same behaviour

@martrapp
Copy link
Member

martrapp commented Aug 29, 2023 •
edited
Loading

Preliminary analysis:
There is a <style> element in the <head> of the page that contains the styling of the player.
During swap(), it is removed because it is not part of the target page.
The <style> element is not part of either the "from" or the "to" document as sent by the server. (client:only)
It is injected into the <head> by Vite's client lib (@vite/client:updateStyle()).
I suspect this happens only once for the original page, since the island is persistent.

@matthewp matthewp self-assigned this Aug 31, 2023
@martrapp martrapp mentioned this issue Sep 7, 2023
Closed
1 task
@matthewp
Copy link
Contributor

matthewp commented Sep 8, 2023

I love this demo btw 😀

@matthewp
Copy link
Contributor

matthewp commented Sep 8, 2023

Noting that this doesn't happen in prod. That's because at build time client only styles are bundled and included on the page, not injected via CSS.

@matthewp
Copy link
Contributor

matthewp commented Sep 8, 2023

I think the only solution that's likely to work here is keeping styles marked with data-vite-dev-id. We can make this code only occur in dev.

@matthewp matthewp mentioned this issue Sep 8, 2023
Merged
@matthewp
Copy link
Contributor

matthewp commented Sep 8, 2023

PR up

This was referenced Oct 2, 2023
Closed
Closed
Merged
@astrobot-houston astrobot-houston mentioned this issue Oct 6, 2023
Merged
@martrapp
Copy link
Member

martrapp commented Oct 6, 2023

Workaround while we strive to find a good solution:

Note that the issue only occurs in DEV mode, not when build/preview for production.
In DEV mode, you can import the missing CSS files explicitly on the page that uses the client:only component.

@matthewp matthewp mentioned this issue Oct 18, 2023
Closed
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@matthewp matthewp

Labels
- P4: important Violate documented behavior or significantly impacts performance (priority) feat: view transitions Related to the View Transitions feature (scope)
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Prevent style removal of client:only components withastro/astro
5 participants
@abernier @matthewp @natemoo-re @martrapp @erixweb