How to highlight syntax of block and inline comments in VSCode extensions?

Question

This is my goal to achieve:

This is what I get:

My little syntax highlighting vscode extension looks like this:

package.json (significant excerpt)

"contributes": {
    "languages": [{
      "id": "foo",
      "extensions": [".foo"],
      "configuration": "./language-configuration.json"
    }],
    "grammars": [{
      "language": "foo",
      "scopeName": "source.foo",
      "path": "./syntaxes/foo.tmLanguage.json"
    }],
    "themes": [
      {
        "label": "dark",
        "uiTheme": "vs-dark",
        "path": "./themes/d-color-theme.json"
      }
    ]
  }

language-configuration.json

{
    "comments": {
        "lineComment": "//",
        "blockComment": [ "\/*", "*\/" ]
    }
}

syntaxes/foo.tmLanguage.json

{
    "name": "Foo Language",
    "patterns": [
        {
            "include": "#longComments"
        },
        {
            "include": "#shortComments"
        },
        {
            "include": "#pascalCase"
        },
        {
            "include": "#camelCase"
        }

    ],
    "repository": {
        "longComments": {
            "patterns": [{
                "name": "blockComment.foo",
                "match": "\/*((?:.|\n)*?)*\/"
            }]
        },
        "camelCase": {
            "patterns": [{
                "name": "camelCase.foo",
                "match": "[a-z][a-z0-9A-Z_]*"
            }]
        },
        "pascalCase": {
            "patterns": [{
                "name": "pascalCase.foo",
                "match": "[A-Z][a-z0-9A-Z_]*"
            }]
        },
        "shortComments": {
            "patterns": [{
                "name": "lineComment.foo",
                "match": "\/\/[^\n]*"
            }]
        }
    },
    "scopeName": "source.foo"
}

themes/dark-color-theme.json

{
    "name": "dark",
    "colors": {
        "editor.background": "#263238",
        "editor.foreground": "#eeffff",
        "activityBarBadge.background": "#007acc",
        "sideBarTitle.foreground": "#bbbbbb"
    },
    "tokenColors": [
        {
            "name": "Pascal Case Identifiers",
            "scope": [
                "pascalCase.foo"
            ],
            "settings": {
                "foreground": "#06d44a"
            }
        },
        {
            "name": "Comment",
            "scope": [
                "blockComment.foo",
                "lineComment.foo"
            ],
            "settings": {
                "fontStyle": "italic",
                "foreground": "#546E7A"
            }
        },
        {
            "name": "Camel Case Identifiers",
            "scope": [
                "camelCase.foo"
            ],
            "settings": {
                "foreground": "#f7c63f"
            }
        }
    ]
}

What I tried is to replace the longComments specification in:

syntaxes/foo.tmLanguage.json (excerpt with replacement)

       "longComments": {
            "name": "blockComment.foo",
            "begin": "\/*",
            "end": "*\/",
            "patterns": [
                {
                    "name": "character.foo",
                    "match": "((?:.|\n)*?)*"
                }
            ]
        }

but then I see this:

This is my test text. You can copy-paste to reproduce the behavior.

// an Inline comment 
// an Inline comment that is even longer
PascalCaseWord AnotherPascalCaseWord
camelCaseWord, anotherCamelCaseWord
/* This is another multiline comment with some PascalCaseWord and some camelCaseWord */
/* This is another multiline comment with some PascalCaseWord and some camelCaseWord
that goes over two lines . */
/* This is another multiline comment with 
some PascalCaseWord 
and some camelCaseWord
that goes over three lines . */

How can I achieve my goal (see first screenshot)?