fix(ripple): Move feature detect CSS to mixins (#1302)

packages/mdc-ripple/_mixins.scss

@@ -240,3 +240,18 @@
     transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
   }
 }
+
+// Styles used to detect buggy behavior of CSS custom properties in Edge.
+// See: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11495448/
+// This is included in _mixins.scss rather than mdc-ripple.scss so that it will be
+// present for other components which rely on ripple as well as mdc-ripple itself.
+
+.mdc-ripple-surface--test-edge-var-bug {
+  --mdc-ripple-surface-test-edge-var: 1px solid #000;
+
+  visibility: hidden;
+
+  &::before {
+    border: var(--mdc-ripple-surface-test-edge-var);
+  }
+}

packages/mdc-ripple/mdc-ripple.scss

@@ -54,20 +54,4 @@
   }
 }
 
-// Styles used to detect buggy behavior of CSS custom properties in Edge
-// See: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11495448/
-
-.mdc-ripple-surface--test-edge-var-bug {
-  // stylelint-disable plugin/selector-bem-pattern
-  // bem linter is disabled because it cannot correctly reconcile mdc prefix for css variables.
-  --mdc-ripple-surface-test-edge-var: 1px solid #000;
-  // stylelint-enable plugin/selector-bem-pattern
-
-  visibility: hidden;
-
-  &::before {
-    border: var(--mdc-ripple-surface-test-edge-var);
-  }
-}
-
 // postcss-bem-linter: end