CacheProvider not used in production #2903

sarink · 2022-09-26T21:17:14Z

sarink
Sep 26, 2022

Current behavior:

We are using a custom cache and CacheProvider in our client-side rendered SPA so that <style> tags can be injected into the <head> (because the default implementation is to use insertRule).

In development mode, this works great, I see zillions of <style> tags in the head. However, when deploying to production, I see one empty style tag in the dom: <style data-emotion="css" data-s=""></style>. It's as if our CacheProvider is being completely ignored in production.

To reproduce:

const muiTheme = createTheme();

const cache = createCache({ key: 'css', container: document.head });

export const AppContainer: React.FC = () => (
    <CacheProvider value={cache}>
      <ThemeProvider theme={muiTheme}>
        <App/>
      </ThemeProvider>
    </CacheProvider>
);

Do a build with NODE_ENV = "development", observe <style> tags in the head
Do a build with NODE_ENV = "production", observe there are no <style> tags in the head

Expected behavior:

I expect the CacheProvider to work in production the same way it does in development

Environment information:

react version: 17.0.2
@emotion/react version: 11.9.3

Answered by srmagura

Sep 26, 2022

In production, @emotion/sheet uses "speedy mode" which puts up to 65,000 style rules in a single style tag. They are inserted directly via the CSSOM rather than adding the CSS text to the inside of the <style> tag.

Speedy mode isn't as convenient for debugging style issues which is why it's not enabled by default in development.

If you want to disable speedy mode all together, you can do createCache({ key: 'sarink', speedy: false }). This will decrease performance of course so I would not recommend it.

View full answer

srmagura · 2022-09-26T21:56:18Z

srmagura
Sep 26, 2022

In production, @emotion/sheet uses "speedy mode" which puts up to 65,000 style rules in a single style tag. They are inserted directly via the CSSOM rather than adding the CSS text to the inside of the <style> tag.

Speedy mode isn't as convenient for debugging style issues which is why it's not enabled by default in development.

If you want to disable speedy mode all together, you can do createCache({ key: 'sarink', speedy: false }). This will decrease performance of course so I would not recommend it.

0 replies

sarink · 2022-09-27T03:39:21Z

sarink
Sep 27, 2022
Author

Interesting, that fixed it, thank you @srmagura! Might I suggest some docs on speedy mode? I don't see this mentioned anywhere on the CacheProvider page.

Also, as prerendering is still a popular way for SPAs to satisfy SEO requirements, styles in the head are necessary for this, and many folks familiar with traditional css-in-js are probably accustomed to styles being injected into the head, this new-ish implementation comes as quite a surprise.

I completely understand that insertRule is faster and offers performance benefits, and am thankful that there's a speedy flag to toggle it (we will be using this only during the prerender phase of our build), but I think this ought to be documented a little more clearly.

Thanks!

5 replies

srmagura Sep 27, 2022

A documentation PR for this would be welcome! This is the file you would want to update: https://github.com/emotion-js/emotion/blob/main/packages/cache/README.md.

Hmm, if you are prerendering, Emotion should use the SSR code path. In our automatic SSR support we insert <style> tags (with actual text content) into the <body>. https://emotion.sh/docs/ssr

I assume your prerendering occurs within a typical Node environment? Are you using a framework e.g. Next.js?

sarink Sep 27, 2022
Author

No, we are prerendering a client-side-rendered SPA (a la prerender.io) - these kinds of tools work by navigating to the page, waiting for javascript to finish executing, then exporting the contents of the dom to an html file. It's a cheap lightweight way to achieve similar SEO capabilities without a server at all.

Andarist Sep 27, 2022
Maintainer

The speedy thing + prerendering is already mentioned here: https://emotion.sh/docs/ssr#puppeteer

Maybe those information could be moved elsewhere though

sarink Sep 27, 2022
Author

👀 I guess I missed it. I do think that speedy should be mentioned on the CacheProvider page as well.

Thanks for your quick responses and helping me find this option!

fpmanuel Apr 26, 2023

@srmagura Speedy hasn't been documented yet, right? I can add documentation for it if needed.

erikjalevik · 2022-10-19T10:51:29Z

erikjalevik
Oct 19, 2022

I'm using the CacheProvider to inject styles into a second window opened via window.open (as described here).

This also breaks in production, the styles are missing from the opened window. It seems I can fix it as suggested above by setting speedy: false when creating the cache for the new window. However, I was wondering if there's a way to handle this without disabling speedy mode?

4 replies

Andarist Oct 19, 2022
Maintainer

It should "just work". Speedy mode just changes how the styles are inserted - it doesn't affect what is inserted or removed. Please prepare a repro case for your problem to get a further help

erikjalevik Oct 19, 2022

Unfortunately it doesn't just work. :) It's in an Electron app, if that makes a difference.

I'll see if I can narrow it down to a shareable repro case.

erikjalevik Oct 19, 2022

Actually, all that's needed to reproduce is to add a speedy: true to the createCache statement in the sandbox given as an example in the other issue:

https://codesandbox.io/s/silly-burnell-c4ncs?file=/src/App.tsx

The problem seems to be that sheetForTag inside @emotion/sheet returns null when a cache is created with a detached element like containerEl here.

Andarist Oct 19, 2022
Maintainer

I see - yeah, this might not work fully with detached containers. In such a situation you should not use the speedy mode. Perhaps we could add some kind of a dev-only warning to raise this as a potential issue.

sashless · 2024-03-19T14:27:30Z

sashless
Mar 19, 2024

For some reasons speedy: false on cache is not respected when doing a static storybook build.

In live storybook this works.

I am using @storybook: 7.6.15 and tried @emotion/cache: 10.9.3 and @emotion/cache: 11.11.0 without luck.

3 replies

Andarist Mar 19, 2024
Maintainer

Without a repro, I can't investigate this.

sashless Mar 19, 2024

Yea you are right. For now i am in touch with support @ chromatic regarding storybooks issues there. When there is no trace for a solution i will create a repro. And when we find a solution i will update here. At first i was only in hope for some kind of hint. I should have mention the whole story before. Sorry for that @Andarist

sashless Apr 22, 2024

The storybook static build was forcing a production build. It could not be set via webpacks config and needed to be set via NODE_ENV as in NODE_ENV=development build-storybook. With this speedy flag is respected.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CacheProvider not used in production #2903

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 4 comments 12 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

CacheProvider not used in production #2903

Replies: 4 comments · 12 replies

sarink Sep 27, 2022 Author

sarink Sep 27, 2022 Author

Andarist Sep 27, 2022 Maintainer

sarink Sep 27, 2022 Author

Andarist Oct 19, 2022 Maintainer

Andarist Oct 19, 2022 Maintainer

Andarist Mar 19, 2024 Maintainer

Replies: 4 comments 12 replies

sarink
Sep 27, 2022
Author

sarink Sep 27, 2022
Author

Andarist Sep 27, 2022
Maintainer

sarink Sep 27, 2022
Author

Andarist Oct 19, 2022
Maintainer

Andarist Oct 19, 2022
Maintainer

Andarist Mar 19, 2024
Maintainer