Inline styles with inner quotes have parsing issues

[trongthanh]

Svelte 3.2.1

Here's the REPL link to demonstrate.

Basically, I need to use inline styles for background-image since the image URL is dynamic. And, because of habit, I add the quotes surround the image URL in url() function like so:

<div style="background-image: url('{bgImage}')">This work!</div>

But as soon as I added the trailing semi (so that I can append another style rule), the inline style broke and nothing render for the style attributes.

<div style="background-image: url('{bgImage}');">This does NOT work!</div>

My current workaround is to omit the inner quotes (it is completely optional in CSS url() but may be content and other properties might need them).

[EmilTholin]

Hi @trongthanh! Thank you so much for this great research and all the examples!

The second example fails because the ; becomes a part of the argument passed to set_style in the generated code, which is not allowed.

set_style(div, "background-image", "url('" + bgImage + "');");

The third example fails because the rest of the style string gets passed to set_style for the background-image.

set_style(div, "background-image", "url('" + bgImage + "'); color:" + color);

[bwbroersma]

Indeed something is going wrong in StyleAttribute.ts.
; should work in my opinion, but is not properly split at the moment.

[bwbroersma]

Also !important is going wrong.

[EmilTholin]

!important is a known and likely a slightly different issue.