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

Author: skirtles-code

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() {

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)