Incorrect display of quotes in styles and string links when exporting in react-email

romantrukhtanov commented 1 week ago

Describe the Bug

Upon reviewing the font-family output in the elements, a similar issue is observed in <body>: quotes in the font-family value are replaced with encoded symbols ", which may lead to incorrect font rendering in some email clients.

Your Templates:

Example of current result:

<body style="background-color:#ffffff;font-family:-apple-system,BlinkMacSystemFont,&quot;Segoe UI&quot;,Roboto,Oxygen-Sans,Ubuntu,Cantarell,&quot;Helvetica Neue&quot;,sans-serif">
  <!-- Email content -->
</body>

Which package is affected (leave empty if unsure)

react-email

Link to the code that reproduces this issue

https://demo.react.email/preview/magic-links/raycast-magic-link?view=source&lang=markup

To Reproduce

Create an email component using react-email. In the element's style, specify a font-family that includes quotes in the font name. For example:

import { Body } from '@react-email/components';

const EmailComponent = () => (
  <Body style={{ fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif' }}>
    {/* Email content */}
  </Body>
);

export default EmailComponent;

Export or render the email. Open the generated HTML code and examine the style attribute of the element:

<body style="font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;">
  <!-- Email content -->
</body>

Expected Behavior

<body style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">
  <!-- Email content -->
</body>

What's your node version? (if relevant)

No response

gabrielmfern commented 5 days ago

which may lead to incorrect font rendering in some email clients.

Did you notice any specific case where this happens? I do know it happens in other cases, like with url("...") but I don't think it happens with font-family.

The hard thing with this is that this behavior is inherited from React itself, not even the renderer, so it might not be quite avoidable unless they add some way to opt out of this sort of behavior. But still, most generally this shouldn't be an issue as that is still valid HTML.

romantrukhtanov commented 5 days ago

@gabrielmfern Yep, with font-family, styles render correctly in the final email client when the email is sent.

But this also applies to the & symbol, which is encoded as &.

Here’s an example of trying to use with Google API:

import * as React from 'react';

import { Head } from '@react-email/components';

export const MainHead = () => {
  return (
    <Head>
      <meta content="text/html; charset=UTF-8" httpEquiv="Content-Type" />
      <meta name="x-apple-disable-message-reformatting" />
      <link href="https://fonts.googleapis.com/css2?family=Helvetica:wght@400;700&display=swap" rel="stylesheet" />
    </Head>
  );
};

Result:

<head>
  <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
  <meta name="x-apple-disable-message-reformatting" />
  <link href="https://fonts.googleapis.com/css2?family=Helvetica:wght@400;700&amp;display=swap" rel="stylesheet" />
</head>

resend / react-email