Support for CSS variables in `styles` property
Dyljyn opened this issue · comments
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
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
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
@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.
Excellent! I can confirm that your latest commit resolves it 🎉
Release 3.4.0 contains the fix.