From cfb2fc492235654a37ef8d96aee5fccff19abb90 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Fri, 12 Jul 2019 21:30:47 +0200
Subject: [PATCH] feat(linear-progress): add feature targeting for styles

Adds support for feature targeting to the mdc-linear-progress styles.

Relates to #4227.
---
 packages/mdc-linear-progress/_keyframes.scss  | 208 ++++++++-------
 packages/mdc-linear-progress/_mixins.scss     | 238 +++++++++++++++++-
 .../mdc-linear-progress.scss                  | 121 +--------
 packages/mdc-linear-progress/package.json     |   1 +
 test/scss/_feature-targeting-test.scss        |   6 +
 5 files changed, 351 insertions(+), 223 deletions(-)

diff --git a/packages/mdc-linear-progress/_keyframes.scss b/packages/mdc-linear-progress/_keyframes.scss
index a42b12a0f53..c1d22508ab2 100644
--- a/packages/mdc-linear-progress/_keyframes.scss
+++ b/packages/mdc-linear-progress/_keyframes.scss
@@ -20,137 +20,153 @@
 // THE SOFTWARE.
 //
 
-@keyframes primary-indeterminate-translate {
-  0% {
-    transform: translateX(0);
-  }
-
-  20% {
-    animation-timing-function: cubic-bezier(.5, 0, .701732, .495819);
-    transform: translateX(0);
-  }
-
-  59.15% {
-    animation-timing-function: cubic-bezier(.302435, .381352, .55, .956352);
-    transform: translateX(83.67142%);
-  }
-
-  100% {
-    transform: translateX(200.611057%);
+@mixin mdc-linear-progress-primary-indeterminate-translate-keyframes_ {
+  @keyframes primary-indeterminate-translate {
+    0% {
+      transform: translateX(0);
+    }
+
+    20% {
+      animation-timing-function: cubic-bezier(.5, 0, .701732, .495819);
+      transform: translateX(0);
+    }
+
+    59.15% {
+      animation-timing-function: cubic-bezier(.302435, .381352, .55, .956352);
+      transform: translateX(83.67142%);
+    }
+
+    100% {
+      transform: translateX(200.611057%);
+    }
   }
 }
 
-@keyframes primary-indeterminate-scale {
-  0% {
-    transform: scaleX(.08);
-  }
+@mixin mdc-linear-progress-primary-indeterminate-scale-keyframes_ {
+  @keyframes primary-indeterminate-scale {
+    0% {
+      transform: scaleX(.08);
+    }
 
-  36.65% {
-    animation-timing-function: cubic-bezier(.334731, .12482, .785844, 1);
-    transform: scaleX(.08);
-  }
+    36.65% {
+      animation-timing-function: cubic-bezier(.334731, .12482, .785844, 1);
+      transform: scaleX(.08);
+    }
 
-  69.15% {
-    animation-timing-function: cubic-bezier(.06, .11, .6, 1);
-    transform: scaleX(.661479);
-  }
+    69.15% {
+      animation-timing-function: cubic-bezier(.06, .11, .6, 1);
+      transform: scaleX(.661479);
+    }
 
-  100% {
-    transform: scaleX(.08);
+    100% {
+      transform: scaleX(.08);
+    }
   }
 }
 
-@keyframes secondary-indeterminate-translate {
-  0% {
-    animation-timing-function: cubic-bezier(.15, 0, .515058, .409685);
-    transform: translateX(0);
-  }
+@mixin mdc-linear-progress-secondary-indeterminate-translate-keyframes_ {
+  @keyframes secondary-indeterminate-translate {
+    0% {
+      animation-timing-function: cubic-bezier(.15, 0, .515058, .409685);
+      transform: translateX(0);
+    }
 
-  25% {
-    animation-timing-function: cubic-bezier(.31033, .284058, .8, .733712);
-    transform: translateX(37.651913%);
-  }
+    25% {
+      animation-timing-function: cubic-bezier(.31033, .284058, .8, .733712);
+      transform: translateX(37.651913%);
+    }
 
-  48.35% {
-    animation-timing-function: cubic-bezier(.4, .627035, .6, .902026);
-    transform: translateX(84.386165%);
-  }
+    48.35% {
+      animation-timing-function: cubic-bezier(.4, .627035, .6, .902026);
+      transform: translateX(84.386165%);
+    }
 
-  100% {
-    transform: translateX(160.277782%);
+    100% {
+      transform: translateX(160.277782%);
+    }
   }
 }
 
-@keyframes secondary-indeterminate-scale {
-  0% {
-    animation-timing-function: cubic-bezier(.205028, .057051, .57661, .453971);
-    transform: scaleX(.08);
-  }
+@mixin mdc-linear-progress-secondary-indeterminate-scale-keyframes_ {
+  @keyframes secondary-indeterminate-scale {
+    0% {
+      animation-timing-function: cubic-bezier(.205028, .057051, .57661, .453971);
+      transform: scaleX(.08);
+    }
 
-  19.15% {
-    animation-timing-function: cubic-bezier(.152313, .196432, .648374, 1.004315);
-    transform: scaleX(.457104);
-  }
+    19.15% {
+      animation-timing-function: cubic-bezier(.152313, .196432, .648374, 1.004315);
+      transform: scaleX(.457104);
+    }
 
-  44.15% {
-    animation-timing-function: cubic-bezier(.257759, -.003163, .211762, 1.38179);
-    transform: scaleX(.72796);
-  }
+    44.15% {
+      animation-timing-function: cubic-bezier(.257759, -.003163, .211762, 1.38179);
+      transform: scaleX(.72796);
+    }
 
-  100% {
-    transform: scaleX(.08);
+    100% {
+      transform: scaleX(.08);
+    }
   }
 }
 
-@keyframes buffering {
-  to {
-    transform: translateX(-10px);
+@mixin mdc-linear-progress-buffering-keyframes_ {
+  @keyframes buffering {
+    to {
+      transform: translateX(-10px);
+    }
   }
 }
 
-@keyframes primary-indeterminate-translate-reverse {
-  0% {
-    transform: translateX(0);
-  }
+@mixin mdc-linear-progress-primary-indeterminate-translate-reverse-keyframes_ {
+  @keyframes primary-indeterminate-translate-reverse {
+    0% {
+      transform: translateX(0);
+    }
 
-  20% {
-    animation-timing-function: cubic-bezier(.5, 0, .701732, .495819);
-    transform: translateX(0);
-  }
+    20% {
+      animation-timing-function: cubic-bezier(.5, 0, .701732, .495819);
+      transform: translateX(0);
+    }
 
-  59.15% {
-    animation-timing-function: cubic-bezier(.302435, .381352, .55, .956352);
-    transform: translateX(-83.67142%);
-  }
+    59.15% {
+      animation-timing-function: cubic-bezier(.302435, .381352, .55, .956352);
+      transform: translateX(-83.67142%);
+    }
 
-  100% {
-    transform: translateX(-200.611057%);
+    100% {
+      transform: translateX(-200.611057%);
+    }
   }
 }
 
-@keyframes secondary-indeterminate-translate-reverse {
-  0% {
-    animation-timing-function: cubic-bezier(.15, 0, .515058, .409685);
-    transform: translateX(0);
-  }
+@mixin mdc-linear-progress-secondary-indeterminate-translate-reverse-keyframes_ {
+  @keyframes secondary-indeterminate-translate-reverse {
+    0% {
+      animation-timing-function: cubic-bezier(.15, 0, .515058, .409685);
+      transform: translateX(0);
+    }
 
-  25% {
-    animation-timing-function: cubic-bezier(.31033, .284058, .8, .733712);
-    transform: translateX(-37.651913%);
-  }
+    25% {
+      animation-timing-function: cubic-bezier(.31033, .284058, .8, .733712);
+      transform: translateX(-37.651913%);
+    }
 
-  48.35% {
-    animation-timing-function: cubic-bezier(.4, .627035, .6, .902026);
-    transform: translateX(-84.386165%);
-  }
+    48.35% {
+      animation-timing-function: cubic-bezier(.4, .627035, .6, .902026);
+      transform: translateX(-84.386165%);
+    }
 
-  100% {
-    transform: translateX(-160.277782%);
+    100% {
+      transform: translateX(-160.277782%);
+    }
   }
 }
 
-@keyframes buffering-reverse {
-  to {
-    transform: translateX(10px);
+@mixin mdc-linear-progress-buffering-reverse-keyframes_ {
+  @keyframes buffering-reverse {
+    to {
+      transform: translateX(10px);
+    }
   }
 }
diff --git a/packages/mdc-linear-progress/_mixins.scss b/packages/mdc-linear-progress/_mixins.scss
index f4259a05ab6..e75a90aaaf9 100644
--- a/packages/mdc-linear-progress/_mixins.scss
+++ b/packages/mdc-linear-progress/_mixins.scss
@@ -18,28 +18,252 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
+@import "@material/animation/functions";
+@import "@material/feature-targeting/functions";
+@import "@material/feature-targeting/mixins";
 @import "@material/theme/mixins";
 @import "@material/theme/variables"; // for mdc-theme-prop-value
+@import "./variables";
+@import "./keyframes";
+
+//
+// Public
+//
+
+@mixin mdc-linear-progress-core-styles($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+  $feat-animation: mdc-feature-create-target($query, animation);
+
+  @include mdc-feature-targets($feat-animation) {
+    @include mdc-linear-progress-primary-indeterminate-translate-keyframes_;
+    @include mdc-linear-progress-primary-indeterminate-scale-keyframes_;
+    @include mdc-linear-progress-secondary-indeterminate-translate-keyframes_;
+    @include mdc-linear-progress-secondary-indeterminate-scale-keyframes_;
+    @include mdc-linear-progress-buffering-keyframes_;
+    @include mdc-linear-progress-primary-indeterminate-translate-reverse-keyframes_;
+    @include mdc-linear-progress-secondary-indeterminate-translate-reverse-keyframes_;
+    @include mdc-linear-progress-buffering-reverse-keyframes_;
+  }
+
+  .mdc-linear-progress {
+    @include mdc-feature-targets($feat-structure) {
+      position: relative;
+      width: 100%;
+      height: 4px;
+      transform: translateZ(0);
+      overflow: hidden;
+    }
+
+    @include mdc-feature-targets($feat-animation) {
+      transition: mdc-animation-exit-temporary(opacity, 250ms);
+    }
+
+    &__bar {
+      @include mdc-feature-targets($feat-structure) {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        animation: none;
+        transform-origin: top left;
+      }
+
+      @include mdc-feature-targets($feat-animation) {
+        transition: mdc-animation-exit-temporary(transform, 250ms);
+      }
+    }
+
+    &__bar-inner {
+      @include mdc-feature-targets($feat-structure) {
+        display: inline-block;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        animation: none;
+      }
+    }
+
+    &__buffering-dots {
+      @include mdc-feature-targets($feat-structure) {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background-repeat: repeat-x;
+        background-size: 10px 4px;
+      }
+
+      @include mdc-feature-targets($feat-animation) {
+        animation: buffering 250ms infinite linear;
+      }
+    }
+
+    &__buffer {
+      @include mdc-feature-targets($feat-structure) {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        transform-origin: top left;
+      }
+
+      @include mdc-feature-targets($feat-animation) {
+        transition: mdc-animation-exit-temporary(transform, 250ms);
+      }
+    }
+
+    &__primary-bar {
+      @include mdc-feature-targets($feat-structure) {
+        transform: scaleX(0);
+      }
+    }
+
+    &__secondary-bar {
+      @include mdc-feature-targets($feat-structure) {
+        visibility: hidden;
+      }
+    }
+
+    @include mdc-linear-progress-indeterminate_($query: $query);
+    @include mdc-linear-progress-reversed_($query: $query);
+
+    &--closed {
+      @include mdc-feature-targets($feat-structure) {
+        opacity: 0;
+      }
+    }
+  }
+
+  @at-root {
+    @include mdc-linear-progress-bar-color(primary, $query: $query);
+    @include mdc-linear-progress-buffer-color($mdc-linear-progress-baseline-buffer-color, $query: $query);
+  }
+
+  .mdc-linear-progress--indeterminate.mdc-linear-progress--reversed {
+    .mdc-linear-progress__primary-bar {
+      @include mdc-feature-targets($feat-structure) {
+        right: -145.166611%;
+        left: auto;
+      }
+    }
+
+    .mdc-linear-progress__secondary-bar {
+      @include mdc-feature-targets($feat-structure) {
+        right: -54.888891%;
+        left: auto;
+      }
+    }
+  }
+}
+
+@mixin mdc-linear-progress-bar-color($color, $query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
 
-@mixin mdc-linear-progress-bar-color($color) {
   .mdc-linear-progress__bar-inner {
-    @include mdc-theme-prop(background-color, $color);
+    @include mdc-feature-targets($feat-color) {
+      @include mdc-theme-prop(background-color, $color);
+    }
   }
 }
 
-@mixin mdc-linear-progress-buffer-color($color) {
+@mixin mdc-linear-progress-buffer-color($color, $query: mdc-feature-all()) {
   // We need to escape the '#' character as "%23" for SVG because '#' is a reserved character in URIs.
   $color-value-for-css: mdc-theme-prop-value($color);
   $color-value-for-svg: mdc-linear-progress-str-replace_(unquote("#{$color-value-for-css}"), "#", "%23");
+  $feat-color: mdc-feature-create-target($query, color);
 
   .mdc-linear-progress__buffering-dots {
-    // SVG is optimized for data URI (https://codepen.io/tigt/post/optimizing-svgs-in-data-uris)
-    // stylelint-disable-next-line function-url-quotes
-    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' preserveAspectRatio='none slice'%3E%3Ccircle cx='1' cy='1' r='1' fill='#{$color-value-for-svg}'/%3E%3C/svg%3E");
+    @include mdc-feature-targets($feat-color) {
+      // SVG is optimized for data URI (https://codepen.io/tigt/post/optimizing-svgs-in-data-uris)
+      // stylelint-disable-next-line function-url-quotes
+      background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' preserveAspectRatio='none slice'%3E%3Ccircle cx='1' cy='1' r='1' fill='#{$color-value-for-svg}'/%3E%3C/svg%3E");
+    }
   }
 
   .mdc-linear-progress__buffer {
-    background-color: $color-value-for-css;
+    @include mdc-feature-targets($feat-color) {
+      background-color: $color-value-for-css;
+    }
+  }
+}
+
+//
+// Private
+//
+
+@mixin mdc-linear-progress-indeterminate_($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+  $feat-animation: mdc-feature-create-target($query, animation);
+
+  &--indeterminate {
+    .mdc-linear-progress__bar {
+      @include mdc-feature-targets($feat-structure) {
+        transition: none;
+      }
+    }
+
+    .mdc-linear-progress__primary-bar {
+      @include mdc-feature-targets($feat-structure) {
+        left: -145.166611%;
+      }
+
+      @include mdc-feature-targets($feat-animation) {
+        animation: primary-indeterminate-translate 2s infinite linear;
+      }
+
+      > .mdc-linear-progress__bar-inner {
+        @include mdc-feature-targets($feat-animation) {
+          animation: primary-indeterminate-scale 2s infinite linear;
+        }
+      }
+    }
+
+    .mdc-linear-progress__secondary-bar {
+      @include mdc-feature-targets($feat-structure) {
+        left: -54.888891%;
+        visibility: visible;
+      }
+
+      @include mdc-feature-targets($feat-animation) {
+        animation: secondary-indeterminate-translate 2s infinite linear;
+      }
+
+      > .mdc-linear-progress__bar-inner {
+        @include mdc-feature-targets($feat-animation) {
+          animation: secondary-indeterminate-scale 2s infinite linear;
+        }
+      }
+    }
+  }
+}
+
+@mixin mdc-linear-progress-reversed_($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+  $feat-animation: mdc-feature-create-target($query, animation);
+
+  &--reversed {
+    .mdc-linear-progress__bar,
+    .mdc-linear-progress__buffer {
+      @include mdc-feature-targets($feat-structure) {
+        right: 0;
+        transform-origin: center right;
+      }
+    }
+
+    .mdc-linear-progress__primary-bar {
+      @include mdc-feature-targets($feat-animation) {
+        animation-name: primary-indeterminate-translate-reverse;
+      }
+    }
+
+    .mdc-linear-progress__secondary-bar {
+      @include mdc-feature-targets($feat-animation) {
+        animation-name: secondary-indeterminate-translate-reverse;
+      }
+    }
+
+    .mdc-linear-progress__buffering-dots {
+      @include mdc-feature-targets($feat-animation) {
+        animation: buffering-reverse 250ms infinite linear;
+      }
+    }
   }
 }
 
diff --git a/packages/mdc-linear-progress/mdc-linear-progress.scss b/packages/mdc-linear-progress/mdc-linear-progress.scss
index e1a7b1e209b..a85f66c5fa5 100644
--- a/packages/mdc-linear-progress/mdc-linear-progress.scss
+++ b/packages/mdc-linear-progress/mdc-linear-progress.scss
@@ -18,124 +18,5 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-@import "@material/animation/functions";
-@import "./keyframes";
 @import "./mixins";
-@import "./variables";
-
-.mdc-linear-progress {
-  position: relative;
-  width: 100%;
-  height: 4px;
-  transform: translateZ(0);
-  transition: mdc-animation-exit-temporary(opacity, 250ms);
-  overflow: hidden;
-
-  &__bar {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    animation: none;
-    transform-origin: top left;
-    transition: mdc-animation-exit-temporary(transform, 250ms);
-  }
-
-  &__bar-inner {
-    display: inline-block;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    animation: none;
-  }
-
-  &__buffering-dots {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    animation: buffering 250ms infinite linear;
-    background-repeat: repeat-x;
-    background-size: 10px 4px;
-  }
-
-  &__buffer {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    transform-origin: top left;
-    transition: mdc-animation-exit-temporary(transform, 250ms);
-  }
-
-  &__primary-bar {
-    transform: scaleX(0);
-  }
-
-  &__secondary-bar {
-    visibility: hidden;
-  }
-
-  &--indeterminate {
-    .mdc-linear-progress__bar {
-      transition: none;
-    }
-
-    .mdc-linear-progress__primary-bar {
-      left: -145.166611%;
-      animation: primary-indeterminate-translate 2s infinite linear;
-
-      > .mdc-linear-progress__bar-inner {
-        animation: primary-indeterminate-scale 2s infinite linear;
-      }
-    }
-
-    .mdc-linear-progress__secondary-bar {
-      left: -54.888891%;
-      animation: secondary-indeterminate-translate 2s infinite linear;
-      visibility: visible;
-
-      > .mdc-linear-progress__bar-inner {
-        animation: secondary-indeterminate-scale 2s infinite linear;
-      }
-    }
-  }
-
-  &--reversed {
-    .mdc-linear-progress__bar,
-    .mdc-linear-progress__buffer {
-      right: 0;
-      transform-origin: center right;
-    }
-
-    .mdc-linear-progress__primary-bar {
-      animation-name: primary-indeterminate-translate-reverse;
-    }
-
-    .mdc-linear-progress__secondary-bar {
-      animation-name: secondary-indeterminate-translate-reverse;
-    }
-
-    .mdc-linear-progress__buffering-dots {
-      animation: buffering-reverse 250ms infinite linear;
-    }
-  }
-
-  &--closed {
-    opacity: 0;
-  }
-}
-
-@at-root {
-  @include mdc-linear-progress-bar-color(primary);
-  @include mdc-linear-progress-buffer-color($mdc-linear-progress-baseline-buffer-color);
-}
-
-.mdc-linear-progress--indeterminate.mdc-linear-progress--reversed {
-  .mdc-linear-progress__primary-bar {
-    right: -145.166611%;
-    left: auto;
-  }
-
-  .mdc-linear-progress__secondary-bar {
-    right: -54.888891%;
-    left: auto;
-  }
-}
+@include mdc-linear-progress-core-styles;
diff --git a/packages/mdc-linear-progress/package.json b/packages/mdc-linear-progress/package.json
index f84f11ff979..6d022fa2efa 100644
--- a/packages/mdc-linear-progress/package.json
+++ b/packages/mdc-linear-progress/package.json
@@ -20,6 +20,7 @@
   "dependencies": {
     "@material/animation": "^3.1.0",
     "@material/base": "^3.1.0",
+    "@material/feature-targeting": "^3.1.0",
     "@material/theme": "^3.1.0",
     "tslib": "^1.9.3"
   },
diff --git a/test/scss/_feature-targeting-test.scss b/test/scss/_feature-targeting-test.scss
index 7c9bbce49d5..b4f7417bd5e 100644
--- a/test/scss/_feature-targeting-test.scss
+++ b/test/scss/_feature-targeting-test.scss
@@ -10,6 +10,7 @@
 @import "@material/grid-list/mixins";
 @import "@material/icon-button/mixins";
 @import "@material/image-list/mixins";
+@import "@material/linear-progress/mixins";
 @import "@material/list/mixins";
 @import "@material/menu-surface/mixins";
 @import "@material/menu/mixins";
@@ -177,6 +178,11 @@
     @include mdc-image-list-standard-columns(4, 4px, $query: $query);
     @include mdc-image-list-masonry-columns(4, 4px, $query: $query);
 
+    // Linear progress
+    @include mdc-linear-progress-core-styles($query: $query);
+    @include mdc-linear-progress-bar-color(red, $query: $query);
+    @include mdc-linear-progress-buffer-color(red, $query: $query);
+
     // List
     @include mdc-list-core-styles($query: $query);
     @include mdc-list-item-primary-text-ink-color(red, $query: $query);