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.

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

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

Merged
merged 2 commits into from May 31, 2022

Conversation

Andarist
Copy link
Contributor

@Andarist Andarist commented May 30, 2022

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.

@Andarist Andarist requested review from shilman and ndelangen May 30, 2022
@nx-cloud
Copy link

nx-cloud bot commented May 30, 2022

☁️ 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

Sent with 💌 from NxCloud.

@kylegach
Copy link
Collaborator

kylegach commented May 30, 2022

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
Copy link
Contributor Author

Andarist commented May 30, 2022

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
Copy link
Member

tmeasday commented May 31, 2022

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

@tmeasday tmeasday merged commit 1dedebb into next May 31, 2022
44 of 46 checks passed
@tmeasday tmeasday deleted the disable-emotion-unsafe-ssr-warnings branch May 31, 2022
@Andarist
Copy link
Contributor Author

Andarist commented May 31, 2022

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
Copy link

jpveooys commented Jun 6, 2022

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

@shilman shilman added patch Bugfix & documentation PR that need to be picked to master branch picked Patch/release PRs cherry-picked to master/release branch and removed picked Patch/release PRs cherry-picked to master/release branch labels Jun 7, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug patch Bugfix & documentation PR that need to be picked to master branch picked Patch/release PRs cherry-picked to master/release branch ui
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

6 participants