fix(runtime-dom): handle multiple patch with boolean style value

[linzhe141]

close #12368

[github-actions[bot]]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	100 kB (+23 B)	38 kB (+10 B)	34.2 kB (+17 B)
vue.global.prod.js	159 kB (+23 B)	57.9 kB (+8 B)	51.5 kB (+49 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	46.9 kB (+23 B)	18.3 kB (+9 B)	16.7 kB (+9 B)
createApp	55 kB (+23 B)	21.3 kB (+10 B)	19.5 kB (+58 B)
createSSRApp	59 kB (+23 B)	23 kB (+6 B)	20.9 kB (-68 B)
defineCustomElement	59.8 kB (+25 B)	22.9 kB (+13 B)	20.8 kB (+3 B)
overall	68.7 kB (+23 B)	26.4 kB (+8 B)	23.9 kB (-63 B)

[pkg-pr-new[bot]]

Open in Stackblitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@12372

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@12372

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@12372

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@12372

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@12372

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@12372

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@12372

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@12372

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@12372

vue

pnpm add https://pkg.pr.new/vue@12372

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@12372

commit: 7a91330

[edison1105]

CSS property values do not support boolean types. Whether true or false, the value should be set to an empty string. see Playground with this PR see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units

[skirtles-code]

I'm wondering whether we should log a warning for boolean values, rather than supporting them?

I can see an argument for supporting false as equivalent to "". e.g.:

:style="{ color: s && 'red' }"

Where s is a boolean ref.

But I can't think of a realistic use case for passing true, it seems like we'd just be hiding bugs.

Given neither boolean value currently works correctly, I'm personally leaning more towards showing a warning instead.

[linzhe141]

Thank you for your review. After giving it some thought, I also believe that adding a warning log is a good approach to inform users that Vue does not support boolean values in style bindings, which can help avoid some strange edge cases.

One last thing to add: this PR also doesn't support the boolean type — it just ignores it.