Possibly unintended consequence of using toggle syntax for interpolation

[ghost]

The syntax we're using is style:propery-name={propertyValue}. It is similar to what svelte provides for class toggle class:class-name={boolValue}. The value in class toggle syntax must be a boolean, whereas for svelte-style-directive it may be something other than a boolean.

The preprocessor de-sugars the the syntax using svelte's attribute value interpolation. Which gets expensive specifically when we interpolate style attribute (among others, like innerHtml). As it requires the browser to perform many steps from parsing the CSS to re-rendering the element, every time we interpolate the inline CSS. On contrary, the class toggle syntax svelte provides, uses cheaper Element.classList.toggle (or in newer versions of svelte, add and remove, thanks to IE11) method calls.

I concur that the preprocessor has no runtime performance impact, as stated, it just provides a syntactic sugar. But users might be unaware of how the underlying implementation, i.e. style attribute value interpolation, may have performance impact (*when used incorrectly). It'd be great if we can document this. Or you can correct me if I am wrong somewhere.