fix(ui): detect hsl()/hsla() as Outlook-incompatible CSS

[sjhddh]

Fixes #2947. Adds hsl() / hsla() to the Outlook compatibility checker.

@gabrielmfern invited this in the issue thread — here's a stab.

Approach

The checker is data-driven off caniemail.com's dataset. caniemail has no hsl() entry, and pnpm caniemail:fetch fully overwrites packages/ui/src/actions/email-validation/caniemail-data.ts. So editing that file directly would be wiped on the next fetch.

Instead, this PR adds a hand-curated overlay at packages/ui/src/actions/email-validation/custom-support-entries.ts — one SupportEntry for hsl(), hsla() with Outlook Windows 2007–2019 marked "n" (→ error status via the existing stats pipeline). The overlay is spread into the checker loop at runtime:

for (const entry of [...supportEntries, ...customSupportEntries]) { ... }

Happy to rename (curated-, manual-, extra-) or restructure (e.g. merge at fetch time inside fill-caniemail-data.mts) if you'd prefer a different pattern — this is establishing a new precedent since no custom-*-entries.ts exists today.

Known limitation (pre-existing, not introduced here)

The function matcher at check-compatibility.ts:293 is case-sensitive: entryFunctions.includes(functionName). So HSL(...) won't match. Same applies to the existing oklch/lch/lab entries today. Can fix in a follow-up if you want.

Tests

packages/ui/src/actions/email-validation/check-compatibility.spec.ts — 4 new cases:

• background-color: hsl(200, 50%, 50%) → Outlook error
• color: hsla(120, 100%, 50%, 0.5) → Outlook error
• Whitespace tolerance: hsl( 200 , 50% , 50% ) → Outlook error
• Negative: hex / rgb values → no false-positive

pnpm -F @react-email/ui test
  Test Files  1 passed (1)
       Tests  4 passed (4)
# full ui suite also green: 12 files, 31 tests passed

Lint clean. TypeScript clean. No lockfile changes.

---

Summary by cubic

Detects and warns on CSS hsl()/hsla() as Outlook-incompatible in the email compatibility checker. Uses a curated overlay so the warning persists when caniemail-data is refreshed.

• Bug Fixes
  • Added manual css-hsl-hsla support entry with Outlook Windows 2007–2019 as unsupported, merged at runtime with caniemail data.
  • Updated the checker to include customSupportEntries in addition to supportEntries.
  • Added tests for hsl()/hsla() detection, whitespace tolerance, and no false positives for hex/rgb.

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

[vercel]

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

A member of the Team first needs to authorize it.

[changeset-bot]

⚠️ No Changeset found

Latest commit: c3cfd70

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

[cubic-dev-ai]

No issues found across 3 files

Confidence score: 5/5

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

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@react-email/ui@3401

commit: c3cfd70