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

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.

About this issue

Original URL
State: open
Created 2 years ago
Reactions: 17
Comments: 33 (11 by maintainers)

Most upvoted comments

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.

BowserKingKoopa on Dec 29, 2022

@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.

Heshyo on Aug 18, 2023

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

ChristopherBass on Aug 17, 2023

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

ZippoLag on Oct 16, 2023

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

LapinskasL on Sep 14, 2023

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

MJonesMindSeeds on Dec 18, 2022

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. ❤️

NTaylorMullen on May 2, 2022

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” @:

NTaylorMullen on Jul 25, 2022

@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:

devenv_OWPXOQtGwh

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:

devenv_IOv958E7tA

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

rclabo on May 2, 2022

@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>

rclabo on Mar 1, 2022

Still a very annoying issue.

redcrayonn on May 17, 2023

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.

davidwengier on Dec 16, 2022

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.

media-queries-warning

NinovanderMark on Dec 15, 2022

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 on May 2, 2022