From 72834f337058cecdb628dbb62043b2bbb16ac3e2 Mon Sep 17 00:00:00 2001 From: ageier Date: Thu, 21 Sep 2023 17:21:46 +0200 Subject: [PATCH 1/3] Return cache directly in getServerStylisCache We are never using the accessor function that is returned. In the code base later we access it like this: `serverStylisCache[name]` and not like this `serverStylisCache(name)` While we could change the access, I'm not sure how we would write to the cache. So I think we can just directly return the cache object. --- packages/cache/src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/cache/src/index.js b/packages/cache/src/index.js index 39d66bf91..000163195 100644 --- a/packages/cache/src/index.js +++ b/packages/cache/src/index.js @@ -37,7 +37,7 @@ let getServerStylisCache = isBrowser : weakMemoize(() => memoize(() => { let cache = {} - return name => cache[name] + return cache }) ) From eaec045ccbd2a4c06a12d0990ba52067f3a5cc78 Mon Sep 17 00:00:00 2001 From: ageier Date: Thu, 21 Sep 2023 17:30:34 +0200 Subject: [PATCH 2/3] Move creation of stylisCache inside createCache function Currently we share caches even for multiple createCache() calls. So if you have an SSR app that reates a cache on the server like this: const cache = createCache({ key: 'custom' }); and you do this (like recommended) on every request, you still share a cache between all requests. I also think this is currently a memory leak. If you have a big application and maybe even lots of dynamic styles the cache can get quite big and will never be garbage collected. --- packages/cache/src/index.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/cache/src/index.js b/packages/cache/src/index.js index 000163195..f1240043a 100644 --- a/packages/cache/src/index.js +++ b/packages/cache/src/index.js @@ -32,18 +32,18 @@ export type Options = { insertionPoint?: HTMLElement } -let getServerStylisCache = isBrowser - ? undefined - : weakMemoize(() => - memoize(() => { - let cache = {} - return cache - }) - ) - const defaultStylisPlugins = [prefixer] let createCache = (options: Options): EmotionCache => { + let getServerStylisCache = isBrowser + ? undefined + : weakMemoize(() => + memoize(() => { + let cache = {} + return cache + }) + ) + let key = options.key if (process.env.NODE_ENV !== 'production' && !key) { From c417aac5e3c5122480f6e959e1db01ce0abf29ae Mon Sep 17 00:00:00 2001 From: ageier Date: Thu, 21 Sep 2023 17:36:21 +0200 Subject: [PATCH 3/3] Add changeset --- .changeset/pink-dancers-wash.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/pink-dancers-wash.md diff --git a/.changeset/pink-dancers-wash.md b/.changeset/pink-dancers-wash.md new file mode 100644 index 000000000..50605e281 --- /dev/null +++ b/.changeset/pink-dancers-wash.md @@ -0,0 +1,5 @@ +--- +'@emotion/cache': patch +--- + +Ensure that caches are not reused for different createCache calls