Razor does not strip escaped @ in CSS blocks from virtual documents

[jimmylewis]

Describe the bug:
When Razor creates virtual documents for HTML (and later HTML for CSS), the Razor escape sequences are not being replaced by placeholders. This leads to invalid syntax in the contained language buffers that are not aware of the Razor context.

Version used:
17.2.0 Preview 2.0 [32207.465.main]

To reproduce:

Open this file content in VS with the Razor LSP:

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<style>
    @@font-face
    {
        src: url();
    }
</style>

<div class="text-center" style="">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

Expected behavior:
No errors in the <style> block

Actual behavior:
Severity Code Description Project File Line Column Suppression State
Warning (active) CSS002 Unrecognized '@' block type. c:\Users\jamlew\source\repos\WebApplication1\WebApplication1\Pages\Index.cshtml 8 6
Warning (active) CSS102 "src" is not a known CSS property name. c:\Users\jamlew\source\repos\WebApplication1\WebApplication1\Pages\Index.cshtml 10 9

Additional context:

Here's the didChange sent to the HTML virtual document upon opening. Note the @@ is still preserved in the style block contents, which breaks CSS parsing.

 {
  "textDocument": {
    "version": 2,
    "uri": "file:///C:/Users/jamlew/source/repos/WebApplication1/WebApplication1/Pages/Index.cshtml__virtual.html"
  },
  "contentChanges": [
    {
      "range": {
        "start": {
          "line": 0,
          "character": 0
        },
        "end": {
          "line": 0,
          "character": 0
        }
      },
      "rangeLength": 0,
      "text": "~~~~~\r\n~~~~~~ ~~~~~~~~~~\r\n~~\r\n    ~~~~~~~~~~~~~~~~~ ~ ~~~~~ ~~~~~~\r\n~\r\n\r\n<style>\r\n    @@font-face\r\n    {\r\n        src: url();\r\n    }\r\n</style>\r\n\r\n<div class=\"text-center\" style=\"\">\r\n    <h1 class=\"display-4\">Welcome</h1>\r\n    <p>Learn about <a href=\"https://docs.microsoft.com/aspnet/core\">building Web apps with ASP.NET Core</a>.</p>\r\n    <p></p>\r\n    <p></p>\r\n</div>\r\n\r\n\r\n<div>\r\n    ~~~~~~~~ ~ ~ ~~ ~ ~ ~~~ ~~~~\r\n    ~\r\n        <div></div>\r\n    ~\r\n</div>"
    }
  ]
}

Also worth noting that replacing @ with the ~ character as is done elsewhere will also break CSS.

[jimmylewis]

Note: found on https://stackoverflow.com/questions/71110097/how-do-i-set-up-visual-studio-2022-to-highlight-javascript-in-razor-view-and-als

[NTaylorMullen]

More customer reports:

• https://developercommunity.visualstudio.com/t/VS-2022-Razor-Editor---media-shows-a-w/1674531

[rclabo]

@NTaylorMullen Thanks for adding this to the 17.2 Candidates. It'd be great if this could get fixed sooner instead of later. Getting warnings in VS for escaping and @ in razor causes some of us web developers to get flooded with warnings. For example here is a pretty pedestrian piece of code code will cause a warning:

<style>
        @@media (min-width:700px) {
            #someDivId{ display: none }
        }
 </style>

[BowserKingKoopa]

One of many regressions in Visual Studio 2022 Razor. I've had many similar problems with things such as syntax highlighting that worked perfectly well in Visual Studio 2019 being broken or glitchy in Visual Studio 2022.

[NTaylorMullen]

Hey folks, we haven't seen a lot of reports of this issue so we've prioritized other more impactful bug fixes for the 17.2 release and pushed this to the next major release. I'd encourage everyone here to upvote the original issue to help us better understand how many folks are running into this.

[QuickScoP3s]

I'm having this issue as well, it it enough to report here? Or should I create a new feedback item?

The annoying thing is with PowerTools, I'm seeing the warning underline in the Solution Explorer as well:

[NTaylorMullen]

@QuickScoP3s This issue is sufficient. At this time we're working towards better understanding the impact this has on folks (tracking via upvotes on this issue)

[BowserKingKoopa]

Shouldn't this be expected to work at least as well as it did in Visual Studio 2019? Visual Studio 2019 had no such issues.

[NTaylorMullen]

Shouldn't this be expected to work at least as well as it did in Visual Studio 2019? Visual Studio 2019 had no such issues.

Absolutely should! I probably wrote down my last comment a little too tersely. We absolutely plan to fix this; however, how "soon" is being determined by how many folks are impacted. There are also other issues we have that are a divergence from VS2019 (like diagnostic squiggles not showing up in some situations) that wee are working at fixing first in order to address the most impactful regressions sooner than later.

[BowserKingKoopa]

Thanks. The Razor syntax highlighting in VS2022 has been a big mess for me. In addition to this problem it regularly seems to get confused and stop highlighting stuff. Sometimes closing and re-opening the page gets it going again, other times certain section just never ever get highlighted. Auto complete is also vastly inferior to VS2019. It seems to get confused about attribute quote marks and inline css. Sometimes it gets confused about css fields where both numbers and words are allowed. The whole thing has been a big struggle. It's brutal. VS2019 was bulletproof at all of this stuff. Maybe roll back all the razor code? :-)

[NTaylorMullen]

@BowserKingKoopa many bits if what you said have actually been resolved in the 17.2-Preview releases (not this CSS one though unfortunately). Would you be willing to try out your experiences there to see if your experience vastly improves?

[rclabo]

@NTaylorMullen I'm scratching my head as to idea that it's not obvious this is a fairly big deal. Consider the following code which generates a warning:

 @@media (min-width:800px) { 
     .pgMain { border-right: solid 1px #e0e0de; }
 }

Any use of media tags on the page (rather then in an external css file) are gonna generate a warning for the page.

In the screenshot below I have two such files open and you can see the two warnings it generates:

While it works fine to put global media css block in an external style sheet it doesn't work well to place page specific media tags in an external stylesheet, especially for a large website. In my case if I do a global search in VS for @@media just for *.cshtml files I see that this issue affects 179 files in my solution:

From my perspective, this regression of support for escaping an @ char is pretty annoying. How could it not be?

[NTaylorMullen]

From my perspective, this regression of support for escaping an @ char is pretty annoying. How could it not be?

Oh it's absolutely huge, no doubt! Honestly I'm a bit surprised myself that not more folks have run into it. Based on the user engagement here and in other VS issue reporting channels the data is showing that not a lot of folks have run into this compared to other issues. That could be for a variety of reasons such as not having inline css, utilizing file-scoped CSS or simply just not needing @media.

Definitely don't want to downplay the severity of the bug. It's absolutely a problem that will be fixed. We're just fixing other just as important issues that have a higher end-user hit count first is all.

[NTaylorMullen]

Oh and the engagement from you all here absolutely helps us gauge impact on folks as well so I definitely appreciate the back and forth. ❤️

[PetterNo]

I guess this is annoying for most people writing more than a few lines of Razor and that amount of user response are low simply because most people manage to ignore the warning. If you want these types of code verification warnings to be helpful, this should be fixed ASAP, IMO.

[NTaylorMullen]

Investigated and this is due to the Razor compilers GetHtmlDocument not rendering the single @ when a @@ is mentioned for the HTML variant of the output. Looks like the RazorHtmlWriterdoesn't handle the @@ case properly.

Here's the generated HTML, note the @@ in front of font-face instead of "whitespace" @:

[oliverholliday]

Also experiencing this - the only warnings for our entire project are false-positives from inline CSS parsing. The problem seems to exist both ways round - in one direction as in the OP where you want to escape to get a literal @, but also in the other case where you're referencing a variable inline:

<style type="text/css">
:root {
    --header-height: @(HeaderHeight)px;
}
</style>
@code {
    private int HeaderHeight { get; set; } = 84;
}

CSS039 Unexpected character sequence in property value.

[Heshyo]

I'm also using media queries in my .razor files, and thus get lots of warnings, which makes it harder to view "real" warnings.

Using @* *@ to write comments for the styles gives hundreds of CSS031 Missing a selector before a combinator in the style rule..

[jimmylewis]

@Heshyo can you give a small snippet as an example? There might be a few different things causing this, so having a definite example to work from will help narrow down the exact issue.

[Heshyo]

@jimmylewis

In my .razor page, after the html part, I have

<style>
  @* Some comments... *@       <= This gives me 19 CSS031 warnings
  .some-class { 
    font-size: 10px;
  }

  @* Some more comments... *@  <= 23 CSS031
  @@media print {              <= 1 CSS041
    .some-class {              <= 1 CSS023, 1 CSS011, 1 CSS033
      font-size: 20px;
    }
  }                            <= 1 CSS001
</style>

This is how it looks:

I'm using Microsoft Visual Studio Community 2022 (64-bit) Version 17.3.6

[NinovanderMark]

I'm running into the same issue trying to declare media queries. The warning isn't breaking anything functional for me, but it would be better to have it removed.

[davidwengier]

Did a quick spike on this to see if we could do a targetted fix for @@ at least, to allow CSS to work, and its easy enough to fix diagnostics but sadly it immediately breaks formatting.

[MJonesMindSeeds]

My @@media queries are generating warnings as per above which is annoying

[AmerBakeer]

Hello,
Still no fix for this ??

[BowserKingKoopa]

I'm frustrated with this as well. This is a big contributor to the overall 'junky' and glitchy feeling of the Razor editor in Visual Studio 2022. You end up having to ignore a lot of its 'warnings' and syntax highlighting errors and other weirdness. This is in contrast to the Visual Studio 2019 Razor editor which was bullet proof and near perfect. It's not like these constructs causing these problems are new. They are ancient html things. What happened to the Razor editor in VS 2022 and why wasn't it marked as a massive regression and rolled back with prejudice? I long for VS 2019 Razor.

[readingdancer]

Just adding a comment to say I also find this issue annoying, I like to have a clean "error list" and things like this are annoying when they are not really an error.

[ry8806]

One more comment to add, as I too receive the warnings for the Unrecognized '@' block type when using the @@media CSS query in a Razor view

[redcrayonn]

Still a very annoying issue.

[sethvijay]

still, I am facing the same issue, is there any fix of css002 unrecognized '@' block type in vs2022 community edition.

[ChristopherBass]

It's obvious when it happens what's going on, and it doesn't stop compilation, so it wasn't something I thought to report... But if you're really triaging these based on number of 'This warning message happens to me and is annoying' comments, then a year later, here's my 'This warning message happens to me and is annoying'. - VS 2022 Version 17.6.4

[Heshyo]

@ChristopherBass The main problem is that all those warnings hide "real" warnings, that may correspond to real issues in your code. I used to treat warnings as errors, but that's not possible with that issue.

[LapinskasL]

Is there a way to at least suppress the warning using the #pragma directive?

[ZippoLag]

Still happening in Oct 2023, in case anyone thinks it fixed itself (?)

[twenzel]

Any ETA for a fix or any hints for a workaround?

[Robert-LC]

Still happening April 2024

[BowserKingKoopa]

It's been with me so long I can barely remember that Visual Studio 2019 worked fine.

[haondt]

This warning message happens to me and is annoying - VS 2022 17.11.0

[rpowell6]

Using Microsoft Visual Studio Community 2022 (64-bit) - Version 17.11.6. Adding my two cents. This issue is VERY annoying!!!

[JerrodV]

Same. Using Microsoft Visual Studio Community 2022 (64-bit) - Version 17.11.6. I have been following this issue so long I'm sick of it. I will check back when the next full version of Visual Studio come out. It should be good for a laugh when NOTHING HAS BEEN DONE YET!