Vue: Vue breaks the styling when using comments in inline style attribute

[savehansson]

Version

2.5.16

Reproduction link

https://jsbin.com/gutivaf/edit?html,css,js,output

Steps to reproduce

• Add a comment inside any style attribute on an element within the Vue app instance. Example:

  ... style="color:blue; /* This is a comment */ background-color:yellow;" ...

What is expected?

The element should have blue text on yellow background.

What is actually happening?

The comment breaks the attribute and all the style properties after the comment are ignored (not coming in effect).

In the reproduction example the text is blue but the background is not yellow.

---

(The JSBin contains a slightly different example. I hope you can live with that.)

[astronomersiva]

This is because of this regex. The second rule starts with the comment of the first rule(["color:blue", " /* This is a valid comment */ background-color: darkseagreen"]) and that is the reason for this issue.

The comment breaks the attribute and all the style properties after the comment are ignored (not coming in effect).

This is not true. It breaks only the second property. If there are any properties after that, they are preserved.

I am working on improving this. Will update it once a PR is ready.

[yyx990803]

Honestly though, I can't think of a good reason to use or support this. If you need comments for your inline styles you should probably use an object / computed property. Adding extra logic to handle this is just incurring perf/code size/maintenance cost for... what?

[savehansson]

Maybe so @yyx990803. In my case I use it during development/scaffolding to temporarily disable properties. It's the same technique that Chrome uses when unchecking a single property in web tools.

In my opinion, Vue should strive to, as far as possible, not change the behavior of templates. But I understand if you don't prioritize this.

[astronomersiva]

The existing regex /;(?![^(]*\))/g has to be changed to /;(?:\s*\/\*.*\*\/)?(?![^(]*\))/g(off the top of my head). I will leave it to @yyx990803 and @posva to take the call on whether they would like a PR for this.

IMO, I would like Vue to allow this.