chore: avoid affecting the client's existing rendering behavior

Currently client-side rendering supports null and undefined, which prevents styles from being inherited from the parent node.
yangxiuxiu1115 · Nov 22, 2024 · e7ce297 · e7ce297
1 parent 86de253
commit e7ce297
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 35 deletions.
diff --git a/packages/runtime-core/src/hydration.ts b/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 && isRenderableAttrValue(value)) {
+    if (key) {
       styleMap.set(key, value)
     }
   }

diff --git a/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts b/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts
@@ -465,31 +465,4 @@ 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`)
-  })
 })
diff --git a/packages/runtime-dom/src/helpers/useCssVars.ts b/packages/runtime-dom/src/helpers/useCssVars.ts
@@ -10,7 +10,7 @@ import {
   warn,
   watch,
 } from '@vue/runtime-core'
-import { NOOP, ShapeFlags, isRenderableAttrValue } from '@vue/shared'
+import { NOOP, ShapeFlags } from '@vue/shared'
 
 export const CSS_VAR_TEXT: unique symbol = Symbol(__DEV__ ? 'CSS_VAR_TEXT' : '')
 /**
@@ -99,12 +99,8 @@ function setVarsOnNode(el: Node, vars: Record<string, string>) {
     const style = (el as HTMLElement).style
     let cssText = ''
     for (const key in vars) {
-      const value = vars[key]
-      if (isRenderableAttrValue(value)) {
-        const trimVal = String(value).trim()
-        style.setProperty(`--${key}`, trimVal)
-        cssText += `--${key}: ${trimVal};`
-      }
+      style.setProperty(`--${key}`, vars[key])
+      cssText += `--${key}: ${vars[key]};`
     }
     ;(style as any)[CSS_VAR_TEXT] = cssText
   }