Extract Style

[lachlanwgordon]

This feature may take some planning but here's a start. If you have inline styles, you should be able to extract it to CSS.

By default the main css file in a blazor project is called either app.css or site.css, depending on which template you use, either way it will be in wwwroot/css. Users could also configure their css files in any number of ways, so by default I think you should look for whichever of these is present.

e.g. I have an a tag with some inline style and already has a class on it

<h1 class="heading" style="color: #FF00FF">Hello, world!</h1>

If the user opens code actions with the cursor on the style. It should suggest extract style.
There should be three(maybe more) kinds of extract style:

Extract to Tag style

This would take everything in the quotes, and add it to the h1{} style. and remove the style= from the tag.

Extract to new class

Puts everything from style in a new class in a .new-class-name{}. This would prompt for class name

Extract to existing class

In this case it would put it in the heading class. There might be multiple classes so you would need to handle this.

The number of CSS properties is huge so I don't think having a list of all attributes like you do with XAML would be practical.

[ravero]

That would be a very powerful feature!

It's interesting to note that Xamarin.Forms had support for CSS styles for long, even though it's not being widely adopted (at least on my observations). It's a nice feature, maybe its lacking better tooling and we can inspire from Lach suggestion to enhance it.

[matthewrdev]

Yes, it's a fantastic feature suggestion :)

Based on Lachlans spec, this would apply to web projects and would help significantly expand our potential customer base. 😄

[matthewrdev]

Going forward, MFractor will be focusing exclusively on the MAUI feature set. Going to close this and all web related features.