From 7fa3eb28f335a3988593ac3cec28477fd65593a5 Mon Sep 17 00:00:00 2001
From: Zt448143356 <48010552+Zt448143356@users.noreply.github.com>
Date: Mon, 9 May 2022 15:21:42 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9BCSS=20should=20not=20process=20dupl?=
 =?UTF-8?q?icated=20in=20experimentalStyleIsolation=20(#2075)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/sandbox/patchers/__tests__/css.test.ts | 29 ++++++++++++++++++++++
 src/sandbox/patchers/css.ts                |  5 ++++
 2 files changed, 34 insertions(+)

diff --git a/src/sandbox/patchers/__tests__/css.test.ts b/src/sandbox/patchers/__tests__/css.test.ts
index 7f5a657..1fdb5a9 100644
--- a/src/sandbox/patchers/__tests__/css.test.ts
+++ b/src/sandbox/patchers/__tests__/css.test.ts
@@ -301,6 +301,35 @@ test('should not transform @font-face', () => {
   expect(removeWs(styleNode.textContent)).toBe(removeWs(expectValue));
 });
 
+test('should not transform style that has already been transform [1]', async () => {
+  const actualValue = '.react15-main {display: flex;}';
+  const expectValue = 'div[data-qiankun="react15"] .react15-main {display: flex;}';
+
+  const styleNode = fakeStyleNode('');
+  CSSProcessor.process(styleNode, 'div[data-qiankun="react15"]');
+
+  const textNode = document.createTextNode(actualValue);
+  styleNode.appendChild(textNode);
+
+  await sleep(10);
+
+  CSSProcessor.process(styleNode, 'div[data-qiankun="react15"]');
+
+  expect(removeWs(styleNode.textContent)).toBe(removeWs(expectValue));
+});
+
+test('should not transform style that has already been transform [2]', async () => {
+  const actualValue = '.react15-main {display: flex;}';
+  const expectValue = 'div[data-qiankun="react15"] .react15-main {display: flex;}';
+
+  const styleNode = fakeStyleNode(actualValue);
+  CSSProcessor.process(styleNode, 'div[data-qiankun="react15"]');
+
+  CSSProcessor.process(styleNode, 'div[data-qiankun="react15"]');
+
+  expect(removeWs(styleNode.textContent)).toBe(removeWs(expectValue));
+});
+
 // jest cannot handle @page directive correctly
 test.skip('should not transform @page', () => {
   const actualValue = '@page {margin: 1cm;}';
diff --git a/src/sandbox/patchers/css.ts b/src/sandbox/patchers/css.ts
index 1bcbbc9..3423149 100644
--- a/src/sandbox/patchers/css.ts
+++ b/src/sandbox/patchers/css.ts
@@ -41,6 +41,10 @@ export class ScopedCSS {
   }
 
   process(styleNode: HTMLStyleElement, prefix: string = '') {
+    if (ScopedCSS.ModifiedTag in styleNode) {
+      return;
+    }
+
     if (styleNode.textContent !== '') {
       const textNode = document.createTextNode(styleNode.textContent || '');
       this.swapNode.appendChild(textNode);
@@ -52,6 +56,7 @@ export class ScopedCSS {
 
       // cleanup
       this.swapNode.removeChild(textNode);
+      (styleNode as any)[ScopedCSS.ModifiedTag] = true;
       return;
     }