Add support for CSS Custom Properties

Cross-references with React:

• PR adding support for CSS Custom Props: https://github.com/facebook/react/pull/9302
• Issue closed by previous PR: https://github.com/facebook/react/issues/6411

React will soon be able to support CSS Custom Properties (CSS Variables) by using .style.setProperty(<prop>, <value>) instead of directly modifying .style.<prop> = <value> for custom properties (detected by seeing if the property starts with two dashes, e.g., --foo-bar).

It seems that, for objects passed into the style attribute of Preact components, this is currently not the case, as it is still directly setting the style properties: https://github.com/developit/preact/blob/9e1dd185bb1d6505c35477d8101c886c25dc51c8/src/dom/index.js#L57

Furthermore, the use of .style.setProperty(prop, value) seems to be much faster in most environments (except for IE9-11, where it is slightly slower): https://jsperf.com/dom-style-vs-setproperty - shouldn’t matter anyway if you choose to use .setProperty for only custom properties.

The end-goal is to have this work:

<div style={{ '--foo': 'green', color: 'var(--foo, red)' }}> 
  ...
</div>

What do you think? 😄 It’s a fairly minor change and I can make a PR if needed.

[benjamminj]

@developit any news on this feature? I saw the PR got out of date with master…

If there’s anything I can do to help would love to as I just found myself looking for this feature/wishing I could set variables inline this morning

[tkh44]

Is there any way I can help on this @developit? If you tell me which strategy to take I’d be happy to open a PR.