fix(hydration): avoid hydration mismatch on style variables with falsy values

packages/runtime-core/__tests__/hydration.spec.ts

@@ -2204,6 +2204,29 @@ describe('SSR hydration', () => {
       app.mount(container)
       expect(`Hydration style mismatch`).not.toHaveBeenWarned()
     })
+
+    test('should not warn on css v-bind non-string & non-number & empty string value', () => {
+      const container = document.createElement('div')
+      container.innerHTML = `<div style="padding: 4px;"></div>`
+      const app = createSSRApp({
+        setup() {
+          const value1 = ref<any>(null)
+          const value2 = ref('')
+          useCssVars(() => ({
+            foo: value1.value,
+            bar: value2.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

@@ -938,10 +938,10 @@ function resolveCssVars(
   ) {
     const cssVars = instance.getCssVars()
     for (const key in cssVars) {
-      expectedMap.set(
-        `--${getEscapedCssVarName(key, false)}`,
-        String(cssVars[key]),
-      )
+      const value = cssVars[key]
+      if ((isString(value) && value.trim()) || typeof value === 'number') {
+        expectedMap.set(`--${getEscapedCssVarName(key, false)}`, String(value))
+      }
     }
   }
   if (vnode === root && instance.parent) {