From ed76473ecf5fc5e67305a87b1391d613227c117c Mon Sep 17 00:00:00 2001 From: duoma Date: Fri, 18 Aug 2023 12:19:04 +0800 Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dstyled-components?= =?UTF-8?q?=E5=85=BC=E5=AE=B9=E6=80=A7=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/sandbox/patchers/dynamicAppend/common.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/sandbox/patchers/dynamicAppend/common.ts b/src/sandbox/patchers/dynamicAppend/common.ts index eea4acb11..ff6d5ebe1 100644 --- a/src/sandbox/patchers/dynamicAppend/common.ts +++ b/src/sandbox/patchers/dynamicAppend/common.ts @@ -181,6 +181,17 @@ export function recordStyledComponentsCSSRules(styleElements: HTMLStyleElement[] */ if (styleElement instanceof HTMLStyleElement && isStyledComponentsLike(styleElement)) { if (styleElement.sheet) { + if (!styledComponentCSSRulesMap.has(styleElement)) { + const originInsertRule = styleElement.sheet.insertRule; + + styleElement.sheet.insertRule = function resetInsertRule(...args: [string, number]) { + if (styleElement.sheet?.insertRule && styleElement.sheet.insertRule !== resetInsertRule) { + return styleElement.sheet.insertRule(...args); + } else { + return originInsertRule(...args); + } + }; + } // record the original css rules of the style element for restore styledComponentCSSRulesMap.set(styleElement, (styleElement.sheet as CSSStyleSheet).cssRules); } From c04e61ff2210c8e8ca76f214a8e50a1e82ef1462 Mon Sep 17 00:00:00 2001 From: duoma Date: Fri, 18 Aug 2023 16:04:29 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E5=85=BC=E5=AE=B9deleteRule=20cssRu?= =?UTF-8?q?le=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/sandbox/patchers/dynamicAppend/common.ts | 38 +++++++++++++++----- 1 file changed, 29 insertions(+), 9 deletions(-) diff --git a/src/sandbox/patchers/dynamicAppend/common.ts b/src/sandbox/patchers/dynamicAppend/common.ts index ff6d5ebe1..3b2441333 100644 --- a/src/sandbox/patchers/dynamicAppend/common.ts +++ b/src/sandbox/patchers/dynamicAppend/common.ts @@ -182,15 +182,35 @@ export function recordStyledComponentsCSSRules(styleElements: HTMLStyleElement[] if (styleElement instanceof HTMLStyleElement && isStyledComponentsLike(styleElement)) { if (styleElement.sheet) { if (!styledComponentCSSRulesMap.has(styleElement)) { - const originInsertRule = styleElement.sheet.insertRule; - - styleElement.sheet.insertRule = function resetInsertRule(...args: [string, number]) { - if (styleElement.sheet?.insertRule && styleElement.sheet.insertRule !== resetInsertRule) { - return styleElement.sheet.insertRule(...args); - } else { - return originInsertRule(...args); - } - }; + const originSheet = styleElement.sheet; + + (['insertRule', 'deleteRule'] as const).forEach((key) => { + const originSheetFn = originSheet[key]; + + originSheet[key] = function resetSheetFn(...args: any[]) { + if (styleElement.sheet?.[key] && styleElement.sheet[key] !== resetSheetFn) { + // @ts-ignore + return styleElement.sheet[key].call(styleElement.sheet, ...args); + } else { + // @ts-ignore + return originSheetFn.call(originSheet, ...args); + } + }; + }); + + (['cssRules'] as const).forEach((key) => { + const originSheetElement = originSheet[key]; + + Object.defineProperty(originSheet, key, { + get() { + if (styleElement.sheet && styleElement.sheet !== originSheet) { + return styleElement.sheet[key]; + } else { + return originSheetElement; + } + }, + }); + }); } // record the original css rules of the style element for restore styledComponentCSSRulesMap.set(styleElement, (styleElement.sheet as CSSStyleSheet).cssRules);