fix(css-vars): handle empty string and other data types

Author: Justineo

packages/runtime-core/src/hydration.ts

@@ -28,6 +28,7 @@ import {
   isReservedProp,
   isString,
   normalizeClass,
+  normalizeCssVarValue,
   normalizeStyle,
   stringifyStyle,
 } from '@vue/shared'
@@ -938,7 +939,7 @@ function resolveCssVars(
   ) {
     const cssVars = instance.getCssVars()
     for (const key in cssVars) {
-      const value = String(cssVars[key] ?? 'initial')
+      const value = normalizeCssVarValue(cssVars[key])
       expectedMap.set(`--${getEscapedCssVarName(key, false)}`, value)
     }
   }

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

@@ -467,9 +467,13 @@ describe('useCssVars', () => {
   })
 
   test('should set vars as `initial` for nullish values', async () => {
+    // `getPropertyValue` cannot reflect the real value for white spaces and JSDOM also
+    // doesn't 100% reflect the real behavior of browsers, so we only keep the test for
+    // `initial` value here.
+    // The value normalization is tested in packages/shared/__tests__/cssVars.spec.ts.
     const state = reactive<Record<string, unknown>>({
-      color: undefined,
-      size: null,
+      foo: undefined,
+      bar: null,
     })
     const root = document.createElement('div')
     const App = {
@@ -481,7 +485,7 @@ describe('useCssVars', () => {
     render(h(App), root)
     await nextTick()
     const style = (root.children[0] as HTMLElement).style
-    expect(style.getPropertyValue(`--color`)).toBe('initial')
-    expect(style.getPropertyValue(`--size`)).toBe('initial')
+    expect(style.getPropertyValue('--foo')).toBe('initial')
+    expect(style.getPropertyValue('--bar')).toBe('initial')
   })
 })

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, normalizeCssVarValue } from '@vue/shared'
 
 export const CSS_VAR_TEXT: unique symbol = Symbol(__DEV__ ? 'CSS_VAR_TEXT' : '')
 /**
@@ -101,7 +101,7 @@ function setVarsOnNode(el: Node, vars: Record<string, unknown>) {
     const style = (el as HTMLElement).style
     let cssText = ''
     for (const key in vars) {
-      const value = String(vars[key] ?? 'initial')
+      const value = normalizeCssVarValue(vars[key])
       style.setProperty(`--${key}`, value)
       cssText += `--${key}: ${value};`
     }

packages/server-renderer/__tests__/ssrRenderAttrs.spec.ts

@@ -208,10 +208,14 @@ describe('ssr: renderStyle', () => {
     expect(
       ssrRenderStyle({
         fontSize: null,
-        ':--color': undefined,
-        ':--size': null,
+        ':--v1': undefined,
+        ':--v2': null,
+        ':--v3': '',
+        ':--v4': '  ',
+        ':--v5': 'foo',
+        ':--v6': 0,
         '--foo': 1,
       }),
-    ).toBe(`--color:initial;--size:initial;--foo:1;`)
+    ).toBe(`--v1:initial;--v2:initial;--v3: ;--v4:  ;--v5:foo;--v6:0;--foo:1;`)
   })
 })

packages/server-renderer/src/helpers/ssrRenderAttrs.ts

@@ -14,6 +14,7 @@ import {
   isString,
   makeMap,
   normalizeClass,
+  normalizeCssVarValue,
   normalizeStyle,
   propsToAttrMap,
 } from '@vue/shared'
@@ -105,7 +106,7 @@ function ssrResetCssVars(raw: unknown) {
     for (const key in raw) {
       // `:` prefixed keys are coming from `ssrCssVars`
       if (key.startsWith(':--')) {
-        res[key.slice(1)] = raw[key] ?? 'initial'
+        res[key.slice(1)] = normalizeCssVarValue(raw[key])
       } else {
         res[key] = raw[key]
       }

packages/shared/__tests__/cssVars.spec.ts

@@ -0,0 +1,27 @@
+import { normalizeCssVarValue } from '../src'
+
+describe('utils/cssVars', () => {
+  test('should normalize css binding values correctly', () => {
+    expect(normalizeCssVarValue(null)).toBe('initial')
+    expect(normalizeCssVarValue(undefined)).toBe('initial')
+    expect(normalizeCssVarValue('')).toBe(' ')
+    expect(normalizeCssVarValue('  ')).toBe('  ')
+    expect(normalizeCssVarValue('foo')).toBe('foo')
+    expect(normalizeCssVarValue(0)).toBe('0')
+  })
+
+  test('should warn on invalid css binding values', () => {
+    const warning =
+      '[Vue warn] Invalid value used for CSS binding. Expected a string or a finite number but received:'
+    expect(normalizeCssVarValue(NaN)).toBe('NaN')
+    expect(warning).toHaveBeenWarnedTimes(1)
+    expect(normalizeCssVarValue(Infinity)).toBe('Infinity')
+    expect(warning).toHaveBeenWarnedTimes(2)
+    expect(normalizeCssVarValue(-Infinity)).toBe('-Infinity')
+    expect(warning).toHaveBeenWarnedTimes(3)
+    expect(normalizeCssVarValue({})).toBe('[object Object]')
+    expect(warning).toHaveBeenWarnedTimes(4)
+    expect(normalizeCssVarValue([])).toBe('')
+    expect(warning).toHaveBeenWarnedTimes(5)
+  })
+})

packages/shared/src/cssVars.ts

@@ -0,0 +1,24 @@
+/**
+ * Normalize CSS var value created by `v-bind` in `<style>` block
+ * See https://github.com/vuejs/core/pull/12461#issuecomment-2495804664
+ */
+export function normalizeCssVarValue(value: unknown): string {
+  if (value == null) {
+    return 'initial'
+  }
+
+  if (typeof value === 'string') {
+    return value === '' ? ' ' : value
+  }
+
+  if (typeof value !== 'number' || !Number.isFinite(value)) {
+    if (__DEV__) {
+      console.warn(
+        '[Vue warn] Invalid value used for CSS binding. Expected a string or a finite number but received:',
+        value,
+      )
+    }
+  }
+
+  return String(value)
+}

packages/shared/src/index.ts

@@ -12,3 +12,4 @@ export * from './escapeHtml'
 export * from './looseEqual'
 export * from './toDisplayString'
 export * from './typeUtils'
+export * from './cssVars'