(Emitted value instead of an instance of Error) postcss-custom-properties

[BrahimLaarif]

Hi,

I made an update to angular 5.0.1 and angular/mdc version 0.6 and i notice a lot of warnings are being shown :

Do you have any idea where does it come from ?

[trimox]

First lets check to ensure @angular-mdc/theme v0.0.7 is installed. Let me know.

[BrahimLaarif]

"version": "0.0.7" in @angular-mdc/theme/package.json

[trimox]

Couple follow-up questions.

1. Using Angular CLI?
2. Is it possible to share you're styles.scss?
3. Can you paste in results of npm outdated ?

[BrahimLaarif]

I'm using angular cli version 1.5.
Here the content of styles.scss :

$mdc-theme-primary: #4c2a59;
$mdc-theme-secondary: #9dba34;
@import "~@angular-mdc/theme/material";

Here the result of npm outdated :

Package                              Current      Wanted                 Latest  Location
@angular/flex-layout   2.0.0-beta.10-4905443  2.0.0-rc.1  2.0.0-beta.10-4905443  siecle-paris
@types/jasmine                        2.5.54      2.5.54                  2.6.3  siecle-paris
@types/node                           6.0.90      6.0.90                 8.0.51  siecle-paris
codelyzer                              3.2.2       3.2.2                  4.0.1  siecle-paris
jasmine-core                           2.6.4       2.6.4                  2.8.0  siecle-paris
jasmine-spec-reporter                  4.1.1       4.1.1                  4.2.1  siecle-paris
karma-chrome-launcher                  2.1.1       2.1.1                  2.2.0  siecle-paris
protractor                             5.1.2       5.1.2                  5.2.0  siecle-paris
ts-node                                3.2.2       3.2.2                  3.3.0  siecle-paris
tslint                                 5.7.0       5.7.0                  5.8.0  siecle-paris
typescript                             2.4.2       2.4.2                  2.6.1  siecle-paris

[trimox]

@ESKI everything lgtm. I've not been able to duplicate this using the published packages.

I've seen a few times where npm fails to retrieve all the packages. Just to be sure..
Remove the ./node_modules/@angular-mdc folder
Run npm i @angular-mdc/web@latest

If it works great, if not we know it's not package related. 😕

[BrahimLaarif]

I tried to reinstall angular-mdc but the issue still the same.
I also create a new ng v5 project with --style=scss flag. I installed only the angular-mdc v0.6 package. If i add the @import "~@angular-mdc/theme/material"; in the styles.scss. the warnings appear.

[trimox]

Ah. Duplicated it. Let ya know in a bit.

[trimox]

After a bit of research, I'm confident it's not an issue with Angular MDC. Some recent changes in MDC upstream Sass are producing the postcss postcss-custom-properties warnings with Angular CLI.

material-components/material-components-web#360
and
material-components/material-components-web#361

I've not found a solution yet to disabling the warnings using CLI and the following reddit post is recent..
https://www.reddit.com/r/Angular2/comments/7ahnk5/modify_postcss_settings_in_cli_15_to_suppress/

If you find a solution, please let me know and I'll update the guides. I'll keep researching as well..

[trimox]

@ESKI Did some further research.

Angular CLI uses a package called postcss-custom-properties. The warnings are generated because it doesn't support variable declarations on CSS selectors other than :root, so those variables are not transpiled for legacy browsers. Unfortunately, unless you opt to eject out of the CLI I've not found a workaround to remove the warnings.

The Angular CLI repo has open issues for these warnings.
angular/angular-cli#7991
angular/angular-cli#8289
angular/angular-cli#8427

Hope this helps!
-trimox

Closing since it's not a problem in our repo. I'll track the Angular CLI issues and refresh our guides if needed.

[trimox]

Updated with a hackable solution. Please see issue #394