Getting started with css-vars-ponyfill

Hi there

I am working on an app that uses Custom CSS Properties and it needs to work in IE 11. I have had a look at this library but I can’t really discern how to configure it properly.

Can you please give me some guidance? I have an Angular app and we are switching themes by using class selectors on :root body. The themes contain the variables. The code is working perfectly in Chrome et al, but doesn’t work in IE 11. What are the steps to get the library to do its magic and fix my CSS? I know there is a lot of documentation around the cssVars() method, and I have looked at all the dependant projects; but I still can’t get it working!

Please help a drowning developer!

I am using the following format for my variables:

$variables: (
  --box-shadow-color: var(--box-shadow-color),
  --page-background-color: var(--page-background-color),
}

and giving them these default values:

:root body {
  --box-shadow-color: rgba(0, 0, 0, 0.03);
  --page-background-color: #{$light-grey};
}

and then swapping them in and out by using classes:

:root body.theme-johnlewis {
  --box-shadow-color: rgba(0, 0, 0, 0.03);
  --page-background-color: #{$color-red};
}

Is this the right format to be using?

[mark-norgate-landg]

Hey dude. Just to let you know we refactored as you suggested in your first code snippet and we managed to get theming working with SASS/CSS Variables in IE 11.

So thanks a lot!

[jhildenbiddle]

Hi @mark-norgate-landg.

Per the docs, the ponyfill requires all CSS custom properties to be declared within :root-level declarations. It does not support “scoped” custom properties like the one you’ve listed above which target the body element.

Fortunately, there are several ways to work around this.

The easiest way to swap themes based on CSS custom properties is to call the ponyfill using options.variables to update custom property values.

1. Declare your default values with a :root-level declaration:

   :root {
     --my-color1: red;
     --my-color2: green;
     --my-color3: blue;
   }
   

2. Call the ponyfill to transform CSS in legacy browsers. This will render your default theme.

   cssVars();
   

3. To swap themes, call the ponyfill again using options.variables to update values:

   cssVars({
     variables: {
       '--my-color1': 'purple',
       '--my-color3': 'orange'
     }
   });
   

   If you prefer, store your theme values in a named object and just pass that to the ponyfill:

   const myTheme = {
     '--my-color1': 'purple',
     '--my-color3': 'orange'
   };
   
   cssVars({
     variables: myTheme
   });
   

Note that options.variables is unique in that it can update both modern and legacy custom property values even when options.onlyLegacy is true. Click the links and read the docs for details.

There are other ways to swap themes as well. For example, you could store each theme’s custom property values in a separate stylesheet, include them as alternate stylesheets, then enable/disable those sheets as needed to set a new active theme. You would then call cssVars() manually, or you could use options.watch to have the ponyfill detect these changes and call itself automatically. This requires more JS to write and maintain on your end, but it would allow you to store your theme values in CSS files instead of JS (if that matters).

Hope this helps. Let me know how it goes.

Thanks!