Suppress Blazor css ::deep warning

Question

In a css file of an asp.net Blazor app when I use ::deep VS emits a warning "Validation (CSS 4.0): "::deep" is not a valid pseudo-element." That might be true for regular CSS, but not in the context of a Blazor app.

Is there a way to suppress it? Right-click -> Suppress -> In File / In Source do nothing.

Answer 1

You can add deep to the vendor specific extensions.
I've added it to the Microsoft extension and it works.

Open with an editor (in Administrator mode) the file:
C:\Program Files (x86)\Microsoft Visual Studio\2019\<your version>\Common7\IDE\Extensions\Microsoft\Web Tools\Languages\Schemas\CSS\1033\css-vendor-ms.xml

Go to line ~69 and add the following code:

    <CssPseudo name="::deep"
             _locID="ms-browse-pseudo-element"
             _locAttrData="description"
             version="3.0"
             browsers="IE11"
             description="Blazor child component support."
             standard-reference="https://docs.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-5.0"/>

Restart Visual Studio.

Now I can see the source code as:

Answer 2

For Resharper users, editing the css-vendor-ms.xml is needed but does not completely solve the issue. Resharper will continue to highlight ::deep elements as errors in your solution. This is currently a known bug , which will hopefully be resolved in a future build.

As a work around, go to Resharper Options --> Code Inspection --> Inspection Severity --> CSS --> Potential Code Quality Issues --> Unknown CSS symbol and drop the severity to Warning (or lower).

Answer 3

This has now been fixed as of the latest preview version of Visual Studio 2022:

https://developercommunity.visualstudio.com/t/Support-::deep-in-razorcss-CSS-isolati/1623976

I just downloaded 17.3 and my project is now down to zero warnings again! Look forward to it being released properly.