System.FormattableString results in doubled '{' in JavaScript output

[roboz0r]

Description

When writing bindings referring to System.FormattableString the resulting JavaScript string includes {{ and }} where only single characters are expected. This results in broken styles in e.g. Fable.Lit.

Repro code

REPL

open System
open Fable.Core

[<Erase>]
type Binding() =
    [<Emit("css($0, $1)")>]
    static member inline private cssInner(strs: string[], [<ParamArray>] args: obj[]) : obj = jsNative

    static member inline css(s: FormattableString) =
        Binding.cssInner (s.GetStrings(), s.GetArguments())

module X = 
  let ex1 () =
    let color = "blue"
    Binding.css 
        $""":host {{
            color: {color};
        }}"""

  let ex2 () =
    Binding.css 
        $$""":host {
            color: blue;
        }"""

  let ex3 () =
    Binding.css 
        $":host {{
            color: blue;
        }}"

Expected and actual results

Actual

export function X_ex1() {
    const color = "blue";
    const s = fmt`:host {{
            color: ${color};
        }}`;
    return css(s.strs, ...s.args);
}

Expected

export function X_ex1() {
    const color = "blue";
    const s = fmt`:host {
            color: ${color};
        }`;
    return css(s.strs, ...s.args);
}

or

export function X_ex1() {
    const color = "blue";
    return css(`:host {
            color: ${color};
        }`);
}

Related information

• Fable version: dotnet fable --version 4.20.0
• Operating system: Windows 10