Bug: Fundamentals exports raw CSS variables which aren't compatible in IE11

[mobot11]

Describe the bug A clear and concise description of what the bug is.

• css consumed from the fiori-fundamental npm package contains raw CSS variables which are not compatible with IE 11.

Is this issue related to a specific component?

• Any component with CSS variables

What version of the Fiori Fundamentals are you using? 0.1.0 What offering/product do you work on? Any pressing ship or release dates we should be aware of?

• Member of SAP Concur Core UI and fundamental-react team which will rely on this library in the future

What front-end framework are you implementing in, e.g., Angular, React, etc.?

• fundamental-react

To Reproduce Steps to reproduce the behavior:

1. Go to https://sap.github.io/fundamental/components/alert.html in IE11
2. See background color of Alert component isn't the same as in chrome

Expected behavior

• CSS variables should be compiled at build time using https://github.com/MadLittleMods/postcss-css-variables and webpack (ideally) or Ponyfilled when used in IE (less ideal) https://www.npmjs.com/package/css-vars-ponyfill

Screenshots

Desktop (please complete the following information):

• OS: [e.g. iOS] IOS 10.14 VirtualBox
• Browser [e.g. chrome, safari] IE11

[bcullman]

Additionally, the provided IE11 polyfill file still has CSS variables in it.

First instance https://github.com/SAP/fundamental/blob/develop/dist/fiori-fundamentals-ie11.css#L2090

and plenty more...

[bcullman]

IE11 support is a requirement for fiori3.

[xak]

Yes, we opted to go in with CSS custom properties to solve for teams that want run-time theme switching and style encapsulation. The recommendation is to use the IE11-compatible file where we include the fallback values if you need that support.

Thanks for the heads-up on the PostCSS process. That would be a good addition to output a more streamlined IE11-compat file.

[droshev]

[droshev]

Not supporting IE11 by default will make extremely difficult consuming directly fundamental-ui in fundamental-ngx, fundamental-react, and fundamental-vue. that's why this is a very critical issue. Most of the products we are working on do/require support IE11.

[xak]

@droshev I recommend you update your README to indicate that if IE11 support is needed then use the IE 11 library. The end result will be the same only with a heavier CSS load.

"./node_modules/fiori-fundamentals/dist/fiori-fundamentals-ie11.css"

[bcullman]

@xak That is not addressing the issue that was brought up here - the fiori-fundamentals-ie11.css you are distributing contains raw CSS vars that cannot be processed by IE11

You should also be including the fiori-fundamentals-ie11.css in your docs as well. This file can be included optionally, using the IE block you already have here:

https://github.com/SAP/fundamental/blob/develop/docs/_includes/head.html#L35-L38

[eboyer]

@jbadan ~ Since we're hoping to use post-css to get the desired outcome on this issue, doing this after your gulp refactoring should happen right?

[jbadan]

@eboyer yeah! I'm working on a spike right now to figure out how we want to address this.

[droshev]

It looks like we have some places where there is not fallback yet - we can try to address those in this issue.