feat(theme): Add Edge opt-out option to mdc-theme-prop

packages/mdc-theme/README.md

@@ -140,7 +140,7 @@ CSS Class | Description
 
 Mixin | Description
 --- | ---
-`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property
+`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.
 `mdc-theme-dark($root-selector, $compound)` | Creates a rule that is applied when the current selector is within an Dark Theme context
 
 #### `mdc-theme-dark($root-selector, $compound)`

packages/mdc-theme/_mixins.scss

@@ -19,7 +19,9 @@
 // Applies the correct theme color style to the specified property.
 // $property is typically color or background-color, but can be any CSS property that accepts color values.
 // $style should be one of the map keys in $mdc-theme-property-values (_variables.scss), or a literal color value.
-@mixin mdc-theme-prop($property, $style, $important: false) {
+// $edgeOptOut controls whether to feature-detect around Edge to avoid emitting CSS variables for it,
+// intended for use in cases where interactions with pseudo-element styles cause problems due to Edge bugs.
+@mixin mdc-theme-prop($property, $style, $important: false, $edgeOptOut: false) {
   @if type-of($style) == "color" {
     @if $important {
       #{$property}: $style !important;
@@ -36,11 +38,31 @@
     @if $important {
       /* @alternate */
       #{$property}: $value !important;
-      #{$property}: var(--mdc-theme-#{$style}, $value) !important;
+      @if $edgeOptOut {
+        @at-root {
+          @supports not (-ms-ime-align:auto) {
+            & {
+              #{$property}: var(--mdc-theme-#{$style}, $value) !important;
+            }
+          }
+        }
+      } @else {
+        #{$property}: var(--mdc-theme-#{$style}, $value) !important;
+      }
     } @else {
       /* @alternate */
       #{$property}: $value;
-      #{$property}: var(--mdc-theme-#{$style}, $value);
+      @if $edgeOptOut {
+        @at-root {
+          @supports not (-ms-ime-align:auto) {
+            & {
+              #{$property}: var(--mdc-theme-#{$style}, $value);
+            }
+          }
+        }
+      } @else {
+        #{$property}: var(--mdc-theme-#{$style}, $value);
+      }
     }
   }
 }