Razor LSP generates ~~ filler for comments in HTML documents, creates syntax errors in contained languages

[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

Originally posted by @Heshyo in #7349 (comment)

[jimmylewis]

The content of the change sent to the HTML LSP is like this:

{
  "traceparent": "00-9a5e8eca78b95643a8633722395ad6c4-41e3067eb055e342-01",
  "jsonrpc": "2.0",
  "method": "textDocument/didChange",
  "params": {
    "textDocument": {
      "version": 4,
      "uri": "file:///C:/Users/jamlew/source/repos/WebApplication1/WebApplication1/Pages/Index.cshtml__virtual.html__virtualHtmlLSPClient.html"
    },
    "contentChanges": [
      {
        "range": {
          "start": {
            "line": 13,
            "character": 0
          },
          "end": {
            "line": 13,
            "character": 0
          }
        },
        "rangeLength": 0,
        "text": "<style>\r\n  ~~ ~~~~ ~~~~~~~~~~~ ~~\r\n  .some-class { \r\n    font-size: 10px;\r\n  }\r\n\r\n  ~~ ~~~~ ~~~~ ~~~~~~~~~~~ ~~\r\n  @@media print {\r\n    .some-class {\r\n      font-size: 20px;\r\n    }\r\n  }\r\n</style>\r\n"
      }
    ]
  }
}

You can see how the ~~~~ in the content of the <style> block are breaking CSS syntax.

[davidwengier]

Yeah, this is annoying. We rewrite all non-Html to be ~ so you don't need to understand C#. We try to do this without having to understand Html. In <style>, and I assume in <script> too, that system breaks down.

[DustinCampbell]

Could we just stop doing that? It seems like an odd experience.

[jimmylewis]

@NTaylorMullen any chance you recall why it wasn't filled in with spaces? Was there a need to have a non-whitespace filler?

[davidwengier]

Formatting would absolutely fall on the floor if we used whitespace, as you'd remove most of it I suspect.

The solution here, for now, is to use CSS comments, and if you don't want the comments to be in the HTML file, then put your Razor comments in the CSS comment.

The real solution will be full on source mapping for Html generated documents, like we have for C#, which will enable us to remove workarounds like #6597 (which is also coming soon to code actions) and fix other issues like #7564

[NTaylorMullen]

Yup what @davidwengier said ^ 😄

[davidwengier]

Razor comments can also cause problems for TypeScript: https://developercommunity.visualstudio.com/t/Razor-comment-in-cshtml-cause-go-to-def/10368814

[davidwengier]

Another report, where this actually causes all TypeScript functionality to break due to the server crashing: https://developercommunity.visualstudio.com/t/Intellisense-gives-Error-processing-requ/10440137

[phil-allen-msft]

microsoft/TypeScript#55687 is the issue tracking a fix to prevent the TypeScript compiler from crashing.