css isolation compiler warnings for incorrect css syntax

[AMUCOMO]

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.

I'm working on a server-side Blazor project. I use many components (.razor files) with their corresponding css isoltation (.razor.css) files. I noticed a bug where the first css-class ".my-class {color: blue;}" of one specific component's isolated css file (B.razor.css) was not displayed. I noticed renaming the component and its .css file did change/move/disable the bug. Cause was, that A.razor.css had one too many "}" at the end of the file. Thus, after the compiler combined all isolated css files, ofc the following class after the bad "}" did not work correctly (meaning the browser did not show the color, just as if .my-class was not existing). It took me hours to find, because the cause (the "}" ) was in A.razor.css but the effect was seen in B.razor.css, so naturally I looked at B.razor.css for hours. If I renamed B.razor.css (and its comp) to D.razor.css (and its comp) then the first class of C.razor.css was not working.

These are example names, actually my class was named differently, and starting with letter S, but I noticed it worked if I renamed it to anything not starting with S. That was very confusing.

I hope you understand the issue.
If it's not clear enough, please add a comment, then I will try to provide more information and data.

Describe the solution you'd like

Please add a compiler warning, so that VS will notify me if the syntax of my .css files is incorrect. So a faulty css file would be found much quicker. Especially, since the framework will combine all of the .razor.css files into once single css file, it should actually check if each .razor.css file on its own is syntactically correct, so that no one file can influence/corrupt the behavior of another.

Additional context

No response

[javiercn]

@AMUCOMO thanks for contacting us.

Unfortunately, our CSS compiler support is very limited, and we don't have the resources needed to invest in a full-fledged CSS compiler which is what would be needed to correctly do this. Our bundling support is very simplistic, and it essentially imports bundle files from referencing projects and concatenates together all the scoped CSS files for the current project.

If you want a more sophisticated experience that can point out syntax errors, you'll need to use a third-party CSS tool to manually bundle the scoped CSS files instead.

[AMUCOMO]

Ok, Anyway thanks for answering this so quickly! I've just realized, that in my VS 2022 intellicode/sense is actually highlighting bad css with green squiggly lines (like the wrong bracket"}" ) and there's even a tiny yellow exclamation mark. So basically what I want is already there... I also realized it is even displayed in the Warnings section (just not the Error section) of the Error List window. It is has no "Code". So I was wondering if I could promote that to Error ? But then again this would conflict with another issue (I should probably open an issue about it): specifically: the css pseudo-class ::deep which is specific to blazor is not recognized by intellicode and also gives a yellow Warning, which is kinda weird.

[javiercn]

@AMUCOMO You can use <WarningsAsErrors>true</WarningsAsErrors> in your csproj should achieve that. There is also a way to do it for individual warnings, but I can't find the docs. Since the warning is coming from the IDE, I'm not sure it'll work, but it is worth a try.

This issue has been resolved and has not had any activity for 1 day. It will be closed for housekeeping purposes.

See our Issue Management Policies for more information.