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.

[iRyusa]

Seems to be affected by both prettier and the new minifier we're using :(

I'm trying to do a basic HTML to reproduce it for them to investigate

[robkorv]

Can be replicated by installing the latest alpha with npm install -D mjml@5.0.0-alpha.6.
Add "type": "module" to the "package.json".

"package.json" should look like this

{
  "type": "module",
  "devDependencies": {
    "mjml": "^5.0.0-alpha.6"
  }
}

Then create a js file with the following content:

import mjml2html from "mjml";
const input = `
  <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>`;
const output = await mjml2html(input, { minify: true }).then((res) => res.html);
const expected =
  "font-family:'Source Sans 3',Arial,sans-serif;font-size:16px;line-height:1.4;";
const regex = /font-family:.+;/;
const actual = output.match(regex)[0];
console.assert(actual === expected, `Expected: ${expected}, Actual: ${actual}`);

I called it "something.js". Execute it with node something.js