Skip to content

fix(preview-server): detect hsl/hsla colors in compatibility checker#3061

Closed
mvanhorn wants to merge 1 commit into
resend:canaryfrom
mvanhorn:osc/2947-fix-hsl-hsla-compatibility-checker
Closed

fix(preview-server): detect hsl/hsla colors in compatibility checker#3061
mvanhorn wants to merge 1 commit into
resend:canaryfrom
mvanhorn:osc/2947-fix-hsl-hsla-compatibility-checker

Conversation

@mvanhorn
Copy link
Copy Markdown
Contributor

@mvanhorn mvanhorn commented Mar 13, 2026

Summary

The email compatibility checker now flags hsl() and hsla() color values as unsupported in Microsoft Outlook on Windows.

Previously, these color functions were invisible to the checker because caniemail.com does not track hsl/hsla support data. Users would unknowingly use hsl colors that render correctly in the preview but fail silently in Outlook (Word rendering engine).

Fixes #2947

Changes

  • New file: caniemail-supplemental-data.ts - Contains manually curated support entries for hsl() and hsla() with Outlook Windows marked as unsupported ("n"). Kept separate from the auto-generated caniemail-data.ts so entries survive re-runs of fill-caniemail-data.mts.
  • Modified: check-compatibility.ts - Merges supplemental entries with the caniemail data so the existing CSS function matching logic picks up hsl/hsla automatically.

Why a separate file?

The caniemail-data.ts file is auto-generated from caniemail.com's API via fill-caniemail-data.mts. Adding entries directly would get wiped on the next refresh. The supplemental file can be removed once caniemail.com adds official hsl/hsla tracking.

This contribution was developed with AI assistance (Claude Code).


Summary by cubic

Flags hsl() and hsla() colors as unsupported in Outlook on Windows in the email compatibility checker to prevent silent rendering failures. Fixes Linear issue #2947 and publishes a patch to @react-email/preview-server.

  • Bug Fixes
    • Added supplemental hsl()/hsla() support data and merged it with caniemail so the existing CSS function detection flags these colors for Outlook on Windows.
    • Added a changeset to release this as a patch.

Written for commit f27e60b. Summary will update on new commits. Review in cubic

@vercel
Copy link
Copy Markdown
Contributor

vercel Bot commented Mar 13, 2026

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

A member of the Team first needs to authorize it.

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Mar 13, 2026

🦋 Changeset detected

Latest commit: f27e60b

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

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

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Mar 13, 2026

Open in StackBlitz

npm i https://pkg.pr.new/@react-email/preview-server@3061

commit: f7fd6c5

Copy link
Copy Markdown
Contributor

@cubic-dev-ai cubic-dev-ai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No issues found across 2 files

Confidence score: 5/5

  • Automated review surfaced no issues in the provided summaries.
  • No files require special attention.

@gabrielmfern gabrielmfern self-requested a review March 18, 2026 20:05
@github-actions github-actions Bot added the linear-synced PR has been synced to Linear label May 14, 2026
@dielduarte dielduarte removed the linear-synced PR has been synced to Linear label May 14, 2026
@github-actions github-actions Bot added the linear-synced PR has been synced to Linear label May 14, 2026
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Copy link
Copy Markdown
Member

@gabrielmfern gabrielmfern left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you!

@gabrielmfern gabrielmfern force-pushed the osc/2947-fix-hsl-hsla-compatibility-checker branch from d220d93 to f27e60b Compare May 21, 2026 13:49
@gabrielmfern
Copy link
Copy Markdown
Member

Apparently we merged another pull request that was basically a copy of this 🙁 #3401. So sorry for that, but I'm going to close this now since we've already merged the other one.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

linear-synced PR has been synced to Linear

Projects

None yet

Development

Successfully merging this pull request may close these issues.

hsl/hsla colors not caught by compatibility checker

3 participants