search

cristianbote / goober

🥜 goober, a less than 1KB 🎉 css-in-js alternative with a familiar API
https://goober.rocks
MIT License
3.14k stars 119 forks source link

Goober does not revive after <head> is removed and re-added #602

Closed tannerlinsley closed 1 month ago

tannerlinsley commented 1 month ago

In TanStack Start, we use full document hydration with React (e.g. createRoot(document).hydrate(<App />)). Sometimes, hydration errors occur and when they do, React will remove the <head> node and rebuild it on the client. When this happens, any goober classes that were added to the <style> tag before the failure are not readded when run again (e.g. css'...').

Ideally, running goober.css'...' would be able to recover from this, or at least offer a way for us to reset the cache so the styles could be written to the head again.

cristianbote commented 1 month ago

Heya @tannerlinsley, thanks for opening this issue!

That is indeed an interesting behaviour. I will try to replicate it, but top of my head, the way that goober works is that it uses the in-memory stylesheet.data reference to build upon. So, either the reference is detached or something else. Will investigate.

cristianbote commented 1 month ago

ok, so I hope I understood what you were describing and came up with this https://stackblitz.com/edit/vitejs-vite-jgggqu?file=index.html,package.json&terminal=dev

In the above example it seems things are working fine, which leads me to my next question if you can come up with an isolated reproduction so I can figure out what use case exactly is causing issues?

tannerlinsley commented 1 month ago

Yep! I was hoping for an easy fix, but I am more than happy to create a reproduction.

Tanner Linsley TanStack LLC On Oct 22, 2024 at 2:58 AM -0400, Cristian Bote @.***>, wrote:

ok, so I hope I understood what you were describing and came up with this https://stackblitz.com/edit/vitejs-vite-jgggqu?file=index.html,package.json&terminal=dev

• clicking on Recreate head, removes head and recreates it -- effectively what I think happens • clicking on Hydrate hydrates the root

In the above example it seems things are working fine, which leads me to my next question if you can come up with an isolated reproduction so I can figure out what use case exactly is causing issues? — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

tannerlinsley commented 1 month ago

It seems during my reproduction, I was able to find a work around! Thanks for your inspiration!

cristianbote commented 1 month ago

Happy that you figured it out! Do you mind sharing the workaround? 😅 I'm curious of what quirks you had to do.