From 36956810f26b1ca14a6d015ee8256e498a280040 Mon Sep 17 00:00:00 2001
From: Federico Brigante <me@fregante.com>
Date: Wed, 10 Apr 2024 22:41:50 +0700
Subject: [PATCH] Ensure stylesheets are removed in IsolatedComponent

---
 src/components/IsolatedComponent.tsx | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/IsolatedComponent.tsx b/src/components/IsolatedComponent.tsx
index af10027224..cd8e9dd38e 100644
--- a/src/components/IsolatedComponent.tsx
+++ b/src/components/IsolatedComponent.tsx
@@ -23,7 +23,6 @@ import React, { Suspense } from "react";
 import { Stylesheets } from "@/components/Stylesheets";
 import EmotionShadowRoot from "@/components/EmotionShadowRoot";
 import isolatedComponentList from "./isolatedComponentList";
-import { signalFromPromise } from "abort-utils";
 
 const MODE = process.env.SHADOW_DOM as "open" | "closed";
 
@@ -33,7 +32,9 @@ type LazyFactory<T> = () => Promise<{
 
 // Drop the stylesheet injected by `mini-css-extract-plugin` into the main document.
 // Until this is resolved https://github.com/webpack-contrib/mini-css-extract-plugin/issues/1092#issuecomment-2037540032
-async function discardNewStylesheets(signal: AbortSignal) {
+async function discardStylesheetsWhilePending(
+  lazyFactory: LazyFactory<unknown>,
+) {
   const baseUrl = chrome.runtime.getURL("");
 
   const observer = new MutationObserver((mutations) => {
@@ -52,9 +53,16 @@ async function discardNewStylesheets(signal: AbortSignal) {
     childList: true,
   });
 
-  signal.addEventListener("abort", () => {
+  // Call and discard. React.lazy() will call it again and use the result or the error.
+  // This is fine because import() does not re-fetch/re-run the module.
+  try {
+    // The function must be first called *after* the observer is set up.
+    await lazyFactory();
+  } catch {
+    // React.lazy() will take care of it
+  } finally {
     observer.disconnect();
-  });
+  }
 }
 
 type Props<T> = {
@@ -112,7 +120,7 @@ export default function IsolatedComponent<T>({
   }
 
   // `discard` must be called before `React.lazy`
-  void discardNewStylesheets(signalFromPromise(lazy()));
+  void discardStylesheetsWhilePending(lazy);
   const LazyComponent = React.lazy(lazy);
 
   const stylesheetUrl = noStyle ? null : chrome.runtime.getURL(`${name}.css`);