undefined and false in css variables in inline styles are not removed

[hit12369]

Version

3.2.29

Reproduction link

sfc.vuejs.org/

Steps to reproduce

Use :style="{'--var': undefined}" or :style="{'--var': false}" in a template.

It's rendered as style="--var: undefined" or style="--var: false" which seems incorrect, --var should be removed instead. Using null works correctly and --var is removed.

What is expected?

Inline css variable should be removed.

What is actually happening?

It's actually being rendered as undefined.

[NaincyKumariKnoldus]

Hey @hit12369 Can I do this please?

[posva]

This seems to be just how CSS variables work:

$0.style.setProperty('--color', undefined) // sets the string undefined

[hit12369]

This seems to be just how CSS variables work:

$0.style.setProperty('--color', undefined) // sets the string undefined

While it is true, setting it as undefined removes the property in vue 2.

vue2 example: https://jsfiddle.net/zb1x79m0/

Also it would ensure consistency with non variable css properties.

$0.style.color = 'red'
$0.style.color = undefined // color does not change, but if we use :style="{color: undefined}" in vue, color gets removed

Example playground link: sfc.vuejs.org

[LinusBorg]

Seems we indeed have an inconsistency here. the code responsible for remoiving style properties relies on null being set for undefined values, which does happen when the style definition is wrapped in normalizeStyle.

_createElementVNode("h1", {
      style: _normalizeStyle({color: x.value })
    }, " color ", 4 /* STYLE */),

but normalizeStyle isn't being used when we have a plain object not using variables:

_createElementVNode("h1", {
      style: {color: undefined }
    }, " color "),

(Compiled code snippets taken from @hit12369 's sfc playground in their latest comment).

[hit12369]

There's a problem even with normalizeStyle where initial render sets the property as undefined but any rerender correctly removes the property.

Playground link: sfc.vuejs.org