From 64a00b29167e09719a339c1b295cd5755742c321 Mon Sep 17 00:00:00 2001
From: "Kenneth G. Franqueiro" <kfranqueiro@users.noreply.github.com>
Date: Thu, 19 Apr 2018 19:56:30 -0400
Subject: [PATCH] feat(base): Add mdc-emit-once utility mixin; deduplicate
 styles (#2578)

---
 packages/mdc-base/_mixins.scss                | 27 ++++++
 .../mdc-floating-label.scss                   | 54 ++++++------
 packages/mdc-line-ripple/mdc-line-ripple.scss | 42 +++++-----
 .../mdc-notched-outline.scss                  | 84 ++++++++++---------
 packages/mdc-ripple/common.scss               | 10 +--
 5 files changed, 125 insertions(+), 92 deletions(-)
 create mode 100644 packages/mdc-base/_mixins.scss

diff --git a/packages/mdc-base/_mixins.scss b/packages/mdc-base/_mixins.scss
new file mode 100644
index 00000000000..99941c3d458
--- /dev/null
+++ b/packages/mdc-base/_mixins.scss
@@ -0,0 +1,27 @@
+//
+// Copyright 2018 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+// This variable is not intended to be overridden externally; it uses !default to avoid being reset
+// every time this file is imported.
+$mdc-base-styles-emitted_: () !default;
+
+@mixin mdc-base-emit-once($key) {
+  @if not index($mdc-base-styles-emitted_, $key) {
+    $mdc-base-styles-emitted_: append($mdc-base-styles-emitted_, $key, comma) !global;
+
+    @content;
+  }
+}
diff --git a/packages/mdc-floating-label/mdc-floating-label.scss b/packages/mdc-floating-label/mdc-floating-label.scss
index 15166093204..e0532ea6ce3 100644
--- a/packages/mdc-floating-label/mdc-floating-label.scss
+++ b/packages/mdc-floating-label/mdc-floating-label.scss
@@ -15,6 +15,7 @@
 //
 
 @import "@material/animation/variables";
+@import "@material/base/mixins";
 @import "@material/rtl/mixins";
 @import "@material/theme/variables";
 @import "@material/theme/mixins";
@@ -22,34 +23,37 @@
 @import "./mixins";
 @import "./variables";
 
-// postcss-bem-linter: define floating-label
-.mdc-floating-label {
-  @include mdc-typography(subtitle1);
+// Floating Label is intended for use by multiple components, but its styles should only be emitted once when bundled
+@include mdc-base-emit-once("mdc-floating-label") {
+  // postcss-bem-linter: define floating-label
+  .mdc-floating-label {
+    @include mdc-typography(subtitle1);
 
-  position: absolute;
-  bottom: 8px;
-  left: 0;
-  transform-origin: left top;
-  transition:
-    transform $mdc-floating-label-transition-duration $mdc-animation-standard-curve-timing-function,
-    color $mdc-floating-label-transition-duration $mdc-animation-standard-curve-timing-function;
-  line-height: 1.15rem;
-  cursor: text;
+    position: absolute;
+    bottom: 8px;
+    left: 0;
+    transform-origin: left top;
+    transition:
+      transform $mdc-floating-label-transition-duration $mdc-animation-standard-curve-timing-function,
+      color $mdc-floating-label-transition-duration $mdc-animation-standard-curve-timing-function;
+    line-height: 1.15rem;
+    cursor: text;
 
-  @include mdc-rtl {
-    right: 0;
-    left: auto;
-    transform-origin: right top;
+    @include mdc-rtl {
+      right: 0;
+      left: auto;
+      transform-origin: right top;
+    }
   }
-}
 
-.mdc-floating-label--float-above {
-  cursor: auto;
-}
+  .mdc-floating-label--float-above {
+    cursor: auto;
+  }
 
-@at-root {
-  @include mdc-floating-label-float-position($mdc-floating-label-position-y);
-  @include mdc-floating-label-shake-animation(standard);
-}
+  @at-root {
+    @include mdc-floating-label-float-position($mdc-floating-label-position-y);
+    @include mdc-floating-label-shake-animation(standard);
+  }
 
-@include mdc-floating-label-shake-keyframes(standard, $mdc-floating-label-position-y);
+  @include mdc-floating-label-shake-keyframes(standard, $mdc-floating-label-position-y);
+}
diff --git a/packages/mdc-line-ripple/mdc-line-ripple.scss b/packages/mdc-line-ripple/mdc-line-ripple.scss
index 137d5f72bea..515588fa8aa 100644
--- a/packages/mdc-line-ripple/mdc-line-ripple.scss
+++ b/packages/mdc-line-ripple/mdc-line-ripple.scss
@@ -14,28 +14,32 @@
 // limitations under the License.
 //
 
+@import "@material/base/mixins";
+@import "@material/theme/mixins";
 @import "./functions";
 @import "./mixins";
-@import "@material/theme/mixins";
 
-// postcss-bem-linter: define line-ripple
-.mdc-line-ripple {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  transform: scaleX(0);
-  transition: mdc-line-ripple-transition-value(transform), mdc-line-ripple-transition-value(opacity);
-  opacity: 0;
-  z-index: 2;
-}
+// Line Ripple is intended for use by multiple components, but its styles should only be emitted once when bundled
+@include mdc-base-emit-once("mdc-line-ripple") {
+  // postcss-bem-linter: define line-ripple
+  .mdc-line-ripple {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    transform: scaleX(0);
+    transition: mdc-line-ripple-transition-value(transform), mdc-line-ripple-transition-value(opacity);
+    opacity: 0;
+    z-index: 2;
+  }
 
-.mdc-line-ripple--active {
-  transform: scaleX(1);
-  opacity: 1;
-}
+  .mdc-line-ripple--active {
+    transform: scaleX(1);
+    opacity: 1;
+  }
 
-.mdc-line-ripple--deactivating {
-  opacity: 0;
+  .mdc-line-ripple--deactivating {
+    opacity: 0;
+  }
 }
diff --git a/packages/mdc-notched-outline/mdc-notched-outline.scss b/packages/mdc-notched-outline/mdc-notched-outline.scss
index 4916692699f..b4a6adf24ce 100644
--- a/packages/mdc-notched-outline/mdc-notched-outline.scss
+++ b/packages/mdc-notched-outline/mdc-notched-outline.scss
@@ -15,6 +15,7 @@
 //
 
 @import "@material/animation/variables";
+@import "@material/base/mixins";
 @import "@material/ripple/mixins";
 @import "@material/ripple/variables";
 @import "@material/textfield/functions";
@@ -22,50 +23,53 @@
 @import "./mixins";
 @import "./variables";
 
-.mdc-notched-outline {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: calc(100% - 1px);
-  height: calc(100% - 2px);
-  transition: opacity $mdc-notched-outline-transition-duration $mdc-animation-standard-curve-timing-function;
-  opacity: 0;
-  overflow: hidden;
-
-  // stylelint-disable selector-max-type
-  svg {
+// Notched Outline is intended for use by multiple components, but its styles should only be emitted once when bundled
+@include mdc-base-emit-once("mdc-notched-outline") {
+  .mdc-notched-outline {
     position: absolute;
-    width: 100%;
-    height: 100%;
+    top: 0;
+    left: 0;
+    width: calc(100% - 1px);
+    height: calc(100% - 2px);
+    transition: opacity $mdc-notched-outline-transition-duration $mdc-animation-standard-curve-timing-function;
+    opacity: 0;
+    overflow: hidden;
+
+    // stylelint-disable selector-max-type
+    svg {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
+    // stylelint-enable selector-max-type
   }
-  // stylelint-enable selector-max-type
-}
 
-.mdc-notched-outline__idle {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: calc(100% - 4px);
-  height: calc(100% - 4px);
-  transition:
-    opacity $mdc-notched-outline-transition-duration $mdc-animation-standard-curve-timing-function,
-    border-color $mdc-notched-outline-transition-duration $mdc-animation-standard-curve-timing-function;
-  border: 1px solid;
-  opacity: 1;
-}
+  .mdc-notched-outline__idle {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: calc(100% - 4px);
+    height: calc(100% - 4px);
+    transition:
+      opacity $mdc-notched-outline-transition-duration $mdc-animation-standard-curve-timing-function,
+      border-color $mdc-notched-outline-transition-duration $mdc-animation-standard-curve-timing-function;
+    border: 1px solid;
+    opacity: 1;
+  }
 
-.mdc-notched-outline__path {
-  stroke-width: 1px;
-  transition:
-    stroke $mdc-notched-outline-transition-duration $mdc-animation-standard-curve-timing-function,
-    stroke-width $mdc-notched-outline-transition-duration $mdc-animation-standard-curve-timing-function;
-  fill: transparent;
-}
+  .mdc-notched-outline__path {
+    stroke-width: 1px;
+    transition:
+      stroke $mdc-notched-outline-transition-duration $mdc-animation-standard-curve-timing-function,
+      stroke-width $mdc-notched-outline-transition-duration $mdc-animation-standard-curve-timing-function;
+    fill: transparent;
+  }
 
-.mdc-notched-outline--notched {
-  opacity: 1;
-}
+  .mdc-notched-outline--notched {
+    opacity: 1;
+  }
 
-.mdc-notched-outline--notched ~ .mdc-notched-outline__idle {
-  opacity: 0;
+  .mdc-notched-outline--notched ~ .mdc-notched-outline__idle {
+    opacity: 0;
+  }
 }
diff --git a/packages/mdc-ripple/common.scss b/packages/mdc-ripple/common.scss
index 999fd2d6ec3..956f3b7059b 100644
--- a/packages/mdc-ripple/common.scss
+++ b/packages/mdc-ripple/common.scss
@@ -14,18 +14,12 @@
 // limitations under the License.
 //
 
+@import "@material/base/mixins";
 @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-base-emit-once("mdc-ripple/common") {
   @include mdc-ripple-keyframes_;
 
   // Styles used to detect buggy behavior of CSS custom properties in Edge.