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> {