feat(base): Add mdc-emit-once utility mixin; deduplicate styles (#2578)

material-components · Apr 19, 2018 · 64a00b2 · 64a00b2
1 parent 976affd
commit 64a00b2
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 92 deletions.
diff --git a/packages/mdc-base/_mixins.scss 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
@@ -15,41 +15,45 @@
 //
 
 @import "@material/animation/variables";
+@import "@material/base/mixins";
 @import "@material/rtl/mixins";
 @import "@material/theme/variables";
 @import "@material/theme/mixins";
 @import "@material/typography/mixins";
 @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
@@ -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
@@ -15,57 +15,61 @@
 //
 
 @import "@material/animation/variables";
+@import "@material/base/mixins";
 @import "@material/ripple/mixins";
 @import "@material/ripple/variables";
 @import "@material/textfield/functions";
 @import "@material/theme/mixins";
 @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
@@ -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.