From 51ea28e8e52f66adbe434ef41435c0fd43cd25ef Mon Sep 17 00:00:00 2001
From: Rudy <xuhaodong66@foxmail.com>
Date: Tue, 8 Nov 2022 11:42:32 +0800
Subject: [PATCH] fix(compiler/runtime-dom): ignore comments in inline styles
 (#6808)

fix #6807
---
 .../__tests__/compileTemplate.spec.ts            | 16 ++++++++++++++++
 packages/shared/src/normalizeProp.ts             | 16 ++++++++++------
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/compileTemplate.spec.ts b/packages/compiler-sfc/__tests__/compileTemplate.spec.ts
index f58b6338de9..b471b67c9ca 100644
--- 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 b4010eb6350..b6f822670fe 100644
--- 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
 }