fix(render): decode HTML entities in style attributes #2552

iagocavalcante · 2025-10-08T02:12:05Z

Summary

This PR resolves the issue where React's rendering encodes quotes in style attributes as HTML entities ("), which can break CSS font-family declarations with quoted font names.

Changes

Created decodeAttributeEntities utility function to selectively decode HTML entities
style attributes: Decodes ", ', ', and & to fix font-family and other CSS declarations
href attributes: Only decodes & to fix URL query parameters while preserving HTML structure
Applied the fix to all render implementations (node, browser, edge)
Added comprehensive tests to verify correct decoding behavior

Example

Before:

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

After:

<body style="font-family:"Helvetica Neue",Arial,sans-serif">

Test Plan

Added tests for decoding ampersands in href attributes
Added tests for decoding quotes in style attributes
Added test to verify quotes in href are NOT decoded (to avoid breaking HTML)
All existing tests pass

Summary by cubic

Fixes broken CSS font-family and URL query params by decoding safe HTML entities in style and href attributes after render. Applied to node, browser, and edge renderers.

Bug Fixes
- Added decodeAttributeEntities utility to selectively decode attribute values.
- Style attributes: decode quotes and ampersands to restore quoted font-family and CSS values.
- Href attributes: decode only ampersands to keep query params intact without breaking HTML.
- Applied decoding in all render implementations and added tests to cover both cases.

Fixes resend#1767 - This resolves the issue where React's renderToStaticMarkup encodes quotes in style attributes as HTML entities ("), which can break CSS font-family declarations with quoted font names. The fix: - Created decodeAttributeEntities utility function - Decodes ", ', &resend#39;, and & in style attributes - Only decodes & in href attributes to preserve HTML structure - Added comprehensive tests to verify correct decoding Changes: - packages/render/src/shared/utils/decode-html-entities.ts: New utility - packages/render/src/node/render.tsx: Apply decoding after rendering - packages/render/src/browser/render.tsx: Apply decoding after rendering - packages/render/src/edge/render.tsx: Apply decoding after rendering - packages/render/src/node/render-node.spec.tsx: Added tests

changeset-bot · 2025-10-08T02:12:09Z

🦋 Changeset detected

Latest commit: 9c37138

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@react-email/render	Patch
@react-email/components	Patch
playground	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2025-10-08T02:12:11Z

@iagocavalcante is attempting to deploy a commit to the resend Team on Vercel.

A member of the Team first needs to authorize it.

cubic-dev-ai

1 issue found across 6 files

Prompt for AI agents (all 1 issues)


Understand the root cause of the following 1 issues and fix them.


<file name="packages/render/src/node/render.tsx">

<violation number="1" location="packages/render/src/node/render.tsx:47">
Decoding the rendered HTML here replaces `&amp;quot;` inside `style` attributes with raw `&quot;`, so markup like `style=&quot;font-family:&amp;quot;Helvetica Neue&amp;quot;,Arial&quot;` becomes `style=&quot;font-family:&quot;Helvetica Neue&quot;,Arial&quot;`; the double quote now closes the attribute early, yielding invalid HTML and dropping the intended styles.</violation>
</file>

_{React with 👍 or 👎 to teach cubic. Mention @cubic-dev-ai to give feedback, ask questions, or re-run the review.}

cubic-dev-ai · 2025-10-08T02:26:29Z

packages/render/src/node/render.tsx

    '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';

-  const document = `${doctype}${html.replace(/<!DOCTYPE.*?>/, '')}`;
+  const decodedHtml = decodeAttributeEntities(html);


Decoding the rendered HTML here replaces " inside style attributes with raw ", so markup like style="font-family:"Helvetica Neue",Arial" becomes style="font-family:"Helvetica Neue",Arial"; the double quote now closes the attribute early, yielding invalid HTML and dropping the intended styles.

Prompt for AI agents

Address the following comment on packages/render/src/node/render.tsx at line 47: <comment>Decoding the rendered HTML here replaces `&quot;` inside `style` attributes with raw `"`, so markup like `style="font-family:&quot;Helvetica Neue&quot;,Arial"` becomes `style="font-family:"Helvetica Neue",Arial"`; the double quote now closes the attribute early, yielding invalid HTML and dropping the intended styles.</comment> <file context> @@ -43,7 +44,8 @@ export const render = async (node: React.ReactNode, options?: Options) => { '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'; - const document = `${doctype}${html.replace(/<!DOCTYPE.*?>/, '')}`; + const decodedHtml = decodeAttributeEntities(html); + const document = `${doctype}${decodedHtml.replace(/<!DOCTYPE.*?>/, '')}`; </file context>

socket-security · 2025-10-08T15:58:14Z

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Quality	Maintenance
	@types/prettier@3.0.0
	@types/normalize-path@3.0.2
	@types/mime-types@2.1.4
	@radix-ui/react-slot@1.2.3
	@radix-ui/react-collapsible@1.1.12
	@radix-ui/react-toggle-group@1.1.11
	@radix-ui/react-tabs@1.1.13
	@types/prompts@2.4.9
	@radix-ui/react-dropdown-menu@2.1.16
	@radix-ui/react-popover@1.1.15
	@radix-ui/react-tooltip@1.2.8
	@radix-ui/react-select@2.2.6
	@types/prismjs@1.26.5
	@types/html-to-text@9.0.4
	@types/babel__core@7.20.5
	@types/react-dom@19.2.1
	@types/shelljs@0.8.15
	@types/fs-extra@11.0.1
	@types/babel__traverse@7.20.7
	@responsive-email/react-email@0.0.4
	clsx@2.1.1
	debounce@2.2.0
	cross-env@10.0.0
	autoprefixer@10.4.21
	@types/react@19.2.2
	chokidar@4.0.3
	classnames@2.5.1
	@radix-ui/colors@3.0.0
	@types/node@22.14.1
	@vercel/analytics@1.5.0
	commander@13.1.0
	@react-email/tailwind@1.0.4 ⏵ 0.0.17	⁺²	⁺¹	^-3
	@react-email/tailwind@1.0.4 ⏵ 0.0.12	⁺²	^-8	⁺³
See 4 more rows in the dashboard

View full report

socket-security · 2025-10-08T15:58:16Z

Caution

Review the following alerts detected in dependencies.

According to your organization's Security Policy, you must resolve all "Block" alerts before proceeding. Learn more about Socket for GitHub.

Action	Severity	Alert (click "▶" to expand/collapse)
Block		`@swc/core@1.3.101` has Install scripts. Install script: postinstall Source: `node postinstall.js` From: pnpm-lock.yaml → `npm/@swc/core@1.3.101` ℹ Read more on: This package \| This alert \| What is an install script? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at `support@socket.dev`. Suggestion: Packages should not be running non-essential scripts during install and there are often solutions to problems people solve with install scripts that can be run at publish time instead. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment `@SocketSecurity ignore npm/@swc/core@1.3.101`. You can also ignore all packages with `@SocketSecurity ignore-all`. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report

gabrielmfern · 2025-10-09T13:05:03Z

Can you also run pnpm lint:fix?

gabrielmfern · 2025-10-09T12:56:33Z

.changeset/fix-html-entities-in-style-attributes.md

+'@react-email/render': patch
+---
+
+Fix HTML entity encoding in style attributes


can we stick with just this initial portion here, and can you make it all lowercase?

packages/render/src/shared/utils/decode-html-entities.ts

gabrielmfern · 2025-10-09T13:03:49Z

packages/tailwind/src/utils/react/map-react-tree.ts

            : (processed.type as React.FC);

        const rendered = OriginalComponent(processed.props);
+        // Handle async Server Components


this seems unrelated to the pull request

Right, I tried to fix because of build failing

Let's not do that here.

gabrielmfern · 2025-10-14T13:24:25Z

packages/render/src/shared/utils/decode-html-entities.ts

+  const decodeHrefValue = (value: string): string => {
+    // Only decode ampersands in hrefs to fix URL query parameters
+    // Do NOT decode quotes to avoid breaking the attribute syntax
+    return value.replace(/&amp;/g, '&');


can you elaborate on why you didn't use html-entities instead of a replace here?

Using html-entities would be overkill for this single character replacement and this only touch in & nothing else, that's make sense?

cubic-dev-ai bot reviewed Oct 8, 2025

View reviewed changes

fix build and test failing

c82c45c

gabrielmfern and others added 2 commits October 9, 2025 10:05

Merge branch 'canary' into fix/decode-quotes-in-style-attributes

a991373

fix: run lint for decode html entities

08b225e

gabrielmfern requested changes Oct 10, 2025

View reviewed changes

addressed comments from PR

9c37138

gabrielmfern reviewed Oct 14, 2025

View reviewed changes

gabrielmfern force-pushed the canary branch 3 times, most recently from 8128be7 to 19de23f Compare October 17, 2025 20:28

fix(render): decode HTML entities in style attributes #2552

Are you sure you want to change the base?

fix(render): decode HTML entities in style attributes #2552

Uh oh!

Conversation

iagocavalcante commented Oct 8, 2025 • edited by cubic-dev-ai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Example

Test Plan

Summary by cubic

Uh oh!

changeset-bot bot commented Oct 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

vercel bot commented Oct 8, 2025

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Oct 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

socket-security bot commented Oct 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

socket-security bot commented Oct 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gabrielmfern commented Oct 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gabrielmfern Oct 9, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

gabrielmfern Oct 9, 2025

Choose a reason for hiding this comment

Uh oh!

iagocavalcante Oct 10, 2025

Choose a reason for hiding this comment

Uh oh!

gabrielmfern Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

gabrielmfern Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

iagocavalcante Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

iagocavalcante commented Oct 8, 2025 •

edited by cubic-dev-ai bot

Loading

changeset-bot bot commented Oct 8, 2025 •

edited

Loading

cubic-dev-ai bot Oct 8, 2025 •

edited

Loading

socket-security bot commented Oct 8, 2025 •

edited

Loading

socket-security bot commented Oct 8, 2025 •

edited

Loading

gabrielmfern commented Oct 9, 2025 •

edited

Loading