3

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..

Lukáš Strišovský
  • 53
  • 1
  • 7

1 Answers1

3

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.

John Hildenbiddle
  • 3,115
  • 2
  • 19
  • 14
  • @jildenbiddle does using watch improve load time? In angular I am initializing cssvars({options:)} at the root component oninit. In ie11 I have a noticeable delay before my polyfill kicks in. – Winnemucca Jul 23 '19 at 16:42
  • 1
    @Winnemucca - Unlikely. First thing to do is determine if the ponyfill call is being delayed (i.e. what is your app doing before the ponyfill) or if the ponyfill is taking a long time to complete. These are separate issues. If you'd like further assistance, feel free to open an issue on GitHub where we can discuss further. – John Hildenbiddle Jul 24 '19 at 17:42