IE11: Read/Update single variable about css-vars-ponyfill HOT 7 CLOSED

Hey @bene-starzengruber.

Use the options.onComplete callback to access a list of all CSS custom properties.

• Set options.onlyLegacy to false tell the ponyfill to do this in both modern and legacy browsers,
• Set updateDOM options.updateDOM to false to do a read-only (no changes to the DOM will be made).

cssVars({
  onlyLegacy: false, // Execute in modern and legacy browsers
  updateDOM : false, // Don't do anything
  onComplete: function(cssText, styleNode, cssVariables) {
    // Do stuff with cssVariables
    console.log(cssVariables);
  }
});

Use options.variables to add or modify CSS custom properties. See the Examples section for details.

cssVars({
  variables: {
    "--my-color": "red"
  }
});

This will either add the --my-color CSS custom property or update its value if it already exists. All other CSS custom properties will remain unchanged.

You can call cssVars() as many times as you like, passing only the custom properties you want to add or update to options.variables. For performance reasons, it's obviously better to call the ponyfill one time with many variables as opposed to multiple times with a single variable each time.

If you want to 1) read a custom property value and then 2) change it based on its value, combine the two methods:

// 1st call: Get the CSS custom property values
cssVars({
  onlyLegacy: false,
  updateDOM : false,
  onComplete: function(cssText, styleNode, cssVariables) {
    if (cssVariables["--my-color"] === "red") {
      // 2nd call: Edit a single custom property
      cssVars({
        variables: {
          "--my-color": "blue"
        }
      });
    }
  }
});

from css-vars-ponyfill.

You bet, @bene-starzengruber.

FWIW, I created this quick demo to test options.variables and overwriting values:

• https://css-vars-ponyfill-33.stackblitz.io

The test exposed an issue where the cssVariables argument is empty when using the first block of code I provided:

cssVars({
  onlyLegacy: false, // Execute in modern and legacy browsers
  updateDOM : false, // Don't do anything
  onComplete: function(cssText, styleNode, cssVariables) {
    // Do stuff with cssVariables
    console.log(cssVariables);
  }
});

You can see this in the demo. Changing updateDOM to true (or comment it out since true is the default) solves the issue, but this is a bug. You shouldn't have to make changes to the DOM just to read CSS custom property values.

Look for a fix soon. I wanted to let you know about this in case it is related to the issues you're having.

from css-vars-ponyfill.

Fixed in 1.12.2.

Sorry about that. 1.12.1 fixed a separate but related bug. The bug you ran into was a regression introduced in 1.11.0. This has been fixed, and values passed to options.variables should now persist properly.

New demo available here:

• https://stackblitz.com/edit/css-vars-ponyfill-33-2?file=index.js

from css-vars-ponyfill.

Thanks!
I still have the problem that the options.variables is overriding my other variables as well but now with your hints, I just get all variables, change some and set them all again. I know that this is probably not as performant but enough for my use case.

from css-vars-ponyfill.

Fixed in 1.12.1.

I've left the demo on 1.12.0 to you can see the bug. If you update the dependency to 1.12.1, you will see the bug has been fixed.

from css-vars-ponyfill.

I just tried it out with the new version and am still running into the same problem
https://stackblitz.com/edit/angular-u7687e?file=src%2Fapp%2Fapp.component.ts

• Change Background color - Background will change but the css-variable is not set on the :root element
• Change TextColor - Text color is changed but background is resetted to the initial value

Have a look at the console output - I made logs every time I call the cssVars function

from css-vars-ponyfill.

Yes, everything is working now!

Thanks, your work is highly appreciated :)

from css-vars-ponyfill.