From 9a816dcec0a3c66a4d12e9c26eeb6d2ea3de964a Mon Sep 17 00:00:00 2001 From: skirtle <65301168+skirtles-code@users.noreply.github.com> Date: Wed, 9 Nov 2022 13:16:34 +0000 Subject: [PATCH] dx(runtime-dom): warn when a style value ends in a semicolon (#7062) --- .../runtime-dom/__tests__/patchStyle.spec.ts | 19 +++++++++++++++++++ packages/runtime-dom/src/modules/style.ts | 10 +++++++++- 2 files changed, 28 insertions(+), 1 deletion(-) diff --git a/packages/runtime-dom/__tests__/patchStyle.spec.ts b/packages/runtime-dom/__tests__/patchStyle.spec.ts index 409d6936eaf..ba5d795504f 100644 --- 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 f4924ea2ec6..203f5577969 100644 --- 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 | 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)