Flow call expression generic with union type is parsed incorrectly with babylon parser

[FezVrasta]

Prettier 1.15.2
Playground link

Input:

const Theme = React.createContext<"light" | "dark">("light");

Output:

const Theme = (React.createContext < "light") | ("dark" > "light");

Expected behavior:

const Theme = React.createContext<"light" | "dark">("light");

This seems pretty bad.

[ikatyang]

This looks like an edge case in babylon. As a workaround you could use --parser flow for now:

Prettier 1.15.2
Playground link

--parser flow

Input:

const Theme = React.createContext<"light" | "dark">("light");

Output:

const Theme = React.createContext<"light" | "dark">("light");

cc @existentialism

[j-f1]

You can also use // prettier-ignore to work around the issue in the meantime.

[existentialism]

Since babel/babel#7934, the @babel/parser will only attempt to parse this if @flow pragma is present in the file or all option is passed to the flow plugin in its options (["flow", { all: true }])

Playground link with pragma

[j-f1]

Should Prettier add an option to enable all: true for the Babylon parser?

[ikatyang]

How about adding a babylon-flow parser (and babylon-typescript for TS)?