Skip to content

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

@roydukkey

Description

@roydukkey

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

  1. Create a component with an optional property
  2. v-bind the property in CSS
  3. 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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions