Deprecation warnings in _theming.scss

[AbakumovAlexandr]

Bug, feature request, or proposal:

Bug.

What is the expected behavior?

No warnings during build.

What is the current behavior?

I see the following self-explaining deprecation warnings:

ng build --prod
 10% building modules 4/5 modules 1 active ...\<project_root>l\src\theme.scssDEPRECATION WARNING: Passing null, a non-string value, to unquote()
will be an error in future versions of Sass.
        on line 1483 of <project_root>/node_modules/@angular/material/_theming.scss
DEPRECATION WARNING: Passing null, a non-string value, to unquote()
will be an error in future versions of Sass.
        on line 1483 of c:/Work/Dita 10% building modules 6/6 modules 0 activeDEPRECATION WARNING: Passing null, a non-string value, to unquote()
will be an error in future versions of Sass.
        on line 1483 of <project_root>/node_modules/@angular/material/_theming.scss
DEPRECATION WARNING: Passing null, a non-string value, to unquote()
will be an error in future versions of Sass.
        on line 1483 of <project_root>/node_modules/@angular/material/_theming.scss
DEPRECATION WARNING: Passing null, a non-string value, to unquote()
will be an error in future versions of Sass.
        on line 1483 of <project_root>/node_modules/@angular/material/_theming.scss
DEPRECATION WARNING: Passing null, a non-string value, to unquote()
will be an error in future versions of Sass.
        on line 1483 of <project_root>/node_modules/@angular/material/_theming.scss
DEPRECATION WARNING: Passing null, a non-string value, to unquote()
DEPRECATION WARNING: Passing null, a non-string value, to unquote()
will be an error in future versions of Sass.
        on line 1483 of <project_root>/node_modules/@angular/material/_theming.scss
will be an error in future versions of Sass.
        on line 1483 of <project_root>/node_modules/@angular/material/_theming.scss
DEPRECATION WARNING: Passing null, a non-string value, to unquote()
will be an error in future versions of Sass.
        on line 1483 of <project_root>/node_modules/@angular/material/_theming.scss
DEPRECATION WARNING: Passing null, a non-string value, to unquote()
will be an error in future versions of Sass.
        on line 1483 of <project_root>/node_modules/@angular 69% building modules 740/741 modules 1 active ...itatWeb\<project_root>l\src\theme.scssDEPRECATION WARNING: Passing null, a non-string value, to unquote()
will be an error in future versions of Sass.
        on line 1483 of <project_root>/node_modules/@angular/material/_theming.scss
DEPRECATION WARNING: Passing null, a non-string value, to unquote()
will be an error in future versions of Sass.
        on line 1483 of c:/Work/Date: 2017-12-13T20:43:31.018Z
Hash: 0fe6fd8d1d7e608d6e79
Time: 112769ms
chunk {0} polyfills.0c6625b3fc183e5d4767.bundle.js (polyfills) 96.4 kB [initial] [rendered]
chunk {1} main.9b8205e180b9751fc93c.bundle.js (main) 1.47 MB [initial] [rendered]
chunk {2} styles.525ebb3f34a68462be9d.bundle.css (styles) 46 kB [initial] [rendered]
chunk {3} inline.b240d1c2aa548af8fc2a.bundle.js (inline) 1.45 kB [entry] [rendered]

What are the steps to reproduce?

1. Create a new app with CLI.
2. Add Material packages to package.json:

  "dependencies": {
    "@angular/animations": "^5.1.1",
    "@angular/cdk": "^5.0.1",
    "@angular/common": "^5.1.1",
    "@angular/compiler": "^5.1.1",
    "@angular/core": "^5.1.1",
    "@angular/flex-layout": "2.0.0-beta.10-4905443",
    "@angular/forms": "^5.1.1",
    "@angular/http": "^5.1.1",
    "@angular/material": "^5.0.1",
    "@angular/platform-browser": "^5.1.1",
    "@angular/platform-browser-dynamic": "^5.1.1",
    "@angular/router": "^5.1.1",
    "core-js": "^2.5.3",
    "rxjs": "^5.5.5",
    "zone.js": "^0.8.14"
  },

3. Create a custom theme.scss in src folder and register it in .angular-cli.json:

@import '~@angular/material/theming';

$typography-config-default: mat-typography-config();
$typography-config-custom: (
    button:         mat-typography-level(18px, 18px, bold) /* This line causes warnings  */
  );

  $typography-config: map-merge($typography-config-default, $typography-config-custom);
  @include mat-core($typography-config);

4. Run ng serve and see the warnings.

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 5.1.1, Angular Material 5.0.1, TypeScript 2.4.2.

Is there anything else we should know?

[crisbeto]

I'm having a hard time reproducing it against our local dev setup. Do you know what node-sass version you're running @AbakumovAlexandr?

[AbakumovAlexandr]

@crisbeto: I'm running node-sass@4.7.2. I've narrowed down what causes the issue and updated OP with steps to reproduce. Hope I'm doing custom typography as intended.

[crisbeto]

Ah, thanks for the extra info. That does make more sense, IIRC we handle the font-family being null inside the angular-material-typography mixin, but not the mat-typography-level.

[AbakumovAlexandr]

So, am I doing something wrong or it's something that should be addressed in Material mixins? If the former, what's the intended way of doing it?
With that snippet, I just wanted to change the default font size and weight of mat-buttons globally.

[crisbeto]

It's definitely something that should be handled on our end. Until a fix lands you should be able to work around it by passing in a font family.

[AbakumovAlexandr]

Got you, thanks! I'm not observing anything bad at the run-time, just those warnings at build stage, so it probably could be easily left alone on my side until the fix.

[crisbeto]

@AbakumovAlexandr there's a PR to avoid the deprecation warning, but for future reference here's how to create a typography config and to override one of the breakpoints:

$typography-config-custom: mat-typography-config(
  $button: mat-typography-level(18px, 18px, bold)
);

This has the advantage that in that it'll add the default font family if it's missing on one of the breakpoints.