Angular 7 - CSS Custom Properties (CSS Variables)

Question

I'm trying to find solution how integrate polyfill/fallback for CSS Variables to project which is using newest version of Angular (7.0.1) with Angular Material (7.0.2). Problem is that ng eject is disabled at this moment, so, I can't edit configuration for Autoprefixer which is using PostCSS for which already exists plugins making fallback for older browsers.

What I found:

CSS Vars Ponyfill

• JS Library for watching on inline styles, <styles> or <link> HTML tag but for using this I must enable watch option of this plugin what means, watching for any changes in DOM (I don't like this solution)

CSS Next

• plugin for PostCSS (used in Angular build as Autoprefixer). I think, best possible solution but currently I'm not to able how to edit build/webpack config.

What I can do:

• sure, I can create own @mixin in .scss for handling property, value as arguments and then return fallback + value with CSS Variables but I'm not sure if there are not possible future problems with that, so, I will be more happier with already exists solution (e.g. CSSNext).

Have you, please, some idea how to reach this goal please? Thank you.

Regards,

striky..

Answer 1

Author of css-vars-ponyfill here.

You don't have to enable the watch option to use the ponyfill with your Angular app. If you prefer, you can call it manually anytime (after initiating a theme change, on route change, component mount, etc). The watch option is a just a nice "set it and forget it" option that most people favor for its simplicity.

Version 2.x of the ponyfill has recently been released which supports incremental updates and therefore offers a nice performance bump over 1.x as well.

Hope this helps. Feel free to open an issue on GitHub if you have any questions or would like to discuss further.