fix(render): decode HTML entities in href and style tags

[Suhaib3100]

Summary

Fixes React SSR escaping HTML entities that break email functionality.

Problem

React's SSR escapes special characters to HTML entities which causes:

1. & → & in href attributes - breaks click tracking services (Azure Communication Services, etc.)
2. > → > in style tags - breaks CSS media queries like @media (width>=48rem)

Solution

Added a post-processing step in render() that selectively decodes HTML entities in:

• href attribute values - decodes & → &
• <style> tag contents - decodes >, <, &

This is a targeted fix that doesn't affect text content where entities should remain encoded.

Changes

• Added decodeHtmlEntities utility in packages/render/src/shared/utils/
• Applied to all render paths (node, browser, edge)
• Added 14 tests covering href and style tag scenarios

Testing

• ✅ All 62 tests passing
• ✅ Build succeeds for all environments

Fixes #1767
Fixes #2841

---

Summary by cubic

Decode HTML entities in SSR output to fix broken email links and CSS. This prevents click tracking URLs and media queries from failing in rendered emails.

• Bug Fixes
  • Added decodeHtmlEntities post-processing in node, browser, and edge render paths.
  • Decodes & in href values; decodes >, <, & inside style tags only (text content unaffected).
  • Introduced utility and 14 tests covering href and style cases.
  • Addresses issues Incorrect display of quotes in styles and string links when exporting in react-email #1767 and React Email v5 generates malformed CSS for responsive utilities #2841.

^{Written for commit 5026fb7. Summary will update on new commits.}

[changeset-bot]

🦋 Changeset detected

Latest commit: 5026fb7

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

This PR includes changesets to release 6 packages

Name	Type
@react-email/render	Patch
@react-email/components	Patch
@react-email/tailwind	Patch
playground	Patch
@react-email/preview-server	Patch
react-email	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]

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

A member of the Team first needs to authorize it.

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/resend/react-email/@react-email/render@2920

commit: 5026fb7

[cubic-dev-ai]

1 issue found across 6 files

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="packages/render/src/shared/utils/decode-html-entities.spec.ts">

<violation number="1" location="packages/render/src/shared/utils/decode-html-entities.spec.ts:6">
P2: Rule violated: **No `should` in tests**

Test descriptions must not include the word "should" (rule: "No `should` in tests"). Rewrite these descriptions in direct, declarative language (e.g., "decodes &amp; in href attributes").</violation>
</file>

---

Since this is your first cubic review, here's how it works:

• cubic automatically reviews your code and comments on bugs and improvements
• Teach cubic by replying to its comments. cubic learns from your replies and gets better over time
• Ask questions if you need clarification on any suggestion

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}