Aspnetcore: Nested CSS is not colorized properly

[NTaylorMullen]

Chances are this is due to a TextMate colorization issue but we should double check nevertheless.

[TanayParikh]

No repro in .razor.

No var colorization in HTML / CSS.

Would a .html document be using the same TextMate CSS grammar as a .razor document?

[NTaylorMullen]

Would a .html document be using the same TextMate CSS grammar as a .razor document?
No.

Keep in mind I don't think var wouldn't be colorized in a CSS section. In an html file try:

hello {
    foo: "bar"
}

[TanayParikh]

Ah I see the missing colorization now. 🎨

[NTaylorMullen]

Bhavya helped us out big time and here are her findings on how to fix this:

1. More mappings in aspnetcorerazor.tmLanguage.tmTheme:

            <!-- Begin CSS specific colorization -->

            <dict>
                <key>scope</key>
                <string>
                    meta.selector.custom.css,
                    meta.selector.asterisk.css
                </string>
                <key>settings</key>
                <dict>
                    <key>vsclassificationtype</key>
                    <string>CSS Selector</string>
                </dict>
            </dict>

            <dict>
                <key>scope</key>
                <string>
                    source.css meta.property-name,
                    support.type.property-name.css,
                    support.type.vendored.property-name.css
                </string>
                <key>settings</key>
                <dict>
                    <key>vsclassificationtype</key>
                    <string>CSS Property Name</string>
                </dict>
            </dict>

            <dict>
                <key>scope</key>
                <string>meta.property-value.css</string>
                <key>settings</key>
                <dict>
                    <key>vsclassificationtype</key>
                    <string>CSS Property Value</string>
                </dict>
            </dict>

            <dict>
                <key>scope</key>
                <string>comment.block.css</string>
                <key>settings</key>
                <dict>
                    <key>vsclassificationtype</key>
                    <string>CSS Comment</string>
                </dict>
            </dict>

            <dict>
                <key>scope</key>
                <string>
                    meta.at-rule.charset.css,
                    meta.at-rule.import.css,
                    meta.at-rule.font-face.css,
                    meta.at-rule.page.css,
                    meta.at-rule.media.header.css,
                    meta.at-rule.counter-style.header.css,
                    meta.at-rule.document.header.css,
                    meta.at-rule.keyframes.header.css,
                    meta.at-rule.supports.header.css,
                    meta.at-rule.viewport.css,
                    meta.at-rule.font-features.css,
                    meta.at-rule.namespace.css,
                    meta.at-rule.header.css
                </string>
                <key>settings</key>
                <dict>
                    <key>vsclassificationtype</key>
                    <string>CSS Keyword</string>
                </dict>
            </dict>

            <!-- End CSS specific colorization -->

1. Also, for some reason entity.name.tag.css <-> CSS Selector mapping doesn’t seem to work. I inspected in VS Code(using Inspect TM Scopes option) and entity.name.tag.css seems to be the correct scope. But for some reason it doesn’t work. In my case I added injections in htmly tmlanguage file. For the purpose of testing, I added the below in aspnetrazor.tmLanguage.json and the selector colorization works(at least covers some cases)

    "L:source.css": {
      "patterns": [
        {
          "match": "\\*",
          "name": "meta.selector.asterisk.css"
        },
        {
          "match": "[^\\s]([@]*.+?(?=[\\s]*{))",
          "name": "meta.selector.custom.css"
        }
      ]
    }

[ryanbrandenburg]

I've reported the "CSS Selector" thing to @gundermanc who is investigating it from their end since as best I can tell it's an issue on the VS side of things.

[gundermanc]

Generated a baseline against TextMate editor for Mac and VS Code and VS is inconsistent here, so probably a VS bug: https://devdiv.visualstudio.com/DevDiv/_workitems/edit/1228720

[gundermanc]

(?x)
(?=
  (?:\|)?                    # Possible anonymous namespace prefix
  (?:
    [-\[:.*\#a-zA-Z_]       # Valid selector character
    |
    [^\x00-\x7F]            # Which can include non-ASCII symbols
    |
    \\                      # Or an escape sequence
    (?:[0-9a-fA-F]{1,6}|.)
  )
)

This regex in the CSS grammar fails to match hello. It looks one of the following:

• Bug in our fork of Oniguruma regex engine. There are several in circulation.
• An encoding specific bug in all forks: we're parsing UTF-16LE strings vs. UTF-8, like in VS Code. We do this to avoid an expensive conversion at parse time.

[gundermanc]

Alrighty, update: there is indeed something different about the version of Oniguruma we're using. Running the same regex in UTF-16LE and UTF8 encodings yielded two different regex compilation errors:

• UTF-16_LE: ONIGERR_TOO_SHORT_MULTI_BYTE_STRING
• UTF8: ONIGERR_PREMATURE_END_OF_CHAR_CLASS

It's not clear if the regex bug is in VS's fork or the one being used by VS Code. I'm looking into it a bit more to see if we should take a patch.

In the meantime, an effective work-around is to delete the character-class that references Unicode codepoints, [^\x00-\x7F] from the meta.selector.css rule in the CSS grammar

        <dict>
            <key>begin</key>
            <string>(?x)
(?=
  (?:\|)?                    # Possible anonymous namespace prefix
  (?:
    [-\[:.*\#a-zA-Z_]       # Valid selector character
    |
    [^\x00-\x7F]            # Which can include non-ASCII symbols
    |
    \\                      # Or an escape sequence
    (?:[0-9a-fA-F]{1,6}|.)
  )
)</string>

I then modified the ASP.NET theme to theme meta.selector.css:

      <dict>
          <key>scope</key>
          <string>
              meta.selector.css,
              meta.selector.custom.css,
              meta.selector.asterisk.css
          </string>
          <key>settings</key>
          <dict>
              <key>vsclassificationtype</key>
              <string>CSS Selector</string>
          </dict>
      </dict>

[gundermanc]

Looks like this is indeed a behavior change in the regex engine that is encoding specific. In v6.9.5_rev1, this expression compiles correctly with UTF8, but in UTF-16 it gives an invalid code point error. I'm reaching out to the regex engine owner for clarification.

https://github.com/kkos/oniguruma/issues/218

[gundermanc]

Spoke with K. Kosako and it sounds like this might be by-design behavior since the \xAA regex expression matches characters by their byte representation, and VS is using the UTF-16LE API, which has 2 bytes per character.

Fix here: https://devdiv.visualstudio.com/DevDiv/_git/VS-Platform/pullrequest/280584

Once this is in, simple adding TMTheme for meta.selector.css should be adequate to fix the bug.

[ryanbrandenburg]

@gundermanc's fix is in, so this should be fixed in versions of VS available on the main channel soon.

[ryanbrandenburg]

Fix confirmed, thanks @gundermanc!