fix(compiler/runtime-dom): ignore comments in inline styles (#6808)

fix #6807

diff --git a/packages/compiler-sfc/__tests__/compileTemplate.spec.ts b/packages/compiler-sfc/__tests__/compileTemplate.spec.ts
index f58b6338de9f133d3b0a578e26c2fb1c8ca1b313..b471b67c9ca1bb235804c84b0d56a633829f1a87 100644 (file)
--- a/packages/compiler-sfc/__tests__/compileTemplate.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileTemplate.spec.ts
@@ -22,6 +22,22 @@ test('should work', () => {
   expect(result.code).toMatch(`export function render(`)
 })
 
+// #6807
+test('should work with style comment', () => {
+  const source = `
+  <div style="
+    /* nothing */
+    width: 300px;
+    height: 100px/* nothing */
+    ">{{ render }}</div>
+  `
+
+  const result = compile({ filename: 'example.vue', source })
+  expect(result.errors.length).toBe(0)
+  expect(result.source).toBe(source)
+  expect(result.code).toMatch(`{"width":"300px","height":"100px"}`)
+})
+
 test('preprocess pug', () => {
   const template = parse(
     `

diff --git a/packages/shared/src/normalizeProp.ts b/packages/shared/src/normalizeProp.ts
index b4010eb635089a3ea425d90264b7c90183057ae8..b6f822670fe055933806eb153773d9cf01d227a5 100644 (file)
--- a/packages/shared/src/normalizeProp.ts
+++ b/packages/shared/src/normalizeProp.ts
@@ -28,15 +28,19 @@ export function normalizeStyle(
 
 const listDelimiterRE = /;(?![^(]*\))/g
 const propertyDelimiterRE = /:([^]+)/
+const styleCommentRE = /\/\*.*?\*\//gs
 
 export function parseStringStyle(cssText: string): NormalizedStyle {
   const ret: NormalizedStyle = {}
-  cssText.split(listDelimiterRE).forEach(item => {
-    if (item) {
-      const tmp = item.split(propertyDelimiterRE)
-      tmp.length > 1 && (ret[tmp[0].trim()] = tmp[1].trim())
-    }
-  })
+  cssText
+    .replace(styleCommentRE, '')
+    .split(listDelimiterRE)
+    .forEach(item => {
+      if (item) {
+        const tmp = item.split(propertyDelimiterRE)
+        tmp.length > 1 && (ret[tmp[0].trim()] = tmp[1].trim())
+      }
+    })
   return ret
 }