feat(typography): add feature targeting for styles (#4305)

Author: mmalerba

packages/mdc-button/_mixins.scss

@@ -190,10 +190,7 @@
   $feat-structure: mdc-feature-create-target($query, structure);
   $feat-typography: mdc-feature-create-target($query, typography);
 
-  @include mdc-feature-targets($feat-typography) {
-    @include mdc-typography(button);
-  }
-
+  @include mdc-typography(button, $query);
   @include mdc-ripple-surface($query);
 
   @include mdc-feature-targets($feat-structure) {

packages/mdc-typography/_mixins.scss

@@ -20,53 +20,78 @@
 // THE SOFTWARE.
 //
 
+@import "@material/feature-targeting/functions";
+@import "@material/feature-targeting/mixins";
 @import "./variables";
 
-@mixin mdc-typography-base {
-  @each $key, $value in $mdc-typography-base {
-    #{$key}: $value;
+@mixin mdc-typography-base($query: mdc-feature-all()) {
+  $feat-typography: mdc-feature-create-target($query, typography);
+
+  @include mdc-feature-targets($feat-typography) {
+    @each $key, $value in $mdc-typography-base {
+      #{$key}: $value;
+    }
   }
 }
 
-@mixin mdc-typography($style) {
+@mixin mdc-typography($style, $query: mdc-feature-all()) {
+  $feat-typography: mdc-feature-create-target($query, typography);
   $style-props: map-get($mdc-typography-styles, $style);
 
   @if not map-has-key($mdc-typography-styles, $style) {
     @error "Invalid style specified! #{$style} doesn't exist. Choose one of #{map-keys($mdc-typography-styles)}";
   }
 
-  @each $key, $value in $style-props {
-    #{$key}: $value;
+  @include mdc-feature-targets($feat-typography) {
+    @each $key, $value in $style-props {
+      #{$key}: $value;
+    }
   }
 }
 
 // Element must be `display: block` or `display: inline-block` for this to work.
-@mixin mdc-typography-overflow-ellipsis {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
+@mixin mdc-typography-overflow-ellipsis($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  @include mdc-feature-targets($feat-structure) {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
 }
 
-@mixin mdc-typography-baseline-top($distance) {
-  display: block;
-  margin-top: 0;
-  /* @alternate */
-  line-height: normal;
+@mixin mdc-typography-baseline-top($distance, $query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  @include mdc-feature-targets($feat-structure) {
+    display: block;
+    margin-top: 0;
+    /* @alternate */
+    line-height: normal;
+  }
 
   &::before {
-    @include mdc-typography-baseline-strut_($distance);
+    @include mdc-feature-targets($feat-structure) {
+      @include mdc-typography-baseline-strut_($distance);
 
-    vertical-align: 0;
+      vertical-align: 0;
+    }
   }
 }
 
-@mixin mdc-typography-baseline-bottom($distance) {
-  margin-bottom: -1 * $distance;
+@mixin mdc-typography-baseline-bottom($distance, $query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  @include mdc-feature-targets($feat-structure) {
+    margin-bottom: -1 * $distance;
+  }
 
   &::after {
-    @include mdc-typography-baseline-strut_($distance);
+    @include mdc-feature-targets($feat-structure) {
+      @include mdc-typography-baseline-strut_($distance);
 
-    vertical-align: -1 * $distance;
+      vertical-align: -1 * $distance;
+    }
   }
 }
 

test/scss/feature-targeting.scss

@@ -1,10 +1,33 @@
-@import "@material/feature-targeting/functions";
 @import "@material/button/mixins";
 @import "@material/checkbox/mixins";
-@import "@material/radio/mixins";
+@import "@material/feature-targeting/functions";
 @import "@material/menu/mixins";
+@import "@material/radio/mixins";
+@import "@material/typography/mixins";
+
+// Button
 
 @include mdc-button($query: mdc-feature-any());
+
+// Checkbox
+
 @include mdc-checkbox($query: mdc-feature-any());
-@include mdc-radio($query: mdc-feature-any());
+
+// Menu
+
 @include mdc-menu($query: mdc-feature-any());
+
+// Radio
+
+@include mdc-radio($query: mdc-feature-any());
+
+// Typography
+
+@include mdc-typography-base($query: mdc-feature-any());
+@include mdc-typography(button, $query: mdc-feature-any());
+@include mdc-typography-overflow-ellipsis($query: mdc-feature-any());
+
+div {
+  @include mdc-typography-baseline-top(0, $query: mdc-feature-any());
+  @include mdc-typography-baseline-bottom(0, $query: mdc-feature-any());
+}