EmotionCacheProvider prevents style from being injected during Preact-CLI SSR

[micahjon]

Current behavior:

Preact CLI is compatible with Emotion, and has a feature where it will pre-render routes (SSR) to improve first-paint times.

However, when an <EmotionCacheProvider> is used, components that live in multiple pre-rendered routes will only be given styles in the first pre-rendered route. Evidently, <EmotionCacheProvider> prevents Emotion from injecting <style data-emotion="..."> tags more than once.

The end result is that shared Emotion components (e.g. header, footer) are unstyled during first paint, and FOUT ensues.

To reproduce:

Reduced test case in this post (only takes a minute to setup with npx)
preactjs/preact-cli#1713 (comment)

Expected behavior:

Ideally, it would be possible to use <EmotionCacheProvider> to modify Stylis plugins but not modify other Emotion behavior, in this case it behaving differently when pre-rendered multiple times on the server.

Environment information:

Every package in the reduced test case is up-to-date (reproduced an hour ago w/ a fresh install)

• "preact": "^10.3.2",
• "@emotion/react": "^11.9.3",
• "@emotion/styled": "^11.9.3",

Really appreciate your help with this issue. Thank you!

[srmagura]

I think a single cache instance is being reused across multiple HTML pages. cache.sheet keeps track of the style tags it has inserted, so if you reuse the same cache, it won't insert the same style tag twice.

Your components/header/index.js file is executed once when it is imported for the first time, and this is when the cache gets created. After that, importing the file again won't cause a new cache to be created.

I tested a similar case with Next.js prerendering (next export) and found that Next is generating each page in a separate JavaScript "context", meaning a new cache will be created for each page. I'm not sure exactly how they are doing this.

By the way, we don't test against Preact so I can't fully recommend using Emotion + Preact together.

[micahjon]

Thanks @srmagura. Is there any way to disable the default prefixer Stylis plugin (injects a ton of unnecessary flexbox prefixed styles) without creating a CacheProvider? That's the only reason I'm using it.

Happy to jump through hoops to make this happen (e.g. fork a repo, etc), just not sure where to begin!

[srmagura]

I agree with you there ;). See the issue I created about it: #2747. The last paragraph tells you how to disable prefixer.

[srmagura]

Oh, you said without creating a CacheProvider. You would probably have to fork Emotion or use something like https://www.npmjs.com/package/patch-package.