Incorrect HTML characters in body style tag #1516

mbforbes · 2024-06-24T19:17:03Z

mbforbes
Jun 24, 2024

I'm generating HTML for the provided example "vercel-invite-user"
https://demo.react.email/preview/notifications/vercel-invite-user

I'm running it like:

yarn run email export --outDir out/ --pretty

The opening body tag looks like:

I think those " characters shouldn't be in the style="" tag.

Here's the raw HTML for inspection (hard to read as one line)

  <body style="background-color:rgb(255,255,255);margin-top:auto;margin-bottom:auto;margin-left:auto;margin-right:auto;font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;;padding-left:0.5rem;padding-right:0.5rem">
...
</body>

Running version 2.1.4

In case it helps, here's the full output:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="en">

  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
    <meta name="x-apple-disable-message-reformatting" />
  </head>
  <div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0">Join undefined on Vercel<div> ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏</div>
  </div>

  <body style="background-color:rgb(255,255,255);margin-top:auto;margin-bottom:auto;margin-left:auto;margin-right:auto;font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;;padding-left:0.5rem;padding-right:0.5rem">
    <table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:465px;border-width:1px;border-style:solid;border-color:rgb(234,234,234);border-radius:0.25rem;margin-top:40px;margin-bottom:40px;margin-left:auto;margin-right:auto;padding:20px">
      <tbody>
        <tr style="width:100%">
          <td>
            <table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="margin-top:32px">
              <tbody>
                <tr>
                  <td><img alt="Vercel" height="37" src="/static/vercel-logo.png" style="display:block;outline:none;border:none;text-decoration:none;margin-top:0px;margin-bottom:0px;margin-left:auto;margin-right:auto" width="40" /></td>
                </tr>
              </tbody>
            </table>
            <h1 style="color:rgb(0,0,0);font-size:24px;font-weight:400;text-align:center;padding:0px;margin-top:30px;margin-bottom:30px;margin-left:0px;margin-right:0px">Join <strong></strong> on <strong>Vercel</strong></h1>
            <p style="font-size:14px;line-height:24px;margin:16px 0;color:rgb(0,0,0)">Hello <!-- -->,</p>
            <p style="font-size:14px;line-height:24px;margin:16px 0;color:rgb(0,0,0)"><strong></strong> (<a href="mailto:undefined" style="color:rgb(37,99,235);text-decoration:none;text-decoration-line:none" target="_blank"></a>) has invited you to the <strong></strong> team on<!-- --> <strong>Vercel</strong>.</p>
            <table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation">
              <tbody>
                <tr>
                  <td>
                    <table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation">
                      <tbody style="width:100%">
                        <tr style="width:100%">
                          <td align="right" data-id="__react-email-column"><img height="64" style="display:block;outline:none;border:none;text-decoration:none;border-radius:9999px" width="64" /></td>
                          <td align="center" data-id="__react-email-column"><img alt="invited you to" height="9" src="/static/vercel-arrow.png" style="display:block;outline:none;border:none;text-decoration:none" width="12" /></td>
                          <td align="left" data-id="__react-email-column"><img height="64" style="display:block;outline:none;border:none;text-decoration:none;border-radius:9999px" width="64" /></td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </tbody>
            </table>
            <table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="text-align:center;margin-top:32px;margin-bottom:32px">
              <tbody>
                <tr>
                  <td><a style="line-height:100%;text-decoration:none;display:inline-block;max-width:100%;background-color:rgb(0,0,0);border-radius:0.25rem;color:rgb(255,255,255);font-size:12px;font-weight:600;text-decoration-line:none;text-align:center;padding-left:1.25rem;padding-right:1.25rem;padding-top:0.75rem;padding-bottom:0.75rem;padding:12px 20px 12px 20px" target="_blank"><span><!--[if mso]><i style="letter-spacing: 20px;mso-font-width:-100%;mso-text-raise:18" hidden>&nbsp;</i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:9px">Join the team</span><span><!--[if mso]><i style="letter-spacing: 20px;mso-font-width:-100%" hidden>&nbsp;</i><![endif]--></span></a></td>
                </tr>
              </tbody>
            </table>
            <p style="font-size:14px;line-height:24px;margin:16px 0;color:rgb(0,0,0)">or copy and paste this URL into your browser:<!-- --> <a style="color:rgb(37,99,235);text-decoration:none;text-decoration-line:none" target="_blank"></a></p>
            <hr style="width:100%;border:none;border-top:1px solid #eaeaea;border-width:1px;border-style:solid;border-color:rgb(234,234,234);margin-top:26px;margin-bottom:26px;margin-left:0px;margin-right:0px" />
            <p style="font-size:12px;line-height:24px;margin:16px 0;color:rgb(102,102,102)">This invitation was intended for<!-- --> <span style="color:rgb(0,0,0)"></span>. This invite was sent from <span style="color:rgb(0,0,0)"></span> <!-- -->located in<!-- --> <span style="color:rgb(0,0,0)"></span>. If you were not expecting this invitation, you can ignore this email. If you are concerned about your account&#x27;s safety, please reply to this email to get in touch with <!-- -->{{ santa }}</p>
          </td>
        </tr>
      </tbody>
    </table>
  </body>

</html>

(edit: apologies, accidentally started too early)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Incorrect HTML characters in body style tag #1516

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

Incorrect HTML characters in body style tag #1516

mbforbes Jun 24, 2024

Replies: 0 comments

mbforbes
Jun 24, 2024