From c9f1dcb128d6a258d728839a551af1eec264e908 Mon Sep 17 00:00:00 2001
From: "Kenneth G. Franqueiro" <kfranqueiro@google.com>
Date: Mon, 16 Apr 2018 16:57:06 -0400
Subject: [PATCH] feat(base): Add mdc-emit-once utility mixin; deduplicate
 styles

---
 packages/mdc-base/_mixins.scss                | 27 ++++++
 .../mdc-floating-label.scss                   | 50 ++++++-----
 packages/mdc-line-ripple/mdc-line-ripple.scss | 42 +++++-----
 .../mdc-notched-outline.scss                  | 84 ++++++++++---------
 packages/mdc-ripple/common.scss               | 10 +--
 5 files changed, 123 insertions(+), 90 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..66923f3dcdf
--- /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) {
+  @debug $mdc-base-styles-emitted_;
+  @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 cbc12fbf9e4..48ce133272b 100644
--- a/packages/mdc-floating-label/mdc-floating-label.scss
+++ b/packages/mdc-floating-label/mdc-floating-label.scss
@@ -14,6 +14,7 @@
 // limitations under the License.
 //
 
+@import "@material/base/mixins";
 @import "@material/rtl/mixins";
 @import "@material/theme/variables";
 @import "@material/theme/mixins";
@@ -22,32 +23,35 @@
 @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: mdc-floating-label-transition(transform), mdc-floating-label-transition(color);
-  line-height: 1.15rem;
-  cursor: text;
+    position: absolute;
+    bottom: 8px;
+    left: 0;
+    transform-origin: left top;
+    transition: mdc-floating-label-transition(transform), mdc-floating-label-transition(color);
+    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 1363b5fd5de..30c6f6f6813 100644
--- a/packages/mdc-notched-outline/mdc-notched-outline.scss
+++ b/packages/mdc-notched-outline/mdc-notched-outline.scss
@@ -14,57 +14,61 @@
 // limitations under the License.
 //
 
+@import "@material/base/mixins";
 @import "@material/ripple/mixins";
 @import "@material/ripple/variables";
 @import "@material/textfield/functions";
 @import "@material/theme/mixins";
 @import "./mixins";
 
-.mdc-notched-outline {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: calc(100% - 1px);
-  height: calc(100% - 2px);
-  transition: mdc-text-field-transition(opacity);
-  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: mdc-text-field-transition(opacity);
+    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 100ms ease;
-  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 100ms ease;
+    border: 1px solid;
+    opacity: 1;
+  }
 
-.mdc-notched-outline__path {
-  stroke-width: 1px;
+  .mdc-notched-outline__path {
+    stroke-width: 1px;
 
-  // TODO(mattgoo): remove this text-field dep from notched-outline
-  transition:
-    mdc-text-field-transition(stroke),
-    mdc-text-field-transition(stroke-width),
-    mdc-text-field-transition(opacity);
-  fill: transparent;
-}
+    // TODO(mattgoo): remove this text-field dep from notched-outline
+    transition:
+      mdc-text-field-transition(stroke),
+      mdc-text-field-transition(stroke-width),
+      mdc-text-field-transition(opacity);
+    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..4eebf4e374d 100644
--- a/packages/mdc-ripple/common.scss
+++ b/packages/mdc-ripple/common.scss
@@ -15,17 +15,11 @@
 //
 
 @import "./keyframes";
+@import "@material/base/mixins";
 
 // 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.