dotnet / dotnet/roslyn

Intellisense inside of a CSS class in razor called BlazorStyled.

Open
#85,279 0 comments 0 reactions 0 assignees View on GitHub
Area-Language Design Area-Razor Area-Razor-Compiler Feature Request untriaged
Dominant language
C#
Stars
20.7k
Forks
4.3k
PR merge metrics
PR metrics pending

Description

I know this feature already exists in Visual Studio to have Intellisense inside of a CSS class to suggest valid CSS class names. If you type an L, you get an Intellisense box to pop open and left is probably the most common L word.

Image

With BlazorStyled, it's CSS that gets injected into a component's class name property:


text-align: left;
height: @ControlHeightStyle;
min-height: @ControlHeightStyle;
max-height: @ControlHeightStyle;
width: @ControlWidthStyle;
min-width: @ControlWidthStyle;
max-width: @ControlHeightStyle;
position: @Position;
top: @TopStyle;
left: @LeftStyle;
display: @Display;
justify-content: left;
gap: 0px;
z-index: @ZIndex;
visibility: @Visibility;

## Summary

This feature request would be to allow the same CSS Intellisense that works on a CSS page,
to work inside of a Blazor page or components razor markup while between (here) tags. As it is now, I frequently have to go to a CSS editor to find the class or attribute name if I can't remember it.

As an alternate, if you felt it was not in scope or something you want to implement, any guidance on
what type of Editor Extension and what it would take to implement this feature to call the same
CSS Intellisense help.

## Background and Motivation

As described above, the problem it solves is creating Intellisense suggestions for known CSS attributes
because it's almost impossible to know them all. It would save having to create a temporary CSS class just to get Intellisense or auto complete help.

## Proposed Feature

If you are between a tag, pop open the CSS Intellisense menu


... As you type, the Intellisense box would suggest matching CSS Attributes

Image

## Alternative Designs

As mentioned above, if you pass on creating this feature, any guidance on what would be the best way to approach this? Is this a MEF component, or is there a different mechanism you'd recommend for implementing completions on a razor page?

Were there other options you considered?
N/A

How does this compare to features in other editors?

This would be the exact same feature as is used in style sheet editing, so it does exist in Visual Studio if not too coupled to the style sheet page type.

Thanks, this would save a lot of time and Dynamic CSS is the best part of Blazor component development.

Contributor guide

Open the contributing guide

Research direction

Start by investigating the existing CSS IntelliSense integration in Visual Studio and the MEF/editor-extension approach mentioned in the issue. Trace how Razor or Blazor component markup is recognized between tags, then define completion behavior for CSS attributes there. Done means matching CSS IntelliSense suggestions appear while editing the requested markup.

Written by the indexing model from the issue text.

Assessment

Tech stack
csharp, css
Domain
frontend, tooling
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.