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: closed
  • Created 2 years ago
  • Comments: 17

Most upvoted comments