fix(ripple): Avoid duplicating common styles (#1463)

Author: kfranqueiro

packages/mdc-ripple/_keyframes.scss

@@ -14,43 +14,45 @@
 // limitations under the License.
 //
 
-/** MDC Ripple keyframes are split into their own file so that _mixins.scss can rely on them. */
+// MDC Ripple keyframes are split into their own file so that _mixins.scss can rely on them.
 
 @import "@material/animation/variables";
 
-@keyframes mdc-ripple-fg-radius-in {
-  from {
-    animation-timing-function: $mdc-animation-standard-curve-timing-function;
-    // NOTE: For these keyframes, we do not need custom property fallbacks because they are only
-    // used in conjunction with `.mdc-ripple-upgraded`. Since MDCRippleFoundation checks to ensure
-    // that custom properties are supported within the browser before adding this class, we can
-    // safely use them without a fallback.
-    transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
+@mixin mdc-ripple-keyframes_ {
+  @keyframes mdc-ripple-fg-radius-in {
+    from {
+      animation-timing-function: $mdc-animation-standard-curve-timing-function;
+      // NOTE: For these keyframes, we do not need custom property fallbacks because they are only
+      // used in conjunction with `.mdc-ripple-upgraded`. Since MDCRippleFoundation checks to ensure
+      // that custom properties are supported within the browser before adding this class, we can
+      // safely use them without a fallback.
+      transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
+    }
+
+    to {
+      transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
+    }
   }
 
-  to {
-    transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
-  }
-}
-
-@keyframes mdc-ripple-fg-opacity-in {
-  from {
-    animation-timing-function: linear;
-    opacity: 0;
-  }
+  @keyframes mdc-ripple-fg-opacity-in {
+    from {
+      animation-timing-function: linear;
+      opacity: 0;
+    }
 
-  to {
-    opacity: 1;
+    to {
+      opacity: 1;
+    }
   }
-}
 
-@keyframes mdc-ripple-fg-opacity-out {
-  from {
-    animation-timing-function: linear;
-    opacity: 1;
-  }
+  @keyframes mdc-ripple-fg-opacity-out {
+    from {
+      animation-timing-function: linear;
+      opacity: 1;
+    }
 
-  to {
-    opacity: 0;
+    to {
+      opacity: 0;
+    }
   }
 }

packages/mdc-ripple/_mixins.scss

@@ -18,6 +18,33 @@
 @import "@material/theme/variables";
 @import "./keyframes";
 
+// Ensure that styles needed by any component using MDC Ripple are emitted, but only once.
+// (Every component using MDC Ripple imports these mixins, but doesn't necessarily import mdc-ripple.scss.)
+
+// This variable is not intended to be overridden externally; it uses !default to avoid being reset
+// every time this file is imported.
+$mdc-ripple-common-styles-emitted_: false !default;
+
+@if not $mdc-ripple-common-styles-emitted_ {
+  $mdc-ripple-common-styles-emitted_: true;
+
+  @include mdc-ripple-keyframes_;
+
+  // 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);
+    }
+  }
+}
+
 //
 // Legacy mixin APIs, to be removed after converting all components to use new APIs
 //
@@ -378,18 +405,3 @@
     left: var(--mdc-ripple-left, 0);
   }
 }
-
-// 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);
-  }
-}