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

fix vuejs#6807
zhangzhonghe · Apr 12, 2023 · 0d2f223 · 0d2f223
1 parent 8e701f1
commit 0d2f223
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 6 deletions.
diff --git 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
@@ -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
 }