[Blazor] Intellisense for CSS-style string parameters (such as <QuickGrid Class="..." />

[hakenr]

Is there an existing issue for this?

• I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

In Visual Studio and other IDEs, when I type <div class="...">, I get nice Intellisense for the class attribute.
I'd love to see similar Intellisense support for CSS-style Razor component parameters like <QuickGrid Class="..." />.

Describe the solution you'd like

Something like (+ corresponding support in IDE):

[StringSyntax(StringSyntax.CssClass)]
[Parameter] public string? Class { get; set; }

This approach is already used for XML, Regex, JSON, ...

Additional context

I'm the maintainer of HAVIT Blazor, and almost all our components have CssClass parameters (and often additional ones like ItemCssClass, HeaderCssClass, BodyCssClass, etc.).
It's a real pain point for our users that they don't get the same Intellisense for these parameters as they do for the standard HTML class attribute.
And it's definitely not just us - most component libraries have similar parameters: FluentUI, MudBlazor, you name it.

[javiercn]

I think we could potentially do this with a https://learn.microsoft.com/en-us/dotnet/api/system.diagnostics.codeanalysis.stringsyntaxattribute. Something like [StringSyntax("CSS", "ClassList")] or something like that for people to put in their parameter properties.

Moving to razor since this is a tooling issue. But I want to express my support for it here.

[davidwengier]

The class completion is currently provided by the html language server, so adding CssClass completion is surprisingly difficult. We could probably get something working VS, but VS Code has a completely different server, that would give different results.

I'd love to see us provide this, by rethinking how we call the html language server, perhaps by providing it a different document, or requesting a class list up front etc.

Or alternatively we just provide our own completion and take over the responsibility of the html server, since we're blurring the lines of what html means anyway.

[Peter-Juhasz]

I opened this proposal a few weeks ago as a precursor for tooling support around the same problem:
dotnet/runtime#119519

I hoped it is such a small change it can still make it to .NET 10, but it seems like it was postponed to 11. :( Some activity may help perhaps.

[davidwengier]

Making a string syntax is indeed simple, but it doesn't do anything. You don't need a runtime change to type [StringSyntax("CssClassList")] in your code right now. The complexity comes from having it actually do something useful.

Most of the complexity in this case comes from working out which class names to show in the list. Once that is solved, it would need an embedded language provider created to expose the functionality in a C# file, and then possibly work in this repo to call Roslyn for completion in component attributes in the write way, if we don't already, or us to directly handle embedded languages otherwise.

[hakenr]

The advantage of defining a const like [StringSyntax(StringSyntax.CssClass)] is that library developers can start marking component parameters with this convention in hopes that it'll get some functionality someday. :-D
(And the existence of such a constant will raise plenty of new questions and serve as a reminder for the team to eventually implement something behind it. :-D)

[ptsonev]

I was poking around Rider and found this issue:
https://youtrack.jetbrains.com/issue/WEB-10278/Inject-Reference-for-CSS-class

The workaround from Arnaud Barré works - I just replaced .*ClassName with .*Class
and FluentTab’s LabelClass now triggers the CSS IntelliSense.

I guess with ReSharper it might be possible to achieve the same thing in Visual Studio.

Oddly, for me, Class(with capital letter) triggers the IntelliSense for CSS in Visual Studio.