FYI, you also can use cssText as a workaround for current version of hyperapp:

<main style={{ cssText: '--foo:red' }}>
  <h1 style={{ color: 'var(--foo)' }}>Hello</h1>
  <button style={{ backgroundColor: 'var(--foo)' }}>+</button>
</main>

Demo: https://codepen.io/frenzzy/pen/RQygyL?editors=0010

Thanks, @frenzzy. Amazing work. It's not as much code as I actually imagined, but I'll not merge this before I can do some research of my own. Exploring alternatives like using cssText to implement inline styles, or maybe even something more wacko like Picostyle.

Codecov Report

Merging #612 into master will not change coverage.
The diff coverage is 100%.

@@          Coverage Diff          @@
##           master   #612   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files           1      1           
  Lines         152    155    +3     
  Branches       48     49    +1     
=====================================
+ Hits          152    155    +3

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 1e47432...11d65a5. Read the comment docs.

@frenzzy What's the total byte increase?

@frenzzy Sounds like a reasonable compromise. Is there anything else to add? Does this cover everything?

What about --mainColor or $mainColor instead of --main-color? Like:

<div style={{
  $cssVariable: "red"
}} />

Probably a lot more code, but it would be cool haha.

/cc @lukejacksonn @zaceno @SkaterDad @okwolf

According to custom properties specification the only requirement is any custom property name must starts with two dashes.

So, what notation to use (--mainColor or --main-color) is up to you.

Symbol $ is more about preprocessors like Sass, Less an so on, but not about native CSS.

@frenzzy

So, what notation to use (--mainColor or --main-color) is up to you.

You are right.

Symbol $ is more about preprocessors like Sass, Less an so on, but not about native CSS.

Right, but if we (just an idea) treated names starting with a $ as a CSS variable it would be a lot easier to use/type in the style object.

{ $cssVariable: "red" }

...instead of:

{ "--cssVariable": "red" }

But yeah, I'd probably be crucified if we introduced this convenient oddball.

For once, I am not totally against breaking the standard here as you point out $var is way way better than "--var" but it is probably still a bad idea 😅

How about this?

const brandColor = '--brand-color'
const $brandColor = `var(${brandColor})` 

const view = () => (
  <main style={{ [brandColor]: 'red' }}>
    <h1 style={{ color: $brandColor }}>Hello</h1>
    <button style={{ backgroundColor: $brandColor }}>+</button>
  </main>
)

@frenzzy What about rewriting the code like this?

for (var i in clone(oldValue, value)) {
  if (i[0] === "-") {
    element[name].setProperty(i, value)
  } else {
    element[name][i] = value == null || value[i] == null ? "" : value[i]
  }
}

Or what about using only setProperty for both cases?

for (var i in clone(oldValue, value)) {
  element[name].setProperty(i, value == null || value[i] == null ? "" : value[i])
}

Test #ff0000 #ff00ff #ffff00 #ffffff

@frenzzy I think we can use setProperty

• No apparent perf difference: Add support for CSS variables in style attributes facebook/react#6411 (comment)
• IE9+ https://msdn.microsoft.com/en-us/ie/ff975068(v=vs.94)

So, what notation to use (--mainColor or --main-color) is up to you.

But I suggest stick to the current convention of snale case in CSS and camel case in JS

PS I only just found out you can set CSS vars easily in JS. no need to mess about manipulating stylesheets in JS.

@SteveALee We went with the --no-surprise version of CSS variables! 😉

<div
  style={{
    "--color": "red",
    color: "var(--color)"
  }}
>
  OK
</div>

Totally Agree. Just making a note for users of HA :)