renderToString() doesn't embed styles when called in the browser

The problem

When calling React’s renderToString() in the browser, emotion won’t embed the styles into the output HTML. If I’m not mistaken, this was discussed before in https://github.com/emotion-js/emotion/issues/1245, but in the context of jest and without a solution that would work in a real browser.

Proposed solution

I suspect that my problem would be solved by removing the isBrowser check in here: https://github.com/emotion-js/emotion/blob/f4b9dc6ea6863e499586a61b9fd64f2c2cdf4092/packages/styled/src/base.js#L135 I’m pretty sure though it’s there for a reason that’s beyond my knowledge of how emotion is implemented. 😃 I’d appreciate some input on what’s behind that check.

Alternative solutions

Me giving up my plans and rendering on the server instead 🤷‍♀️

Additional context

The reason why I’m trying to do this in the first place is that I’m looking for a way to render React code as HTML that I can in turn feed into an HTML-to-PDF converter, preferably all in the browser.

Using emotion for this might be a bit of a stretch, but I’m close enough to make it happen that I feel like there must be some way.

[Andarist]

The easiest that comes to my mind is to replace <Global/> with an empty element that renders :global() styles after adding a namespace plugin: https://codesandbox.io/s/long-star-x8zmy?file=/src/App.js

[Andarist]

Using @emotion/react this can be quite trivial to achieve: https://codesandbox.io/s/interesting-nash-ipyko?file=/src/App.js