React, View transitions and Sonner js

[FrancoJavierGadea]

Astro Info

Astro                    v3.4.4
Node                     v18.17.1
System                   Windows (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/react

If this issue only occurs in one browser, which browser is a problem?

All

Describe the Bug

Working with View Transitions and Sonner js, I've encountered an issue where the CSS styles injected into the by the library using JavaScript and the tag do not persist when navigating between pages.

This is easily resolved by directly importing the CSS styles into the component.

I'm unsure whether other React libraries use a similar mechanism of injecting CSS styles into the head using JavaScript, but these styles will always be lost when navigating between pages.

It's a minor issue, but something to keep in mind.

What's the expected result?

Persisting all <style></style> tags in the head ?

Restarting all scripts associated with React ?

The clearest solution is to always recommend importing CSS styles directly.

Although in the case of Sonner js, there isn't even a style.css file in the final distribution; everything is within JavaScript, and to import them, you have to download them from GitHub.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-pvwvns

Participation

• [ ] I am willing to submit a pull request for this issue.

[natemoo-re]

Unfortunately, there's not much we can do to automatically make this client-side style injection work automatically. Before performing a navigation, our View Transitions router emits the astro:before-swap event, which can be used to customize the swapping behavior or copy over the injected style element.

One possible solution might be for Sonner to distribute their style.css file alongside their JavaScript code and allow users to import it as needed.

[alexsrebernic]

I face the same dilemma as the OP. My React setup involves injecting CSS via JavaScript, but during View Transitions, all CSS seems to vanish. It's baffling that such behavior persists, especially given the prevalence of modern libraries and components that handle this seamlessly. After all, it's JavaScript execution, so encountering this issue seems nonsensical.