Suspicious irregularity when --prod building font name with spaces

[wulfsberg]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Command (mark with an x)

- [ ] new
- [x] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

Win 10, Node 8.11.1, npm 6.2.0
@angular-devkit/architect 0.7.1
@angular-devkit/build-angular 0.7.1
@angular-devkit/build-optimizer 0.7.1
@angular-devkit/build-webpack 0.7.1
@angular-devkit/core 0.7.1
@angular-devkit/schematics 0.7.1
@angular/cdk 6.4.1
@angular/cli 6.1.1
@angular/material 6.4.1
@ngtools/webpack 6.1.1
@schematics/angular 0.7.1
@schematics/update 0.7.1
rxjs 6.2.2
typescript 2.9.2
webpack 4.9.2

Repro steps

Setting up custom typography for Angular Material with a font name with spaces, as in
https://stackblitz.com/edit/space-in-font-name?file=src%2Fstyles.scss
(The actual error cannot be seen there, as StackBlitz does not use ng build optimization)

ng build --prod or ng serve --prod

The log given by the failure

WARNING in Invalid font values at 1087:2. Ignoring.
WARNING in Invalid font values at 1000:2. Ignoring.

Desired functionality

Clean build without warnings. When the "Invalid font values" are reported, it usually means the font is not being applied somewhere, so this likely means a (two?) Material component(s) will not be styled correctly.

Mention any other details that might be useful

The warning does not appear when using a font name without spaces (with or without quotes), nor when not using the --prod flag.

Given the relation to the --prod build optimizations, I have logged it against Angular CLI, as it looks suspiciously like some quotemarks are being lost during build, but I am unsure how to trace it further. It could potentially also be some "dirty" source code in the Material project triggering the issue.

[brentbynum]

We are running into the same issue while using a third party icon font with spaces in the name. The font property doesn't render in css at all, causing all of the icons to break in production mode unless the extractCss flag in the angular.json is set to false.

We've found two work-arounds for this issue:

1. You can set the extractCss property to false. This of course has an impact on the package output, but maybe you don't care.

2. You can redefine the font property without using the "font" shorthand. In other words, you would use the separate rules font-famliy, font-size, etc. This seems to work as well, so maybe this can focus the investigation a bit.

[wulfsberg]

2 would track with a rare few Material components somehow using the shorthand notation while the bulk works, but I have yet to figure out which components are actually affected.

[bh3605]

I found an annoyance about this. Say you have a style like:
.my-class {
font: 2em/1.25;
}
This is valid css and I don't understand why it throws a warning and neither does the designer I was discussing this with.
To get rid of it I had to use their respective styles, font-size and line-height, instead.

[filipesilva]

I think this is similar, if not the same as, #9648. If that's not the case please let me know and I will reopen this one.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}