CSS Variables (Custom Properties) 💅

[frenzzy]

Usage:

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

Refs:

• MDN: Using CSS custom properties (variables)
• Can I use: https://caniuse.com/#feat=css-variables
• PR to React.js: Use setProperty when setting style properties facebook/react#9302

[frenzzy]

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

[jorgebucaran]

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.

[frenzzy]

looks like jsdom does not support custom properties yet =/

test('example', () => {
  const div = document.createElement('div')
  div.style.setProperty('--foo', 'red')
  document.body.appendChild(div)

  console.log(document.body.innerHTML) // => '<div></div>'
  console.log(div.style.getPropertyValue('--foo')) // => undefined

  expect(document.body.innerHTML).toBe('<div style="--foo:red"></div>') // => fail
  expect(div.style.getPropertyValue('--foo')).toBe('red') // => fail
})

[frenzzy]

Google Search crawler is based on Chrome 41, which does NOT support CSS Custom Properties: https://twitter.com/ebidel/status/968989651888295936

[codecov]

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

Impacted Files	Coverage Δ
src/index.js	100% <100%> (ø)	⬆️

---

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.

[jorgebucaran]

@frenzzy What's the total byte increase?

[frenzzy]

file	master	branch	diff
hyperapp.js	9106	9235	+129
hyperapp.min.js	3465	3507	+42
hyperapp.min.js.gz	1545	1568	+23

[jorgebucaran]

@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

[frenzzy]

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.

[jorgebucaran]

@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.

[lukejacksonn]

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 😅

[frenzzy]

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>
)

[jorgebucaran]

@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])
}

[jorgebucaran]

Test #ff0000 #ff00ff #ffff00 #ffffff

[jorgebucaran]

@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)

[SteveALee]

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.

[jorgebucaran]

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

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

[SteveALee]

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

[jorgebucaran]

LGTM