Support for CSS variables in styles property

[Dyljyn]

Expected behavior

When providing a CSS variable through the styles property. It is added to the style attribute of the tag.

h('div', {
  styles: {
    '--background-color': 'blue',
  }
}, [])

Should result in:

<div style="--background-color:blue;"></div>

Current behavior

CSS variables get ignored and are not rendered.

Demo

https://stackblitz.com/edit/maquette-starter-j1rjrw?file=main.ts

[johan-gorter]

Very interesting...
It seems that this notation does work however (and is more typescript-friendly)

h('div', {
  styles: {
    backgroundColor: 'var(--background-color, gray)'
  }
}, [])

DEMO

https://stackblitz.com/edit/maquette-starter-b5kdg3?file=main.ts

[johan-gorter]

A long time ago, we made a style-applyer hook to allow adding vendor prefixes. It turns out you can use to apply styles in a way that is compatible with CSS variables:

const projector = createProjector({
  styleApplyer: (domNode, stylename, value) => {
    domNode.style.setProperty(stylename, value);
  }
});

We should add this to maquette though, but this means you do not have to wait for a new release

Demo

https://stackblitz.com/edit/maquette-starter-b5kdg3?file=main.ts

[johan-gorter]

@Dyljyn can you confirm that the patch I just committed fixes your issue and CSS variables in general? I will make a new release if it does.

[Dyljyn]

Excellent! I can confirm that your latest commit resolves it 🎉

[johan-gorter]

Release 3.4.0 contains the fix.