Turn off Emotion's warnings about potentially unsafe pseudo-selectors in SSR

[Andarist]

Issue: #18103

What I did

I've configured .compat flag "globally", for the whole Storybook app. I didn't test it thoroughly - but to the best of my knowledge, this should be enough to fix this.

How to test

• Is this testable with Jest or Chromatic screenshots?
• Does this need a new example in the kitchen sink apps?
• Does this need an update to the documentation?

If your answer is yes to any of these, please make sure to include it in your PR.

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit ca86e9d. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 1 target

• nx run-many --target=prepare --all --parallel=2 --max-parallel=15 -- --optimized

---

Sent with 💌 from NxCloud.

[kylegach]

Hey, @Andarist. Thanks for the fix!

Does that emotion config make these selectors work as expected in SSR? Asking because the Docs 2.0 work coming in 7.0 will need to be usable in SSR environments, so a solution that merely mutes the warning won't be sufficient.

[Andarist]

Does that emotion config make these selectors work as expected in SSR? Asking because the Docs 2.0 work coming in 7.0 will need to be usable in SSR environments, so a solution that merely mutes the warning won't be sufficient.

It's not that those selectors don't work when using SSR - it's just contextual and depending on the DOM structure, selectors etc you might end up with FOUC effects (we just warn people asap about this potential problem, so they don't have to learn about it the hard way). If you have control over your SSR setup then it might be possible to extract your styles to the head and then you wont have such problems - so you could use this flag to suppress the warning as it wouldn't be applicable for you anyway.

However, if you plan to use streaming rendering then you won't be able to just move your styles to head because with that HTML might be flushed to the client in chunks. And in such a setup it's just impossible to collect all the styles upfront and to "insert" them directly to head during SSR.

We have some ideas to render <style>+<script> during SSR and with that, potentially, styles could be moved to the head on the client side. This would, hopefully, mitigate those problems altogether - at the expense of additional scripts rendered by the server. This is not implemented today though.

[tmeasday]

Thanks for this @Andarist

Discussed this with @shilman -- for now we'll merge this PR to get rid of the warnings. As we work on the docs 2 project and in particular build a separate Storybook for the doc block components, we should be sure not to disable these warnings and endeavour to avoid any using any styles that will run into these problems. These "doc block" components are intended to be used by arbitrary consumers so we cannot make any assumptions about their rendering environment. cc @okonet

[Andarist]

As we work on the docs 2 project and in particular build a separate Storybook for the doc block components, we should be sure not to disable these warnings and endeavour to avoid any using any styles that will run into these problems. These "doc block" components are intended to be used by arbitrary consumers so we cannot make any assumptions about their rendering environment.

Oh, totally. This PR is supposed only to be a quick win for the majority of your Storybook-focused consumers. I'll try to take a look at the core of the problem soon-ish but it's not at the top of my todo list so I just need to burn through some other tasks to get to it.

[jpveooys]

Would it be possible to backport this fix to 6.5.x? Thanks