dx(runtime-dom): warn when a style value ends in a semicolon (#7062)

diff --git a/packages/runtime-dom/__tests__/patchStyle.spec.ts b/packages/runtime-dom/__tests__/patchStyle.spec.ts
index 409d6936eaf8fd5dc8481270e91b466baf581616..ba5d795504f00d8e8595732bf0f80f19311f59f4 100644 (file)
--- a/packages/runtime-dom/__tests__/patchStyle.spec.ts
+++ b/packages/runtime-dom/__tests__/patchStyle.spec.ts
@@ -87,6 +87,25 @@ describe(`runtime-dom: style patching`, () => {
     expect(el.style.cssText).toBe('')
   })
 
+  it('should warn for trailing semicolons', () => {
+    const el = document.createElement('div')
+    patchProp(el, 'style', null, { color: 'red;' })
+    expect(
+      `Unexpected semicolon at the end of 'color' style value: 'red;'`
+    ).toHaveBeenWarned()
+
+    patchProp(el, 'style', null, { '--custom': '100; ' })
+    expect(
+      `Unexpected semicolon at the end of '--custom' style value: '100; '`
+    ).toHaveBeenWarned()
+  })
+
+  it('should not warn for escaped trailing semicolons', () => {
+    const el = document.createElement('div')
+    patchProp(el, 'style', null, { '--custom': '100\\;' })
+    expect(el.style.getPropertyValue('--custom')).toBe('100\\;')
+  })
+
   // JSDOM doesn't support custom properties on style object so we have to
   // mock it here.
   function mockElementWithStyle() {

diff --git a/packages/runtime-dom/src/modules/style.ts b/packages/runtime-dom/src/modules/style.ts
index f4924ea2ec6fb559ee8bb140377229e3b70f3ba5..203f55779690b2b01da9598e54a56c797bde39db 100644 (file)
--- a/packages/runtime-dom/src/modules/style.ts
+++ b/packages/runtime-dom/src/modules/style.ts
@@ -1,5 +1,5 @@
 import { isString, hyphenate, capitalize, isArray } from '@vue/shared'
-import { camelize } from '@vue/runtime-core'
+import { camelize, warn } from '@vue/runtime-core'
 
 type Style = string | Record<string, string | string[]> | null
 
@@ -35,6 +35,7 @@ export function patchStyle(el: Element, prev: Style, next: Style) {
   }
 }
 
+const semicolonRE = /[^\\];\s*$/
 const importantRE = /\s*!important$/
 
 function setStyle(
@@ -46,6 +47,13 @@ function setStyle(
     val.forEach(v => setStyle(style, name, v))
   } else {
     if (val == null) val = ''
+    if (__DEV__) {
+      if (semicolonRE.test(val)) {
+        warn(
+          `Unexpected semicolon at the end of '${name}' style value: '${val}'`
+        )
+      }
+    }
     if (name.startsWith('--')) {
       // custom property definition
       style.setProperty(name, val)