feat(@angular/cli): add fallback for CSS variables

[garoyeri]

Aim to resolve #7514 by including postcss-custom-properties. This will generate extra rules in CSS when a var() is used to allow for compatibility with older IE browsers that do not support the feature.

[filipesilva]

LGTM, I think this is a good fix. Thanks!

[cyrilletuzi]

@garoyeri Is this supposed to work everywhere in the app ? Because currently it seems to work for CSS variables declared and used in the global styles (src/styles.scss) but not for CSS variables used in components' styles.

[garoyeri]

Reading through https://github.com/postcss/postcss-custom-properties/blob/master/README.md, there are some caveats on what works and what doesn't. Primarily, it will only work on variables declared in the :root selector. This was a trade-off that I was okay with since I was using it to handle theming use cases.

[cyrilletuzi]

@garoyeri Yes my variables are in :root, but they are only transformed for styles using them in style.scss but not in styles of components.

[garoyeri]

Ok, I did a little more digging, turns out that it is completely unsupported by postcss-custom-properties as per the issue here: postcss/postcss-custom-properties#68.

Basically, the plugin only operates on a single file unless you use postcss-import to inline the other styles which may cause weird things to happen. The only thing I can think of off the top of my head is to create a theme stylesheet globally that will be used by the component to map your theme variables onto the specific styles you want to override. This definitely isn't ideal, and supporting IE11 is an uphill journey :(

[nicky-lenaers]

@cyrilletuzi I'm stubling upon the same issue where component styles are not using the values generated by postcss-custom-properties. Do you have a workaround for this?

[cyrilletuzi]

@nicky-lenaers This feature has been removed from the CLI, because the issue couldn't be solved.

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