Retrieving custom property values with `getPropertyValue` doesn't work in IE11

[toufali]

Trying to access custom properties set in :root does not seem to work on IE11: getComputedStyle(document.documentElement).getPropertyValue('--my-var') returns empty string despite confirming --my-var is properly set.

Works as expected on Edge and all modern browsers.

[BrentWMiller]

@HandsomeMedia IE11 doesn't support CSS variables. Ref: https://caniuse.com/#search=css%20variable

[toufali]

@BrentWMiller yes, but isn't that the main point of PostCSS custom properties - to polyfill for browsers that don't support it?

[qkevinto]

@HandsomeMedia, PostCSS Custom Properties does not polyfill anything but rather transforms your CSS to add in a fallback declaration for the usage of CSS custom properties during build time. PostCSS itself is a CSS transformation/postprocessing tool that's used during build time and has no effect on the client's browser.

[toufali]

Okay, let me rephrase then: Shouldn't PostCSS transform the :root CSS to add a fallback declaration in IE11, so that we can access it via getComputedStyle(document.documentElement).getPropertyValue('--my-var')?

[coolemur]

I have the same issue.

I'm thinking of giving https://www.npmjs.com/package/css-vars-ponyfill a go but not sure if this will work as expected in combination with custom properties.

More ideas are welcome. Thank you.

[coolemur]

Just tested ponyfill. Didn't work on IE11 (doesn't set/get css variables from js).

[spiess-demos]

@coolemur the css-vars-ponyfill module provides javascript access to all custom properties in a callback: https://github.com/jhildenbiddle/css-vars-ponyfill/issues/85#issuecomment-521771857