Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
romantrukhtanov opened this issue Nov 8, 2024 · 7 comments
Open

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

romantrukhtanov opened this issue Nov 8, 2024 · 7 comments
Labels
Package: @react-email/render Type: Bug Confirmed bug

Comments

@romantrukhtanov
Copy link

romantrukhtanov commented Nov 8, 2024 •
edited
Loading

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 &quot;, which may lead to incorrect font rendering in some email clients.

Your Templates:
image

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
@romantrukhtanov romantrukhtanov added the Type: Bug Confirmed bug label Nov 8, 2024
@gabrielmfern gabrielmfern mentioned this issue Nov 11, 2024
Closed
@gabrielmfern
Copy link
Collaborator

gabrielmfern commented Nov 11, 2024 •
edited
Loading

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
Copy link
Author

romantrukhtanov commented Nov 11, 2024 •
edited
Loading

@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 &amp;.

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>

@K-Rilla
Copy link

K-Rilla commented Jan 14, 2025

Our team is working on this.
(CodeDayLabs Winter '25 NSC cohort)

@felixhagspiel
Copy link

+1, as this currently breaks email validation links:

\$\{clientUrl\}/verify?ticket=\$\{ticket\}&redirectTo=\$\{redirectTo\}&type=emailVerify
-> becomes:
${clientUrl}/verify?ticket=${ticket}&amp;redirectTo=${redirectTo}&amp;type=emailVerify

@gabrielmfern
Copy link
Collaborator

@felixhagspiel Does it break as in how exactly? Does the link not work when redirecting?

@felixhagspiel
Copy link

@gabrielmfern the query parameters are not readable, because ...&redirectTo= gets changed to ...&amp;redirectTo=

@felixhagspiel
Copy link

@gabrielmfern please ignore my comment, the links are working when clicking them inside the email. sorry for the confusion.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Package: @react-email/render Type: Bug Confirmed bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@felixhagspiel @gabrielmfern @romantrukhtanov @K-Rilla