🐛 dynamicStyleElement array should not be clear after remount (#1054)

src/sandbox/patchers/dynamicAppend/common.ts

@@ -349,12 +349,12 @@ export function patchHTMLDynamicAppendPrototypeFunctions(
 
 export function rebuildCSSRules(
   styleSheetElements: HTMLStyleElement[],
-  reAppendElement: (stylesheetElement: HTMLStyleElement) => void,
+  reAppendElement: (stylesheetElement: HTMLStyleElement) => boolean,
 ) {
   styleSheetElements.forEach((stylesheetElement) => {
     // re-append the dynamic stylesheet to sub-app container
-    reAppendElement(stylesheetElement);
-
+    const appendSuccess = reAppendElement(stylesheetElement);
+    if (appendSuccess) {
       /*
       get the stored css rules from styled-components generated element, and the re-insert rules for them.
       note that we must do this after style element had been added to document, which stylesheet would be associated to the document automatically.
@@ -370,5 +370,6 @@ export function rebuildCSSRules(
           }
         }
       }
+    }
   });
 }

src/sandbox/patchers/dynamicAppend/forLooseSandbox.ts

@@ -70,10 +70,16 @@ export function patchLooseSandbox(
     // the dynamic style sheet would be removed automatically while unmoutting
 
     return function rebuild() {
-      rebuildCSSRules(dynamicStyleSheetElements, (stylesheetElement) =>
+      rebuildCSSRules(dynamicStyleSheetElements, (stylesheetElement) => {
+        const appWrapper = appWrapperGetter();
+        if (!appWrapper.contains(stylesheetElement)) {
           // Using document.head.appendChild ensures that appendChild invocation can also directly use the HTMLHeadElement.prototype.appendChild method which is overwritten at mounting phase
-        document.head.appendChild.call(appWrapperGetter(), stylesheetElement),
-      );
+          document.head.appendChild.call(appWrapper, stylesheetElement);
+          return true;
+        }
+
+        return false;
+      });
 
       // As the patcher will be invoked every mounting phase, we could release the cache for gc after rebuilding
       if (mounting) {

src/sandbox/patchers/dynamicAppend/forStrictSandbox.ts

@@ -94,17 +94,21 @@ export function patchStrictSandbox(
       unpatchDocumentCreate();
     }
 
-    proxyAttachContainerConfigMap.delete(proxy);
-
     recordStyledComponentsCSSRules(dynamicStyleSheetElements);
 
     // As now the sub app content all wrapped with a special id container,
     // the dynamic style sheet would be removed automatically while unmoutting
 
     return function rebuild() {
-      rebuildCSSRules(dynamicStyleSheetElements, (stylesheetElement) =>
-        rawHeadAppendChild.call(appWrapperGetter(), stylesheetElement),
-      );
+      rebuildCSSRules(dynamicStyleSheetElements, (stylesheetElement) => {
+        const appWrapper = appWrapperGetter();
+        if (!appWrapper.contains(stylesheetElement)) {
+          rawHeadAppendChild.call(appWrapper, stylesheetElement);
+          return true;
+        }
+
+        return false;
+      });
     };
   };
 }