diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts
index 56011d06359..763356c4395 100644
--- a/packages/runtime-core/__tests__/hydration.spec.ts
+++ b/packages/runtime-core/__tests__/hydration.spec.ts
@@ -2204,6 +2204,31 @@ describe('SSR hydration', () => {
app.mount(container)
expect(`Hydration style mismatch`).not.toHaveBeenWarned()
})
+
+ test('style var with falsy values', () => {
+ const container = document.createElement('div')
+ container.innerHTML = `
`
+ const app = createSSRApp({
+ setup() {
+ const value1 = ref(null)
+ const value2 = ref('')
+ const value3 = ref(undefined)
+ useCssVars(() => ({
+ foo: value1.value,
+ bar: value2.value,
+ baz: value3.value,
+ }))
+ return () => h(Child)
+ },
+ })
+ const Child = {
+ setup() {
+ return () => h('div', { style: 'padding: 4px' })
+ },
+ }
+ app.mount(container)
+ expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+ })
})
describe('data-allow-mismatch', () => {
diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts
index a94ff356810..bb814891504 100644
--- a/packages/runtime-core/src/hydration.ts
+++ b/packages/runtime-core/src/hydration.ts
@@ -904,7 +904,7 @@ function toStyleMap(str: string): Map {
let [key, value] = item.split(':')
key = key.trim()
value = value && value.trim()
- if (key && value) {
+ if (key) {
styleMap.set(key, value)
}
}
@@ -938,10 +938,13 @@ function resolveCssVars(
) {
const cssVars = instance.getCssVars()
for (const key in cssVars) {
- expectedMap.set(
- `--${getEscapedCssVarName(key, false)}`,
- String(cssVars[key]),
- )
+ const value = cssVars[key]
+ if (isRenderableAttrValue(value)) {
+ expectedMap.set(
+ `--${getEscapedCssVarName(key, false)}`,
+ String(value).trim(),
+ )
+ }
}
}
if (vnode === root && instance.parent) {