fix: Support cross-frame rendering in missing styles check (#3735)

Author: just-boris

src/internal/hooks/use-base-component/__tests__/styles-check-hook.test.tsx

@@ -1,13 +1,14 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useRef } from 'react';
 import { render, waitFor } from '@testing-library/react';
 
 import { useMissingStylesCheck } from '../../../../../lib/components/internal/hooks/use-base-component/styles-check';
 
 function Test() {
-  useMissingStylesCheck();
-  return null;
+  const ref = useRef<HTMLDivElement>(null);
+  useMissingStylesCheck(ref);
+  return <div></div>;
 }
 
 let consoleMock: jest.SpyInstance;

src/internal/hooks/use-base-component/__tests__/styles-check-pure.test.ts

@@ -35,13 +35,13 @@ describe('checkMissingStyles', () => {
         --awsui-version-info-${GIT_SHA}: true;
       }
   `;
-    checkMissingStyles();
+    checkMissingStyles(document);
     expect(consoleWarnSpy).not.toHaveBeenCalled();
     expect(sendPanoramaMetricSpy).not.toHaveBeenCalled();
   });
 
   test('should detect missing styles', () => {
-    checkMissingStyles();
+    checkMissingStyles(document);
     expect(consoleWarnSpy).toHaveBeenCalledWith(
       'Missing AWS-UI CSS for theme "default", version "3.0.0 (abc)", and git sha "abc".'
     );
@@ -54,12 +54,55 @@ describe('checkMissingStyles', () => {
         --awsui-version-info-c4d5e6: true;
       }
   `;
-    checkMissingStyles();
+    checkMissingStyles(document);
     expect(consoleWarnSpy).toHaveBeenCalledWith(
       'Missing AWS-UI CSS for theme "default", version "3.0.0 (abc)", and git sha "abc".'
     );
     expect(sendPanoramaMetricSpy).toHaveBeenCalledWith('awsui-missing-css-asset', {});
   });
+
+  describe('in iframe', () => {
+    let iframe: HTMLIFrameElement;
+    let iframeDocument: Document;
+
+    beforeEach(() => {
+      iframe = document.createElement('iframe');
+      document.body.appendChild(iframe);
+      iframeDocument = iframe.contentDocument!;
+    });
+
+    afterEach(() => {
+      iframe.remove();
+    });
+
+    test('should pass the check if styles found inside an iframe', () => {
+      const iframeStyle = document.createElement('style');
+      iframeDocument.body.append(iframeStyle);
+      // using :root does not work in JSDOM: https://github.com/jsdom/jsdom/issues/3563
+      iframeStyle.textContent = `
+          body {
+            --awsui-version-info-${GIT_SHA}: true;
+          }
+      `;
+      checkMissingStyles(iframeDocument);
+      expect(consoleWarnSpy).not.toHaveBeenCalled();
+      expect(sendPanoramaMetricSpy).not.toHaveBeenCalled();
+    });
+
+    test('should report missing styles if rendered in a different iframe', () => {
+      style.textContent = `
+          body {
+            --awsui-version-info-${GIT_SHA}: true;
+          }
+      `;
+
+      checkMissingStyles(iframeDocument);
+      expect(consoleWarnSpy).toHaveBeenCalledWith(
+        'Missing AWS-UI CSS for theme "default", version "3.0.0 (abc)", and git sha "abc".'
+      );
+      expect(sendPanoramaMetricSpy).toHaveBeenCalledWith('awsui-missing-css-asset', {});
+    });
+  });
 });
 
 describe('idleWithDelay', () => {

src/internal/hooks/use-base-component/index.ts

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { MutableRefObject } from 'react';
+import React, { MutableRefObject } from 'react';
 
 import {
   ComponentConfiguration,
@@ -32,12 +32,12 @@ export default function useBaseComponent<T = any>(
   const isVisualRefresh = useVisualRefresh();
   const theme = getVisualTheme(THEME, isVisualRefresh);
   useComponentMetrics(componentName, { packageSource: PACKAGE_SOURCE, packageVersion: PACKAGE_VERSION, theme }, config);
-  useMissingStylesCheck();
   const elementRef = useComponentMetadata<T>(
     componentName,
     { packageName: PACKAGE_SOURCE, version: PACKAGE_VERSION, theme },
     analyticsMetadata as any
   );
-  useFocusVisible(elementRef as MutableRefObject<HTMLElement>);
+  useMissingStylesCheck(elementRef as React.RefObject<HTMLElement>);
+  useFocusVisible(elementRef as React.RefObject<HTMLElement>);
   return { __internalRootRef: elementRef };
 }

src/internal/hooks/use-base-component/styles-check.ts

@@ -1,12 +1,12 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 
 import { GIT_SHA, PACKAGE_VERSION, THEME } from '../../environment';
 import { metrics } from '../../metrics';
 
-export function checkMissingStyles() {
-  const result = getComputedStyle(document.body).getPropertyValue(`--awsui-version-info-${GIT_SHA}`);
+export function checkMissingStyles(ownerDocument: Document) {
+  const result = getComputedStyle(ownerDocument.body).getPropertyValue(`--awsui-version-info-${GIT_SHA}`);
   if (!result) {
     console.error(`Missing AWS-UI CSS for theme "${THEME}", version "${PACKAGE_VERSION}", and git sha "${GIT_SHA}".`);
     metrics.sendOpsMetricObject('awsui-missing-css-asset', {});
@@ -37,16 +37,18 @@ export function idleWithDelay(cb: () => void) {
   };
 }
 
-let checked = false;
-const checkMissingStylesOnce = () => {
+const checkedDocs = new WeakMap<Document, boolean>();
+const checkMissingStylesOnce = (elementRef: React.RefObject<HTMLElement>) => {
+  const ownerDocument = elementRef.current?.ownerDocument ?? document;
+  const checked = checkedDocs.get(ownerDocument);
   if (!checked) {
-    checkMissingStyles();
-    checked = true;
+    checkMissingStyles(ownerDocument);
+    checkedDocs.set(ownerDocument, true);
   }
 };
 
-export function useMissingStylesCheck() {
+export function useMissingStylesCheck(elementRef: React.RefObject<HTMLElement>) {
   useEffect(() => {
-    return idleWithDelay(() => checkMissingStylesOnce());
-  }, []);
+    return idleWithDelay(() => checkMissingStylesOnce(elementRef));
+  }, [elementRef]);
 }