Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

IE11: Read/Update single variable

See original GitHub issue

Hey! I’m searching for a way on how to read/edit a single css-variable with JS. I can’t just reuse the cssVars function, as this would overwrite my other variables: cssVars({ variables: { '--backgroundColor': value } });

Is there a way to make single updates or getting all current variables? Thanks in advance 😃

Issue Analytics

State:
Created 5 years ago
Reactions:2
Comments:7 (4 by maintainers)

Top GitHub Comments

2reactions

jhildenbiddlecommented, Nov 3, 2018

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"
        }
      });
    }
  }
});

1reaction

jhildenbiddlecommented, Nov 6, 2018

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: