fix(tailwind): hsl and hsla colors for ms outlook

[tlow92]

Fixes #2947 partially.
When using tailwind it converts hsl and hsla similar to existing rgb sanitization

If you can suggest me how you wish this to be handled for non-tailwind react-email, I can fix it there as well.

---

Summary by cubic

Converts hsl() and hsla() colors to rgb during Tailwind CSS sanitization to ensure correct rendering in Microsoft Outlook. Adds tests covering multiple syntaxes and alpha formats.

• Bug Fixes
  • Parse and convert hsl/hsla (comma and space syntax, deg units, numeric and percentage alpha) to rgb with optional alpha.
  • Support hsl/hsla inside nested functions like linear-gradient.
  • Added unit tests for pure colors, grayscale, alpha cases, and multiple declarations.

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

[vercel]

@tlow92 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: 7d5fb1f

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]

Open in StackBlitz

npm i https://pkg.pr.new/resend/react-email/@react-email/tailwind@2948

commit: 7d5fb1f

[cubic-dev-ai]

1 issue found across 2 files

Confidence score: 4/5

• Potential compatibility issue: new HSL/HSLA parsing in packages/tailwind/src/utils/css/sanitize-declarations.ts may throw on valid CSS hues using rad/grad/turn or none, which could reject legitimate styles
• Confidence is low for the finding, so overall risk feels minimal and the PR is likely safe to merge
• Pay close attention to packages/tailwind/src/utils/css/sanitize-declarations.ts - HSL/HSLA hue parsing may be too strict

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/tailwind/src/utils/css/sanitize-declarations.ts">

<violation number="1" location="packages/tailwind/src/utils/css/sanitize-declarations.ts:297">
P2: The new hsl/hsla parsing only accepts hue in degrees; valid angle units (rad/grad/turn) or the `none` keyword leave `h` undefined and cause a throw on valid CSS syntax.</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.}

[cubic-dev-ai]

P2: The new hsl/hsla parsing only accepts hue in degrees; valid angle units (rad/grad/turn) or the none keyword leave h undefined and cause a throw on valid CSS syntax.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At packages/tailwind/src/utils/css/sanitize-declarations.ts, line 297:

<comment>The new hsl/hsla parsing only accepts hue in degrees; valid angle units (rad/grad/turn) or the `none` keyword leave `h` undefined and cause a throw on valid CSS syntax.</comment>

<file context>
@@ -246,6 +278,57 @@ export function sanitizeDeclarations(nodeContainingDeclarations: CssNode) {
+                  continue;
+                }
+              }
+              if (child.type === 'Dimension' && child.unit === 'deg') {
+                if (h === undefined) {
+                  h = Number.parseFloat(child.value);
</file context>