🐛 fix: emotion instance should use same cache (#80)

* feat: createGlobal * fix: mutiple emotion instance with same cache * Revert "feat: createGlobal" This reverts commit da4b2e0. * chore: code clean
ant-design · Jul 20, 2023 · 17f804e · 17f804e
1 parent 3870df1
commit 17f804e
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/src/core/CacheManager.ts b/src/core/CacheManager.ts
@@ -4,10 +4,14 @@ import { EmotionCache } from '@emotion/css/create-instance';
 export class CacheManager {
   private _cacheList: EmotionCache[] = [cache];
 
-  add(cache: EmotionCache) {
-    if (this.hasCache(cache)) return;
-
-    this._cacheList.push(cache);
+  add(cache: EmotionCache): EmotionCache {
+    const existCache = this.getCache(cache.key);
+    if (existCache) {
+      return existCache;
+    } else {
+      this._cacheList.push(cache);
+      return cache;
+    }
   }
 
   delete(cache: EmotionCache) {
@@ -18,6 +22,10 @@ export class CacheManager {
     return this._cacheList.some((c) => c.key === cache.key);
   }
 
+  getCache(key: string) {
+    return this._cacheList.find((c) => c.key === key);
+  }
+
   getCacheList() {
     return this._cacheList;
   }

diff --git a/src/factories/createStyleProvider/index.tsx b/src/factories/createStyleProvider/index.tsx
@@ -98,7 +98,7 @@ export const createStyleProvider = (EmotionContext: Context<Emotion>): FC<StyleP
 
         if (cacheManager) {
           // add 方法有幂等
-          cacheManager.add(instance.cache);
+          instance.cache = cacheManager.add(instance.cache);
         }
 
         return instance;

diff --git a/src/functions/createInstance.ts b/src/functions/createInstance.ts
@@ -73,7 +73,7 @@ export const createInstance = <T = any>(options: CreateOptions<T>) => {
   const StyleProvider = createStyleProvider(EmotionContext);
 
   // 将 cache 存到全局管理器中
-  cacheManager.add(emotion.cache);
+  emotion.cache = cacheManager.add(emotion.cache);
 
   // ******* 下面这些都和主题相关，如果做了任何改动，都需要排查一遍 ************* //