Merge 8ce63aa707 into 56be3dd4db

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 = `<div style="padding: 4px;--bar:;"></div>`
+      const app = createSSRApp({
+        setup() {
+          const value1 = ref<any>(null)
+          const value2 = ref('')
+          const value3 = ref<any>(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', () => {

packages/runtime-core/src/hydration.ts

@@ -904,7 +904,7 @@ function toStyleMap(str: string): Map<string, string> {
     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) {