Incorrect display of quotes in styles and string links when exporting in react-email #1767
Description
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,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",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: "Helvetica Neue", 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