Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(runtime-dom): properly handle custom style properties with falsy values (fix: #5322) #5348

Merged
merged 2 commits into from Apr 13, 2022

Conversation

LinusBorg
Copy link
Member

@LinusBorg LinusBorg commented Jan 31, 2022

style definition objects that had an initially falsy value for a custom property would add that custom property with the stringified falsy value:

<div :style="{ '--color': undefined }">

<!-- was rendered as: -->
<div style="--color: undefined;"> 

Note that this only affected initial values. if the falsy value was added in an update, the property was properly removed.

After this PR, the custom property would not be added in the first place on mount:

<div style>

close: #5322

@netlify
Copy link

netlify bot commented Jan 31, 2022

Deploy Preview for vuejs-coverage ready!

Name Link
🔨 Latest commit 59a6eb5
🔍 Latest deploy log https://app.netlify.com/sites/vuejs-coverage/deploys/6256a2fb7742af0008d6310c
😎 Deploy Preview https://deploy-preview-5348--vuejs-coverage.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Jan 31, 2022

Deploy Preview for vue-next-template-explorer ready!

Name Link
🔨 Latest commit 59a6eb5
🔍 Latest deploy log https://app.netlify.com/sites/vue-next-template-explorer/deploys/6256a2fb44591000087b150c
😎 Deploy Preview https://deploy-preview-5348--vue-next-template-explorer.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Jan 31, 2022

Deploy Preview for vue-sfc-playground ready!

Name Link
🔨 Latest commit 59a6eb5
🔍 Latest deploy log https://app.netlify.com/sites/vue-sfc-playground/deploys/6256a2fb9dc8050008bd47d6
😎 Deploy Preview https://deploy-preview-5348--vue-sfc-playground.netlify.app/
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@LinusBorg LinusBorg changed the title fix(runtime-dom): properly handle custom style properties with falsy values fix: #5322 fix(runtime-dom): properly handle custom style properties with falsy values (fix: #5322) Jan 31, 2022
@LinusBorg LinusBorg added this to In Review in Next Patch Mar 10, 2022
@LinusBorg LinusBorg added the 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. label Mar 11, 2022
@yyx990803 yyx990803 force-pushed the linusborg/handle-initial-styleprop-undefined branch from 2133d1c to 59a6eb5 Compare April 13, 2022 10:16
@yyx990803
Copy link
Member

We should only treat null and undefined as removal (this is consistent with Vue 2 where false is rendered as-is) so I removed the check for false.

@yyx990803 yyx990803 merged commit 85af139 into main Apr 13, 2022
Next Patch automation moved this from Open for Review to Done Apr 13, 2022
@yyx990803 yyx990803 deleted the linusborg/handle-initial-styleprop-undefined branch April 13, 2022 10:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage.
Projects
Development

Successfully merging this pull request may close these issues.

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