Sdk: HtmlElement.style.setProperty don't work for CSS variables

[Milek7]

Following code don't do anything:
document.body.style.setProperty("--somevar", "100px");
Same code executed in JavaScript correctly sets CSS variable (visible in element inspector)

[zoechi]

What behavior do you expect?
What browser did you test?
Can you provide a repository with a minimal example that demonstrates what you tried to accomplish and allows to reproduce?

[Milek7]

Tested in Chromium and Firefox.
Example: https://github.com/Milek7/dartsdk-26819
First row should have green background set by Dart.
Second row have green background set by javascript eval called by context.callMethod.

[zoechi]

Packed it in a DartPad

[leonsenft]

Any update on this? Just ran into this issue.

It seems like all properties are validated in some way before being set. For example,

document.body.style.setProperty('color', '12px')

doesn't work, but

document.body.style.setProperty('color', 'red')

does.

I'm guessing support for CSS variables was never considered and as a result they're treated as invalid properties and not applied? Are there any compelling reasons to actually drop properties like this? Why can't we just honor whatever the user wants to set?

[zacharydenton]

The issue here seems to lie with the _browserPropertyName function in the dart:html CssStyleDeclaration.setProperty definition. Given a property like --custom-property, it will return -webkit---custom-property (depending on the browser), which the browser then rejects as an invalid style (similar to how the browser rejects color: 12px in @leonsenft's example).

[alan-knight]

So, without really understanding CSS variables, it seems like there's not a way to check if they're defined, so it would be more appropriate if the setProperty did not just assume that if we don't have property x, we must mean browserPrefix-x and also checked the prefixed version. That is, something like

    if (_supportsProperty(_camelCase(propertyName))) {
      name = propertyName;
    } else if _supportsProperty(Device.cssPrefix + propertyName) { // Also needs camelcasing? Also don't recompute.
      name = Device.cssPrefix + propertyName;
    } else {
      // We don't know what it is, just pass it through, and don't try to case normalize it.
      name = propertyName;
   }

Does that make sense?

[leonsenft]

@alan-knight
Setting a variable via setProperty is defining it, so we definitely don't want to check if it's declared already: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

Yes, you could always just let anything through as the fallback case, or you could even check if it's a variable (they always start with --).

[alan-knight]

https://codereview.chromium.org/2976213002

[leonsenft]

It seems like this has been fixed (at least in the latest version of DartPad)! Thanks.