Merge 15d8786 into 523e1f1

ant-design · Jul 21, 2023 · 5a98ba9 · 5a98ba9
2 parents 523e1f1 + 15d8786
commit 5a98ba9
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 11 deletions.
diff --git a/src/hooks/useStyleRegister/cacheMapUtil.ts b/src/hooks/useStyleRegister/cacheMapUtil.ts
@@ -24,9 +24,9 @@ let fromCSSFile = true;
 /**
  * @private Test usage only. Can save remove if no need.
  */
-export function reset(mockCache?: Record<string, string>, from = true) {
+export function reset(mockCache?: Record<string, string>, fromFile = true) {
   cachePathMap = mockCache!;
-  fromCSSFile = from;
+  fromCSSFile = fromFile;
 }
 
 export function prepare() {
@@ -36,6 +36,9 @@ export function prepare() {
     if (canUseDom()) {
       const div = document.createElement('div');
       div.className = ATTR_CACHE_MAP;
+      div.style.position = 'fixed';
+      div.style.visibility = 'hidden';
+      div.style.top = '-9999px';
       document.body.appendChild(div);
 
       let content = getComputedStyle(div).content || '';
@@ -69,14 +72,23 @@ export function getStyleAndHash(
   path: string,
 ): [style: string | null, hash: string] {
   const hash = cachePathMap[path];
-  let styleStr: string | null = CSS_FILE_STYLE;
-
-  if (!fromCSSFile && hash && canUseDom()) {
-    const style = document.querySelector(
-      `style[${ATTR_MARK}="${cachePathMap[path]}"]`,
-    );
-
-    styleStr = style?.innerHTML || null;
+  let styleStr: string | null = null;
+
+  if (hash && canUseDom()) {
+    if (fromCSSFile) {
+      styleStr = CSS_FILE_STYLE;
+    } else {
+      const style = document.querySelector(
+        `style[${ATTR_MARK}="${cachePathMap[path]}"]`,
+      );
+
+      if (style) {
+        styleStr = style.innerHTML;
+      } else {
+        // Clean up since not exist anymore
+        delete cachePathMap[path];
+      }
+    }
   }
 
   return [styleStr, hash];

diff --git a/tests/server.spec.tsx b/tests/server.spec.tsx
@@ -53,7 +53,6 @@ describe('SSR', () => {
     canUseDom.mockReturnValue(false);
 
     reset();
-    // (getStyleAndHash as any).mockReset();
     errorSpy.mockReset();
 
     const styles = Array.from(document.head.querySelectorAll('style'));
@@ -177,6 +176,8 @@ describe('SSR', () => {
     expect(document.head.querySelectorAll('style')).toHaveLength(3);
 
     expect(errorSpy).not.toHaveBeenCalled();
+
+    getStyleAndHash.mockRestore();
   });
 
   it('default hashPriority', () => {
@@ -325,4 +326,36 @@ describe('SSR', () => {
       );
     });
   });
+
+  it('ssr hydrate should clean not exist style', () => {
+    canUseDom.mockReturnValue(true);
+
+    reset(
+      {
+        exist: 'exist',
+        notExist: 'notExist',
+      },
+      false,
+    );
+
+    const getStyleAndHash = vi.spyOn(cacheMapUtil, 'getStyleAndHash');
+
+    document.head.innerHTML = `<style ${ATTR_MARK}="exist">.test{}</style>`;
+
+    // Exist check
+    cacheMapUtil.getStyleAndHash('exist');
+    expect(getStyleAndHash).toHaveReturnedWith(['.test{}', 'exist']);
+
+    // Not Exist check
+    getStyleAndHash.mockClear();
+    cacheMapUtil.getStyleAndHash('notExist');
+    expect(getStyleAndHash).toHaveReturnedWith([null, 'notExist']);
+
+    // Call again will get undefined since cache cleaned
+    getStyleAndHash.mockClear();
+    cacheMapUtil.getStyleAndHash('notExist');
+    expect(getStyleAndHash).toHaveReturnedWith([null, undefined]);
+
+    getStyleAndHash.mockRestore();
+  });
 });