opened
Milek7
username_0
Following code do anything:
`document.body.style.setProperty("--somevar", "100px");`
Same code executed in JavaScript correctly sets CSS variable (visible in element inspector)
HtmlElement.style.setProperty don't work for CSS variables
issue
created
zoechi
username_1
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?
comment
created
Milek7
username_0
Tested in Chromium and Firefox.
Example: https://github.com/username_0/dartsdk-26819
First row should have green background set by Dart.
Second row have green background set by javascript eval called by context.callMethod.
comment
created
zoechi
username_1
Packed it in a [**DartPad**](https://dartpad.dartlang.org/0f57b34b9323724e5f7108c700c6303c)
comment
created
leonsenft
username_2
Any update on this? Just ran into this issue.

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

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

doesn't work, but

```dart
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?
comment
created
zacharydenton
username_3
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 @username_2's example).
comment
created
alan-knight
username_4
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?
comment
created
leonsenft
username_2
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
comment
created
alan-knight
username_4
https://codereview.chromium.org/2976213002
comment
created
leonsenft
username_2
It seems like this has been fixed (at least in the latest version of DartPad)! Thanks.
comment
closed
leonsenft
username_2
issue