fix(typography): ensure global variables can override styles with module system

PiperOrigin-RevId: 296927628

Author: asyncLiz

packages/mdc-typography/README.md

@@ -146,11 +146,14 @@ These styles can be used as the `$style` argument for the `mdc-typography` mixin
 
 #### Overriding Styles
 
-All styles can be overridden using CSS custom properties or Sass global variables.
+All styles can be overridden using CSS custom properties or Sass module/global variables.
 
-When using Sass global variables, they must be defined _before_ the component is imported by setting a global 
-variable named `$mdc-typography-styles-{style}`. The variable should be assigned a map that contains all the properties
-you want to override for a particular style.
+When using Sass **module** variables, the module must be configured _before_ any other `@use` 
+statements with a variable named `$styles-{style}`. The variable should be assigned to a map 
+that contains all the properties you want to override for a particular style.
+
+When using Sass **global** variables, they must be defined _before_ the component is imported by setting a global 
+variable named `$mdc-typography-styles-{style}`.
 
 **Example:** Overriding the button `font-size` and `text-transform` properties.
 
@@ -163,6 +166,20 @@ html {
 }
 ```
 
+Sass module variables:
+
+```scss
+@use "@material/typography" with (
+  $styles-button: (
+    font-size: 16px,
+    text-transform: none,
+  )
+);
+
+@use "@material/button";
+@include button.core-styles;
+```
+
 Sass global variables:
 
 ```scss
@@ -171,7 +188,7 @@ $mdc-typography-styles-button: (
   text-transform: none,
 );
 
-@use "@material/button/mdc-button";
+@import "@material/button/mdc-button";
 ```
 
 **Example:** Overriding the global `font-family` property.
@@ -184,13 +201,23 @@ html {
 }
 ```
 
+Sass module variables:
+
+```scss
+@use "@material/typography" with (
+  $font-family: unquote("Arial, Helvetica, sans-serif")
+);
+
+@use "@material/button";
+@include button.core-styles;
+```
+
 Sass global variables:
 
 ```scss
 $mdc-typography-font-family: unquote("Arial, Helvetica, sans-serif");
 
-...
-@use ...
+@import "@material/button/mdc-button";
 ```
 
 **Example:** Overriding the `font-family` property for `headline1` and `font-family` and `font-size` for `headline2`.
@@ -205,6 +232,22 @@ html {
 }
 ```
 
+Sass module variables:
+
+```scss
+@use "@material/typography" with (
+  $styles-headline1: (
+    $font-family: unquote("Arial, Helvetica, sans-serif")
+  ),
+  $styles-headline2: (
+    $font-family: unquote("Arial, Helvetica, sans-serif"),
+    $font-size: 3.25rem
+  )
+);
+
+@use ...
+```
+
 Sass global variables:
 
 ```scss
@@ -216,6 +259,5 @@ $mdc-typography-styles-headline2: (
   font-size: 3.25rem
 );
 
-...
-@use ...
+@import ...
 ```

packages/mdc-typography/_functions.scss

@@ -23,48 +23,14 @@
 @use "sass:map";
 @use "sass:string";
 
-@function get-global-variable_($style) {
-  @if $style == "headline1" {
-    @return $mdc-typography-styles-headline1;
-  } @else if $style == "headline2" {
-    @return $mdc-typography-styles-headline2;
-  } @else if $style == "headline3" {
-    @return $mdc-typography-styles-headline3;
-  } @else if $style == "headline4" {
-    @return $mdc-typography-styles-headline4;
-  } @else if $style == "headline5" {
-    @return $mdc-typography-styles-headline5;
-  } @else if $style == "headline6" {
-    @return $mdc-typography-styles-headline6;
-  } @else if $style == "subtitle1" {
-    @return $mdc-typography-styles-subtitle1;
-  } @else if $style == "subtitle2" {
-    @return $mdc-typography-styles-subtitle2;
-  } @else if $style == "body1" {
-    @return $mdc-typography-styles-body1;
-  } @else if $style == "body2" {
-    @return $mdc-typography-styles-body2;
-  } @else if $style == "caption" {
-    @return $mdc-typography-styles-caption;
-  } @else if $style == "button" {
-    @return $mdc-typography-styles-button;
-  } @else if $style == "overline" {
-    @return $mdc-typography-styles-overline;
-  } @else {
-    @return ();
-  }
-}
-
-@function set-styles_($base-styles, $scale-styles) {
+@function set-styles_($base-styles, $scale-styles, $override-styles) {
   @each $style, $style-props in $scale-styles {
 
     // Merge base properties for all styles.
     $style-props: map.merge($base-styles, $style-props);
 
-    // Merge global overrides onto each style.
-    @if global_variable_exists(string.unquote("mdc-typography-styles-#{$style}")) {
-      $style-props: map.merge($style-props, get-global-variable_(#{$style}));
-    }
+    // Merge overrides onto each style.
+    $style-props: map.merge($style-props, map.get($override-styles, $style));
 
     // Override original styles with new styles.
     $scale-styles: map.merge($scale-styles, (#{$style}: $style-props));

packages/mdc-typography/_variables.scss

@@ -26,6 +26,21 @@
 
 $font-family: string.unquote("Roboto, sans-serif") !default;
 
+// Override styles
+$styles-headline1: () !default;
+$styles-headline2: () !default;
+$styles-headline3: () !default;
+$styles-headline4: () !default;
+$styles-headline5: () !default;
+$styles-headline6: () !default;
+$styles-subtitle1: () !default;
+$styles-subtitle2: () !default;
+$styles-body1: () !default;
+$styles-body2: () !default;
+$styles-caption: () !default;
+$styles-button: () !default;
+$styles-overline: () !default;
+
 $base: (
   font-family: $font-family
 ) !default;
@@ -146,5 +161,20 @@ $styles: functions.set-styles_(
       text-decoration: none,
       text-transform: uppercase
     ),
+  ),
+  (
+    headline1: $styles-headline1,
+    headline2: $styles-headline2,
+    headline3: $styles-headline3,
+    headline4: $styles-headline4,
+    headline5: $styles-headline5,
+    headline6: $styles-headline6,
+    subtitle1: $styles-subtitle1,
+    subtitle2: $styles-subtitle2,
+    body1: $styles-body1,
+    body2: $styles-body2,
+    caption: $styles-caption,
+    button: $styles-button,
+    overline: $styles-overline,
   )
 ) !default;

packages/mdc-typography/test/global-variables.test.scss

@@ -0,0 +1,8 @@
+@use "sass:string";
+
+$mdc-typography-font-family: string.unquote("Arial");
+$mdc-typography-styles-headline1: (
+  font-size: 1rem
+);
+
+@import '../mdc-typography';

packages/mdc-typography/test/mdc-typography.scss.test.ts

@@ -23,10 +23,25 @@
 
 import 'jasmine';
 
+import * as fs from 'fs';
 import * as path from 'path';
 import {expectStylesWithNoFeaturesToBeEmpty} from '../../../testing/featuretargeting';
 
 describe('mdc-typography.scss', () => {
   expectStylesWithNoFeaturesToBeEmpty(
       path.join(__dirname, 'feature-targeting-any.test.css'));
+
+  it('should allow global variable overrides with @import', () => {
+    const css = fs.readFileSync(
+                      path.join(__dirname, 'global-variables.test.css'), 'utf8')
+                    .trim();
+    const headline1Start = css.indexOf('.mdc-typography--headline1 {');
+    const headline1End = css.indexOf('}', headline1Start);
+    const headline1Css = css.substring(headline1Start, headline1End);
+    expect(headline1Css.includes('font-family: Arial'))
+        .toBe(true, '$mdc-typography-font-family should override');
+    expect(headline1Css.includes('font-size: 1rem'))
+        .toBe(
+            true, '$mdc-typography-styles-headline1-font-size should override');
+  });
 });