Problem Compiling Font Names

[ben-demotic]

This bug was first filed against vscode-mjml here.

Possibly only with MJML5, font families which contain spaces are compiled to HTML incorrectly.

Using an mj-all tag:

<mj-all font-family="'Source Sans 3', Arial, sans-serif" font-size="16px" line-height="1.4" color="#0f3549" />

Expected behavior

This will compile to this for example:

<div style="color:#0f3549;font-family:'Source Sans 3',Arial,sans-serif;font-size:16px;line-height:1.4;text-align:left">

An email sent using this template will render correctly in an email client.

Actual behavior

It now compiles to this:

<div style="color:#0f3549;font-family:Source Sans\ 3,Arial,sans-serif;font-size:16px;line-height:1.4;text-align:left">

The quotations around 'Source Sans 3' have been removed and a backslash introduced.

An email sent using this template will not render correctly in Gmail (at least). The text is just missing altogether.

Steps to reproduce the problem

Take a basic template like this, compile it and check the HTML output:

<mjml>
  <mj-head>
    <mj-title>Test Email</mj-title>
    <mj-font name="Source Sans 3" href="https://fonts.googleapis.com/css2?family=Source+Sans+3" />
    <mj-attributes>
      <mj-all font-family="'Source Sans 3', Arial, sans-serif" font-size="16px" line-height="1.4" color="#0f3549" />
    </mj-attributes>
  </mj-head>
  <mj-body background-color="#f6f6f6" width="700px">
    <mj-section background-color="#ffffff" padding-bottom="0px">
      <mj-column>
        <mj-image align="left" width="240px" src="https://img.logoipsum.com/330.svg" alt="Logo" />
      </mj-column>
    </mj-section>
    <mj-section background-color="#ffffff" padding-top="0px" padding-bottom="0px">
      <mj-column>
        <mj-text padding-bottom="0px">
          <p><strong>*** THIS IS A TEST EMAIL. PLEASE DO NOT REPLY TO THIS MESSAGE. ***</strong></p>
          <p>In reprehenderit et in tempor sit aliquip enim.</p>
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

MJML environment:

• OS: Windows 11 Pro 23H2 (and others)
• MJML Version: 5
• MJML tool used: vscode-mjml

Other information

Pasting the same template into the "try-it-live" editor gives the expected, correct, output.