Add support for CSS Custom Properties
See original GitHub issueCross-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.
Issue Analytics
- State:
- Created 6 years ago
- Reactions:11
- Comments:10 (4 by maintainers)
@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
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.