Add support for extracting styles to tss

[ewanharris]

Implements a new refactoring action for views that allows extracting the properties from a tag and inserting them into the related TSS document. This can be triggered via the usual refactor shortcut, menu item, or lightbulb.

Some known todos (hence draft status) are:

• Support nested properties (font only?)
• Multiline properties
• Better handling of class merging (currently only merging classes when performing whole line extraction)
• Tests!

A demonstration is below, it first demonstrates extracting a select group of properties and then extract properties from the current line the cursor is on.

Screen.Recording.2023-10-17.at.22.11.17.mov

[hansemannn]

This is awesome! Regarding nested properties: All that we know are font and center (x and y). @m1ga Do you maybe have more? I wonder if they are somehow registered in Alloy already somewhere.

[m1ga]

Nice feature 👍

@hansemannn sorry, don't know. Didn't even know that the font part was merged 😄 Not using that many inline styles at all. It looks like it is this PR tidev/alloy#765 and I would say that it supports all name.property=""

[hansemannn]

Yep, handling them in general (detect a . inside an attribute) might be the best way to extract those. But handling those two manually for a PoC would also be more than sufficient.

[hansemannn]

Some more small improvements (can definitely be moved to a later stage as it's super low prio):

• Use existing tab vs spacing settings of the file
• Use existing single- vs double-quote settings of the file
• Number properties, e.g. top="100" are added as strings, better would be top: 100
• The following properties are not caught, yet:
  • backgroundColor="myColor"
  • contentWidth="100%"

[ewanharris]

@hansemannn I've ticked off everything in that list other than the spaces/tabs one, that'll need some digging into the vscode docs to see if I can get that information or if there's a way to have them handle it when applying the edits.

[hansemannn]

The code looks good, the changes work very well! Just to be sure: Is the version bumped automatically, or should it be adjusted in the package.json? EDIT: Okay, it seems like the CI does that, cool!