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) {