Support the `style:property` directive

[TheOnlyTails]

Svelte was recently updated with a new directive: style:property={value}, which lets you set a CSS property of an element.

Some things which could be considered:

• auto completion for property names
• quick documentation on properties
• possibly type validation in combination with TypeScript?

https://svelte.dev/docs#template-syntax-element-directives-style-property

Update: style: has now been officially released in Svelte 3.46.

[TheOnlyTails]

Another idea - we should have highlighting and validation on the actual values, based on the property.

[tomblachut]

@TheOnlyTails what's the difference between your "validation on the actual values, based on the property" & "possibly type validation in combination with TypeScript?"? Isn't it the same thing said differently?

[TheOnlyTails]

it is lol, my bad.

[tomblachut]

Ok there are "levels" that can be understood with validation here

First of all I hope to be able to connect the static part in quotes with property name and provide the same validations as in pure CSS, for example: when using font you need to pass font-family, but when using font-size, just pixels is fine. . style:font="32px" could be marked as error

Secondly, when you use Svelte expressions to dynamically pass e.g. number into style:transform="translate({variable}px, 0)" this will result in the same problem as #80

Thirdly, e.g. with ternaries you can pass strings of CSS (style:position={absolute ? "absol-oops" : null}), and contents of those strings could be in theory highlighted and validated as CSS, but this must be carefully considered, and e.g. disabled when doing dynamic stuff like string concatenation .

Anyway I have lots of work in various plugins right now, so all of these are considered nice to have.

[TheOnlyTails]

I think that even Level 1 would be good. one thing i could imagine is using variable types to verify stuff. for example, style:transform="translate({variable}px, 0)" would only give out an error if variable is not a number. this won't really work for color strings though (maybe? i know that some support for them exists).

I think ternaries are pretty good to have.

[sdarnell]

For reference, the style attributes currently give the error "Attribute style:xyz is not allowed here". The very first level would be to allow style:anything attributes to avoids the error. Then it would be nice to validate the style name style:valid-style. IMHO validating the contents of the style expression potentially nice but extremely complex in general, and way down the priority list.

Note sure how much is shared between plugins, but obviously the Angular plugin does great validation of the Angular equivalent style attributes (style.font="bla" or [style.font]="expr").

[tomblachut]

Migrated to WEB-61793 Svelte: allow style directive attributes & WEB-58748 Svelte: style directive is not supported