merge-styles adoptedStylesheets polyfill (microsoft#29985)

* feat: implement adoptedStylesheets/constructable stylesheets polyfill

Adds a polyfill for adoptedStylesheets and constructed stylesheets.
The polyfill piggybacks off the "normal" constructed sheets flow, but
uses `style` tags under the hood. This allows the code to treat the
polyfill more or less as the actual thing and not introduce a third
major code path through styling code.

The polyfill works by copying `style` tags into each shadow root as
needed rather than using the `adoptedStylesheets` property. While
not as efficient as constructed stylesheets this feature expands
browser support to meet Fluent's browser support matrix requirements.

* add workaround for Safari bug/prefer the latest spec

* update snapshots

* fix types

* fix SSR bug

apps/stress-test/src/renderers/wc/btn/wcBasicButton.ts

@@ -2,13 +2,11 @@ import { DOMSelectorTreeComponentRenderer } from '../../../shared/vanilla/types'
 
 declare global {
   interface Document {
-    // eslint-disable-next-line
-    adoptedStyleSheets: any[];
+    adoptedStyleSheets: CSSStyleSheet[];
   }
 
   interface ShadowRoot {
-    // eslint-disable-next-line
-    adoptedStyleSheets: any[];
+    adoptedStyleSheets: CSSStyleSheet[];
   }
 
   interface CSSStyleSheet {

packages/merge-styles/etc/merge-styles.api.md

@@ -4,6 +4,9 @@
 
 ```ts
 
+// @public (undocumented)
+export const cloneCSSStyleSheet: (srcSheet: CSSStyleSheet, targetSheet: CSSStyleSheet) => CSSStyleSheet;
+
 // @public
 export function concatStyleSets<TStyleSet>(styleSet: TStyleSet | false | null | undefined): IConcatenatedStyleSet<ObjectOnly<TStyleSet>>;
 
@@ -33,6 +36,11 @@ export type DeepPartial<T> = {
     [P in keyof T]?: T[P] extends (infer U)[] ? DeepPartial<U>[] : T[P] extends object ? DeepPartial<T[P]> : T[P];
 };
 
+// Warning: (ae-forgotten-export) The symbol "EventArgs" needs to be exported by the entry point index.d.ts
+//
+// @public (undocumented)
+export type EventHandler<T> = (args: EventArgs<T>) => void;
+
 // @public
 export function fontFace(font: IFontFace): void;
 
@@ -452,18 +460,18 @@ export interface IStyleSheetConfig {
         [key: string]: string;
     };
     cspSettings?: ICSPSettings;
-    // (undocumented)
-    currentStylesheetKey?: string;
     defaultPrefix?: string;
     injectionMode?: InjectionMode;
     // (undocumented)
     inShadow?: boolean;
     namespace?: string;
     // @deprecated
     onInsertRule?: (rule: string) => void;
-    // (undocumented)
-    ownerWindow?: Window;
     rtl?: boolean;
+    // (undocumented)
+    stylesheetKey?: string;
+    // (undocumented)
+    window?: Window;
 }
 
 // @public
@@ -566,12 +574,16 @@ export class Stylesheet {
     insertedRulesFromClassName(className: string): string[] | undefined;
     insertRule(rule: string, preserve?: boolean): void;
     // (undocumented)
+    makeCSSStyleSheet(win: Window): CSSStyleSheet;
+    // (undocumented)
     offAddConstructableStyleSheet(callback: EventHandler<CSSStyleSheet>): void;
-    // Warning: (ae-forgotten-export) The symbol "EventHandler" needs to be exported by the entry point index.d.ts
-    //
+    // (undocumented)
+    offInsertRuleIntoConstructableStyleSheet(callback: EventHandler<CSSStyleSheet>): void;
     // (undocumented)
     onAddConstructableStyleSheet(callback: EventHandler<CSSStyleSheet>): void;
     onInsertRule(callback: Function): Function;
+    // (undocumented)
+    onInsertRuleIntoConstructableStyleSheet(callback: EventHandler<CSSStyleSheet>): void;
     onReset(callback: Function): Function;
     // (undocumented)
     projectStylesToWindow(targetWindow: Window): void;
@@ -580,6 +592,8 @@ export class Stylesheet {
     resetKeys(): void;
     serialize(): string;
     setConfig(config?: IStyleSheetConfig): void;
+    supportsConstructableStylesheets(): boolean;
+    supportsModifyingAdoptedStyleSheets(): boolean;
 }
 
 // Warnings were encountered during analysis:

packages/merge-styles/src/EventMap.ts

@@ -1,4 +1,4 @@
-export type EventArgs<T> = { key: string; sheet: T };
+export type EventArgs<T> = { key: string; sheet: T; rule?: string };
 export type EventHandler<T> = (args: EventArgs<T>) => void;
 
 export class EventMap<K, V> {