In CSS, `v-bind()` should not add custom properties to the component's style attribute when their value is `undefined`.

roydukkey

Jan 5th 2023

Vue version

3.2.45

Link to minimal reproduction

https://sfc.vuejs.org/#eNq1kTFv4zAMhf8KocU94GLvPjfA4ZbrdsANXbQ4jtK4lUhBpFIEQf57KTlJiwIdO9mkqMdP753M7xjbQ3amNwNPaY4C7CTHtcU5REoCfyhE2CUK0LRdKcp4YxHA4kTIAjFRZLiHrdvN6P6V6u5UBibylHr4L2nGJ4vnH78sDt2yRhdoIS5EP4orlQx1Vb10b83GZ2fN+q87gid6gYcmQOm1Q6V4v7F+AN5T9ltAEtiPBwcZF5YtTJlF0QuiSzI7hhkhHIHl6B2MomibLB9EARaM/sqB2XvleKT0MiZS5dvo0N3wzU+z2LUKY2yfmVANrR7YywFb00PtlJ5aWGpr9iKR+67j3VR8feaW0lOnf23KKHNwreOw2iR6ZZdU2JoicVYzdeU1ja/DO30MBc6XHL8nQHVO0/Mjs7o2KRqhQ1HrlkcP7EnWert86nT3ycQqWIOp5+1N4+rbBeew2sy4vWsqtk5psylk1RddUBXM+Q2WqwCD

Steps to reproduce

Create a component with an optional property
v-bind the property in CSS
Use the component without specifying the optional property

What is expected?

As null values are not added to the style attribute, undefined values should not be added either.

What is actually happening?

The optional property is added to the style attribute with a value of undefined.

System Info

System:
    OS: macOS 13.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 330.34 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.9.1 - ~/.nvm/versions/node/v18.9.1/bin/node
    Yarn: 1.21.1 - ~/.nvm/versions/node/v18.9.1/bin/yarn
    npm: 8.19.1 - ~/.nvm/versions/node/v18.9.1/bin/npm
  Browsers:
    Chrome: 108.0.5359.124
    Edge: 108.0.1462.54
    Firefox: 108.0.2
    Safari: 16.2

Any additional comments?

No response

GitHub Track