chore: update setVarsOnNode

packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts

@@ -465,4 +465,31 @@ describe('useCssVars', () => {
     render(h(App), root)
     expect(colorInOnMount).toBe(`red`)
   })
+
+  test('filter non-string、non-boolean、non-number value', () => {
+    const state = reactive<any>({
+      color: 'red',
+      size: {},
+      width: false,
+      height: 10,
+    })
+    const root = document.createElement('div')
+    let style!: CSSStyleDeclaration
+
+    const App = {
+      setup() {
+        useCssVars(() => state)
+        onMounted(() => {
+          style = (root.children[0] as HTMLElement).style
+        })
+        return () => h('div')
+      },
+    }
+
+    render(h(App), root)
+    expect(style.getPropertyValue(`--color`)).toBe(`red`)
+    expect(style.getPropertyValue(`--size`)).toBe(``)
+    expect(style.getPropertyValue(`--width`)).toBe(`false`)
+    expect(style.getPropertyValue(`--height`)).toBe(`10`)
+  })
 })

packages/runtime-dom/src/helpers/useCssVars.ts

@@ -10,7 +10,7 @@ import {
   warn,
   watch,
 } from '@vue/runtime-core'
-import { NOOP, ShapeFlags } from '@vue/shared'
+import { NOOP, ShapeFlags, isRenderableAttrValue } from '@vue/shared'
 
 export const CSS_VAR_TEXT: unique symbol = Symbol(__DEV__ ? 'CSS_VAR_TEXT' : '')
 /**
@@ -99,8 +99,12 @@ function setVarsOnNode(el: Node, vars: Record<string, string>) {
     const style = (el as HTMLElement).style
     let cssText = ''
     for (const key in vars) {
-      style.setProperty(`--${key}`, vars[key])
-      cssText += `--${key}: ${vars[key]};`
+      const value = vars[key]
+      if (isRenderableAttrValue(value)) {
+        const trimVal = String(value).trim()
+        style.setProperty(`--${key}`, trimVal)
+        cssText += `--${key}: ${trimVal};`
+      }
     }
     ;(style as any)[CSS_VAR_TEXT] = cssText
   }