Merge pull request #81 from ant-design/beta

🐛 fix: emotion instance should use same cache (#80)
ant-design · Jul 20, 2023 · 7b1a7bf · 7b1a7bf
2 parents 3870df1 + a114763
commit 7b1a7bf
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## [3.4.2-beta.1](https://github.com/ant-design/antd-style/compare/v3.4.1...v3.4.2-beta.1) (2023-07-20)
+
+### 🐛 Bug Fixes
+
+- Emotion instance should use same cache, closes [#80](https://github.com/ant-design/antd-style/issues/80) ([17f804e](https://github.com/ant-design/antd-style/commit/17f804e))
+
 ## [3.4.1](https://github.com/ant-design/antd-style/compare/v3.4.0...v3.4.1) (2023-07-02)
 
 ### 🐛 Bug Fixes

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "antd-style",
-  "version": "3.4.1",
+  "version": "3.4.2-beta.1",
   "description": "a css-in-js solution for application combine with antd v5 token system and emotion",
   "keywords": [
     "antd",

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);
 
   // ******* 下面这些都和主题相关，如果做了任何改动，都需要排查一遍 ************* //