#7670: Ensure stylesheets are removed in IsolatedComponent (#8213)

---------
Co-authored-by: Todd Schiller <[email protected]>
Co-authored-by: Graham Langford <[email protected]>

src/components/IsolatedComponent.tsx

@@ -23,17 +23,22 @@ 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";
 
 type LazyFactory<T> = () => Promise<{
   default: React.ComponentType<T>;
 }>;
 
-// 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) {
+/**
+ * Drop the stylesheet injected by `mini-css-extract-plugin` into the main document.
+ *
+ * @warning The `lazyFactory` function should never be called outside `discardStylesheetsWhilePending`
+ * because this helper must catch the stylesheets injected when the factory is first called.
+ */
+async function discardStylesheetsWhilePending(
+  lazyFactory: LazyFactory<unknown>,
+) {
   const baseUrl = chrome.runtime.getURL("");
 
   const observer = new MutationObserver((mutations) => {
@@ -52,9 +57,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> = {
@@ -111,8 +123,9 @@ export default function IsolatedComponent<T>({
     );
   }
 
-  // `discard` must be called before `React.lazy`
-  void discardNewStylesheets(signalFromPromise(lazy()));
+  // `discard` must be called before `React.lazy`.
+  // `discardStylesheetsWhilePending` is needed until this is resolved https://github.com/webpack-contrib/mini-css-extract-plugin/issues/1092#issuecomment-2037540032
+  void discardStylesheetsWhilePending(lazy);
   const LazyComponent = React.lazy(lazy);
 
   const stylesheetUrl = noStyle ? null : chrome.runtime.getURL(`${name}.css`);