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

[lidlanca]

sound like undefined or false should not be used.
but handling this edge case, will add checks for an edge case that can be easily avoided.

use empty string '' or null to remove
and this will be on par with how the native style.setProperty works.

I would have said, just remove the style from the object, but that will actually not work for reactive object, without cloning/spreading