Setting inline styles with data elements breaks style

[mhkeller]

Here's a REPL demonstration: https://svelte.technology/repl?version=2.11.0&gist=02e988596c0d0888490384ec44d7f99c

Putting a data variable into an inline style tag will try to concatenate your new key:value; with the preceding value. The result is that this text, which should be 0.25 opacity and yellow has no styles applied to it at all.

<h1 style="opacity: 0.25;{color}">Hello {name}!</h1>

<script>
export default {
	data () {
		return {
			color: 'color: #fc0;'
		}
	}
}
</script>

This is the generated JavaScript:

setStyle(h1, "opacity", "0.25" + ctx.color);

[EmilTholin]

Svelte will change to using cssText if the entire style attribute is taken from a variable:

<h1 style="{style}">Hello {name}!</h1>

<script>
export default {
  data() {
    return {
      style: 'opacity: 0.25; color: #fc0'
    }
  }
}
</script>

Just having the color value in a variable works as well:

<h1 style="opacity: 0.25;color:{color}">Hello {name}!</h1>

<script>
export default {
  data() {
    return {
      color: '#fc0'
    }
  }
}
</script>

It might be possible that a combination of both can be implemented by generating appropriate setStyle calls at runtime.

[Conduitry]

#3309 is a duplicate of this issue, but has some more examples that we may or may not want to call bugs.

[loilo]

In case these examples are not considered bugs, it may be a good idea to use static analysis to enforce that only values can be interpolated. It's pretty confusing as it is right now, especically because partial interpolation works just fine for other attributes.

That said, I strongly advocate for considering these behaviors bugs. Inline styles are highly volatile properties that should be met with the according flexibility.

Coming from a Vue background, high-level class/style usage is probably one of the things I struggle with the most, but that again is a topic for another discussion. 🙂