Fix: Decode HTML entities in style attributes #2518

iagocavalcante · 2025-10-01T17:09:09Z

This commit resolves the issue where React's renderToStaticMarkup encodes quotes and ampersands in style attributes as HTML entities (" and &), which can break:

CSS font-family declarations with quoted font names
URLs with query parameters in style properties

The fix adds a post-processing step that decodes these entities back to their original characters within style attributes only.

Changes:

Added decodeStyleAttributes function to decode " and & in style attributes
Added tests to verify correct decoding of quotes and ampersands
All existing tests continue to pass

Summary by cubic

Decodes HTML entities in inline style attributes to prevent broken font-family quotes and URL query params after renderToStaticMarkup. Replaces " and & with real characters only inside style="...".

Bug Fixes
- Added decodeStyleAttributes to post-process style values.
- Restores quotes and ampersands for valid CSS and URLs.
- Added tests for font-family and background-image URLs.

Fixes resend#1767 This commit resolves the issue where React's renderToStaticMarkup encodes quotes and ampersands in style attributes as HTML entities (" and &), which can break: - CSS font-family declarations with quoted font names - URLs with query parameters in style properties The fix adds a post-processing step that decodes these entities back to their original characters within style attributes only. Changes: - Added decodeStyleAttributes function to decode " and & in style attributes - Added tests to verify correct decoding of quotes and ampersands - All existing tests continue to pass

changeset-bot · 2025-10-01T17:09:13Z

⚠️ No Changeset found

Latest commit: 34733bd

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

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

vercel · 2025-10-01T17:09:15Z

@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

3 issues found across 2 files

Prompt for AI agents (all 3 issues)


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


<file name="packages/render/src/render.ts">

<violation number="1" location="packages/render/src/render.ts:14">
Decoding HTML entities inside style=&quot;…&quot; introduces raw quotes/ampersands, breaking the attribute and corrupting CSS/URLs.</violation>
</file>

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

<violation number="1" location="packages/render/src/render.spec.tsx:30">
Style attributes wrapped in double quotes must keep inner quotes encoded; this assertion enforces decoding them, yielding invalid markup.</violation>

<violation number="2" location="packages/render/src/render.spec.tsx:54">
HTML attributes must encode ampersands as `&amp;amp;`; this test insists on raw `&amp;`, which makes the rendered HTML invalid.</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

_{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-01T17:21:44Z

packages/render/src/render.ts

+  // in attribute values, which can break CSS font-family declarations and URLs
+  return html.replace(/style="([^"]*)"/g, (match, styleContent) => {
+    const decoded = styleContent
+      .replace(/&quot;/g, '"')


Decoding HTML entities inside style="…" introduces raw quotes/ampersands, breaking the attribute and corrupting CSS/URLs.

Prompt for AI agents

Address the following comment on packages/render/src/render.ts at line 14: <comment>Decoding HTML entities inside style="…" introduces raw quotes/ampersands, breaking the attribute and corrupting CSS/URLs.</comment> <file context> @@ -5,11 +5,24 @@ interface Options { + // in attribute values, which can break CSS font-family declarations and URLs + return html.replace(/style="([^"]*)"/g, (match, styleContent) => { + const decoded = styleContent + .replace(/&quot;/g, '"') + .replace(/&amp;/g, '&'); + return `style="${decoded}"`; </file context>

✅ Addressed in ad14252

cubic-dev-ai · 2025-10-01T17:21:44Z

packages/render/src/render.spec.tsx

+    expect(html).not.toContain('&amp;param');
+
+    // Should contain actual ampersands in URLs
+    expect(html).toContain('param1=value1&param2=value2');


HTML attributes must encode ampersands as &; this test insists on raw &, which makes the rendered HTML invalid.

Prompt for AI agents

Address the following comment on packages/render/src/render.spec.tsx at line 54: <comment>HTML attributes must encode ampersands as `&amp;`; this test insists on raw `&`, which makes the rendered HTML invalid.</comment> <file context> @@ -12,4 +12,45 @@ describe('render', () => { + expect(html).not.toContain('&amp;param'); + + // Should contain actual ampersands in URLs + expect(html).toContain('param1=value1&param2=value2'); + }); }); </file context>

cubic-dev-ai · 2025-10-01T17:21:44Z

packages/render/src/render.spec.tsx

+    const html = render(component);
+
+    // Should not contain encoded quotes
+    expect(html).not.toContain('&quot;');


Style attributes wrapped in double quotes must keep inner quotes encoded; this assertion enforces decoding them, yielding invalid markup.

Prompt for AI agents

Address the following comment on packages/render/src/render.spec.tsx at line 30: <comment>Style attributes wrapped in double quotes must keep inner quotes encoded; this assertion enforces decoding them, yielding invalid markup.</comment> <file context> @@ -12,4 +12,45 @@ describe('render', () => { + const html = render(component); + + // Should not contain encoded quotes + expect(html).not.toContain('&quot;'); + + // Should contain actual quotes </file context>

✅ Addressed in ad14252

gabrielmfern · 2025-10-02T12:59:30Z

After testing a bit more thoroughly I don't think it's an issue to have those entities in styles, even though some users said it is, I could not reproduce at all. The only situation guaranteed to have entities fail is in links, and it only breaks, as far as we know, on Azure's email service with click tracking enabled. Can you change things for that?

iagocavalcante · 2025-10-02T14:48:40Z

After testing a bit more thoroughly I don't think it's an issue to have those entities in styles, even though some users said it is, I could not reproduce at all. The only situation guaranteed to have entities fail is in links, and it only breaks, as far as we know, on Azure's email service with click tracking enabled. Can you change things for that?

Yes, I will do this change!

iagocavalcante · 2025-10-02T14:54:46Z

Something like that , wdyt ?

return html.replace(/href="([^"]*)"/g, (match, hrefContent) => {
    const decoded = hrefContent.replace(/&amp;/g, '&');
    return `href="${decoded}"`;
  });

gabrielmfern · 2025-10-03T13:45:44Z

@iagocavalcante I think it'd be better to use https://www.npmjs.com/package/html-entities/v/2.5.6 and run it inside hrefs

gabrielmfern · 2025-10-06T12:19:28Z

Seems like your branch is really outdated when compared to canary, can you update?

cubic-dev-ai bot reviewed Oct 1, 2025

View reviewed changes

fix render with href

ad14252

using package to decode href

34733bd

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix: Decode HTML entities in style attributes #2518

Fix: Decode HTML entities in style attributes #2518

iagocavalcante commented Oct 1, 2025 •

edited by cubic-dev-ai bot

Loading

Uh oh!

changeset-bot bot commented Oct 1, 2025 •

edited

Loading

Uh oh!

vercel bot commented Oct 1, 2025

Uh oh!

cubic-dev-ai bot left a comment

Uh oh!

cubic-dev-ai bot Oct 1, 2025 •

edited

Loading

Uh oh!

cubic-dev-ai bot Oct 1, 2025 •

edited

Loading

Uh oh!

cubic-dev-ai bot Oct 1, 2025 •

edited

Loading

Uh oh!

gabrielmfern commented Oct 2, 2025

Uh oh!

iagocavalcante commented Oct 2, 2025

Uh oh!

iagocavalcante commented Oct 2, 2025

Uh oh!

gabrielmfern commented Oct 3, 2025

Uh oh!

gabrielmfern commented Oct 6, 2025

Uh oh!

Uh oh!

Fix: Decode HTML entities in style attributes #2518

Are you sure you want to change the base?

Fix: Decode HTML entities in style attributes #2518

Conversation

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

Uh oh!

Summary by cubic

Uh oh!

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

Uh oh!

⚠️ No Changeset found

Uh oh!

vercel bot commented Oct 1, 2025

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Oct 1, 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!

cubic-dev-ai bot Oct 1, 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!

cubic-dev-ai bot Oct 1, 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!

gabrielmfern commented Oct 2, 2025

Uh oh!

iagocavalcante commented Oct 2, 2025

Uh oh!

iagocavalcante commented Oct 2, 2025

Uh oh!

gabrielmfern commented Oct 3, 2025

Uh oh!

gabrielmfern commented Oct 6, 2025

Uh oh!

Uh oh!

iagocavalcante commented Oct 1, 2025 •

edited by cubic-dev-ai bot

Loading

changeset-bot bot commented Oct 1, 2025 •

edited

Loading

cubic-dev-ai bot Oct 1, 2025 •

edited

Loading

cubic-dev-ai bot Oct 1, 2025 •

edited

Loading

cubic-dev-ai bot Oct 1, 2025 •

edited

Loading