Skip to content

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

Open
mvanhorn wants to merge 1 commit intoresend:canaryfrom
mvanhorn:osc/2947-fix-hsl-hsla-compatibility-checker
Open

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

Conversation

@mvanhorn
Copy link

@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.

  • Bug Fixes
    • Added supplemental entries for hsl()/hsla() with Outlook Windows marked as unsupported, kept in caniemail-supplemental-data.ts.
    • Merged supplemental data with caniemail entries in check-compatibility.ts so existing CSS function detection catches these colors.

Written for commit cca134f. Summary will update on new commits.

Adds supplemental support entries for hsl() and hsla() CSS color
functions. Microsoft Outlook on Windows does not support these color
values, but the compatibility checker had no way to flag them since
caniemail.com does not track hsl/hsla support.

The supplemental data is in a separate file so it won't be overwritten
when the caniemail data is refreshed via fill-caniemail-data.mts.

Fixes resend#2947

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@vercel
Copy link

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

changeset-bot bot commented Mar 13, 2026

⚠️ No Changeset found

Latest commit: cca134f

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.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

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

@pkg-pr-new
Copy link

pkg-pr-new bot commented Mar 13, 2026

Open in StackBlitz

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

commit: 0d9c986

Copy link
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.

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

hsl/hsla colors not caught by compatibility checker

1 participant