Very confusing syntax highlighting issue

[sunnyAfterSnow]

Sublime Text build number

4169

Example Code

// @flow

// Inorrect syntax highlighting
export function normalizeChildren (
  children: any,
  ns: string | void,
  nestedIndex: number | void
):  Array<mixed> | void {

  if (!children) {
    // do something ...
    return;
  }
  console.log("Will return normalized child nodes");
}

// Correct syntax highlighting
export function normalizeChildren_sytax (
  children: any,
  ns: string | void,
  nestedIndex: number | void
): void | Array<mixed>  {

  if (!children) {
    // do something ...
    return;
  }
  console.log("Will return normalized child nodes");
}

JS Custom Preferences

{
    "configurations": {
        "HTML-JS":{
            "scope": "source.js",
            "file_extensions": [ "js" ],
            "custom_templates": {
                // To highlight any untagged template as HTML
                "default": "scope:text.html.basic",
                "lookaheads": {
                    // To highlight `<div>Hello, World!</div>`
                    "<": "scope:text.html.basic",
                },
                "comments": {
                    // To highlight /*html*/`<div>Hello, World!</div>`
                    "html": "scope:text.html.basic",
                },
                "tags": {
                    // To highlight html`<div>Hello, World!</div>`
                    "html": "scope:text.html.basic",
                }
            }
        },
        "HTML-flow-JS": {
            "scope": "source.js.flow" ,
            "flow_types": true,
            "jsx": true,
            "custom_templates": {
                // To highlight any untagged template as HTML
                "default": "scope:text.html.basic",
                "lookaheads": {
                    // To highlight `<div>Hello, World!</div>`
                    "<": "scope:text.html.basic",
                },
                "comments": {
                    // To highlight /*html*/`<div>Hello, World!</div>`
                    "html": "scope:text.html.basic",
                },
                "tags": {
                    // To highlight html`<div>Hello, World!</div>`
                    "html": "scope:text.html.basic",
                }
            }
        },
        "HTML-TS": {
            "scope": "source.ts",
            "file_extensions": [ "ts" ],
            "typescript": true,
            "custom_templates": {
                // To highlight any untagged template as HTML
                "default": "scope:text.html.basic",
                "lookaheads": {
                    // To highlight `<div>Hello, World!</div>`
                    "<": "scope:text.html.basic",
                },
                "comments": {
                    // To highlight /*html*/`<div>Hello, World!</div>`
                    "html": "scope:text.html.basic",
                },
                "tags": {
                    // To highlight html`<div>Hello, World!</div>`
                    "html": "scope:text.html.basic",
                }
            }
        }
    } 
}

Configuration name

JS Custom - HTML-flow-JS

Description

I use Monokai pro color schema and theme. When the return value type of the function is "Array<mixed>| void", the syntax highlighting is incorrect. When the return value type of the function is "void | Array<mixed>”, the syntax highlighting is correct. How confusing, isn't it?