feat: adds match-media stylesheet behavior

packages/web-components/fast-components/src/card/card.styles.ts

@@ -2,6 +2,7 @@ import { css } from "@microsoft/fast-element";
 import { display, elevation } from "../styles";
 import { SystemColors } from "../styles/system-colors";
 import { neutralLayerCardBehavior } from "../styles/recipes";
+import { forcedColorsStylesheetBehavior } from "../styles/match-media-stylesheet-behavior";
 
 export const CardStyles = css`
     ${display("block")} :host {
@@ -15,12 +16,15 @@ export const CardStyles = css`
         border-radius: calc(var(--elevated-corner-radius) * 1px);
         ${elevation};
     }
-
-    @media (forced-colors: active) {
-        :host {
-            forced-color-adjust: none;
-            border: calc(var(--outline-width) * 1px) solid ${SystemColors.CanvasText};
-            background: ${SystemColors.Canvas};
-        }
-    }
-`.withBehaviors(neutralLayerCardBehavior);
+`.withBehaviors(
+    neutralLayerCardBehavior,
+    forcedColorsStylesheetBehavior(
+        css`
+            :host {
+                forced-color-adjust: none;
+                border: calc(var(--outline-width) * 1px) solid ${SystemColors.CanvasText};
+                background: ${SystemColors.Canvas};
+            }
+        `
+    )
+);

packages/web-components/fast-components/src/styles/match-media-stylesheet-behavior.ts

@@ -0,0 +1,98 @@
+import { Behavior, ElementStyles, FASTElement } from "@microsoft/fast-element";
+
+type MediaQueryListListener = (this: MediaQueryList, ev?: MediaQueryListEvent) => any;
+
+interface MatchMediaStyleSheetBehavior extends Behavior {
+    query: MediaQueryList;
+    cache: WeakMap<
+        typeof FASTElement,
+        MediaQueryListListener | Array<MediaQueryListListener>
+    >;
+    sheet: ElementStyles;
+    constructListener: (
+        source: typeof FASTElement,
+        sheet: ElementStyles
+    ) => MediaQueryListListener;
+}
+
+/**
+ * Construct a behavior to conditionally apply a stylesheet based
+ * on a MediaQueryList
+ */
+export function matchMediaStylesheetBehaviorFactory(query: MediaQueryList) {
+    const cache: WeakMap<
+        typeof FASTElement,
+        ((this: MediaQueryList) => void) | Array<(this: MediaQueryList) => void>
+    > = new WeakMap();
+
+    return (sheet: ElementStyles) => {
+        return Object.freeze({
+            query,
+            cache,
+            sheet,
+            constructListener(
+                this: MatchMediaStyleSheetBehavior,
+                source: typeof FASTElement,
+                sheet: ElementStyles
+            ): MediaQueryListListener {
+                let attached = false;
+
+                function listener(this: MediaQueryList) {
+                    const { matches } = this;
+                    if (matches && !attached) {
+                        (source as any).$fastController.addStyles(sheet);
+                        attached = matches;
+                    } else if (!matches && attached) {
+                        (source as any).$fastController.removeStyles(sheet);
+                        attached = matches;
+                    }
+                }
+
+                return listener;
+            },
+            bind(this: MatchMediaStyleSheetBehavior, source: typeof FASTElement) {
+                const { constructListener, query, cache } = this;
+                const listener = constructListener(source, this.sheet);
+                const cached = cache.get(source);
+
+                // Invoke immediately to add if the query currently matches
+                listener.bind(query)();
+                query.addListener(listener);
+
+                if (cached !== void 0) {
+                    // Support multiple bindings of the same behavior
+                    if (Array.isArray(cached)) {
+                        cached.push(listener);
+                    } else {
+                        cache.set(source, [cached, listener]);
+                    }
+                } else {
+                    cache.set(source, listener);
+                }
+            },
+            unbind(this: MatchMediaStyleSheetBehavior, source: typeof FASTElement) {
+                const { cache, query } = this;
+                const cached = cache.get(source);
+
+                if (cached !== void 0) {
+                    if (Array.isArray(cached)) {
+                        cached.forEach(listener => query.removeListener(listener));
+                    } else {
+                        query.removeListener(cached);
+                    }
+
+                    cache.delete(source);
+                }
+            },
+        });
+    };
+}
+
+/**
+ * Applies ElementStyles to a FASTElement when the
+ * forced-colors media query is matched, removes the
+ * ElementStyles when the query is no-longer matched
+ */
+export const forcedColorsStylesheetBehavior = matchMediaStylesheetBehaviorFactory(
+    window.matchMedia("(forced-colors)")
+);