Vue: Allow css variable in style binding (object syntax)

[vbrajon]

I am not sure if this is intentional, I would like to be able to do:

<div :style="{ '--color': player.color }">…</div>

instead of:

<div :style="'--color :' + player.color">…</div>

I was able to find the workaround quickly thanks to the doc search here: http://vuejs.org/guide/migration.html#v-bind-style-with-Object-Syntax-and-important-deprecated

It's a bit different from !important so I would like to push for this feature.

Thanks a lot for your good work, I can work on a PR if you agree with this proposition.

[defcc]

--color ? this is not a valid css property name

For object style binding, you could take a look at http://vuejs.org/guide/class-and-style.html#Object-Syntax-1, and the key should be a valid css property name.

[phanan]

@defcc --color is a CSS3 variable syntax.

[phanan]

I'm not sure if this should be supported – the current style binding only supports CSS properties AFAIK. Reopening this, however, so that @yyx990803 and other members can chime in with their ideas.

[defcc]

My mistake, haven't used it before, I'll google it :)

[tsteuwer]

@phanan I believe the correct syntax is var(--color) and it's css4 not 3.

[phanan]

AFAIK var(--color) is the usage, --color: #fff is the definition syntax. I'm not sure about 4vs3, but it shouldn't affect our main issue here anyway.

[yyx990803]

Fixed in 4b8eb75