docs(examples): Add Emotion example

[helderberto]

No description provided.

[remix-cla-bot]

Hi @helderburato,

Welcome, and thank you for contributing to Remix!

Before we consider your pull request, we ask that you sign our Contributor License Agreement (CLA). We require this only once.

You may review the CLA and sign it by adding your name to contributors.yml.

Once the CLA is signed, the CLA Signed label will be added to the pull request.

If you have already signed the CLA and received this response in error, or if you have any questions, please contact us at [email protected].

Thanks!

- The Remix team

[remix-cla-bot]

Thank you for signing the Contributor License Agreement. Let's get this merged! 🥳

[danestves]

Hi, can you test if this implementation works with Cloudflare Worker? I try it, but it's appearing that emotion is calling some packages that don't work in a worker

[kentcdodds]

Thanks for taking the time here!

Could you add one or two routes to make sure that it works across those route boundaries? And double-check that CatchBoundary and ErrorBoundary on the root route will work because I'm not certain it will.

[helderberto]

Hey @kentcdodds!

If I catch this well, I added two new routes /jokes and /jokes/:id and a CatchBoundary to the root`. Is that what you expect?

The styles still working through the routes.

---

Ps.: I tested it in an incognito tab and working well, could you check it again? @kentcdodds,

If it's ok, I'll update example #1495 to the same approach.

[kentcdodds]

My big concern is that if there's a CatchBoundary or an ErrorBoundary and those are rendered due to an error, all the styles will be removed because the App (where the styles are rendered) will be removed from the page. If you can verify that's not a problem then we can go forward with this. Otherwise we may need to come up with a different approach.

[helderberto]

If I catch it well, I triggered a catch/error boundary into the jokes/:jokeId and jokes/not-found, like the following screenshots:

And the styles persist into the nested routes.

Is that what you expect @kentcdodds ?

---

If so, I can apply the same to the #1495

[kentcdodds]

What if you have a CatchBoundary and ErrorBoundary in the root.tsx file and those are rendered? My guess is the styles will all be removed in that case because the App (which renders the styles) will be replaced by the CatchBoundary and the ErrorBoundary.

[kentcdodds]

Here are more details on the issue with CSS-in-JS: #1512 (comment)

[helderberto]

Hi @kentcdodds, I updated the project at the commit 7894b95.

The behavior looks like this:

Root Error

CSS Rendered

Is that the expected?

[kentcdodds]

If it's server rendered then it works fine. But it breaks for client transitions. Can you try doing the same thing I'm doing in that video?

[ulentini]

I was able to reproduce the problem and it actually breaks the client, like with other CSS-in-JS libraries.
I was also able to fix it starting from @primos63 repo (where he fixed it for ChakraUI): https://github.com/primos63/chakra-remix-example

@helderburato, let me know if you want me to make a PR to your branch.

[helderberto]

Based on your comments, I used the link @ulentini mentioned to fix the client-side issues.

Thanks, @ulentini for sharing the Chakra link.

[helderberto]

What do you think about @kentcdodds ?

[kentcdodds]

This is awesome! Could you have a section in the README that describes how the example works and why you need to interact with the cache? Also make reference to the relevant files in the example. Then this will be ready to merge. Thanks!

[kentcdodds]

Super 👍

This is very helpful. Thank you 👏👏