fix(react-email): convert pt padding on Button instead of zeroing it

.changeset/button-pt-padding.md

@@ -0,0 +1,5 @@
+---
+"react-email": patch
+---
+
+`<Button>` now converts `pt` padding values to `px` instead of treating them as `0`, so `style={{ padding: '9pt 15pt' }}` or `className="px-[15pt] py-[9pt]"` keeps its padding in every client and in the Outlook spacers.

packages/react-email/src/components/button/button.spec.tsx

@@ -50,4 +50,14 @@ describe('<Button> component', () => {
       `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><a style="line-height:150%;text-decoration:underline red;display:block;max-width:50%;mso-padding-alt:0px" target="_blank"><span><!--[if mso]><i style="mso-font-width:0%;mso-text-raise:0px" hidden></i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px"></span><span><!--[if mso]><i style="mso-font-width:0%" hidden>&#8203;</i><![endif]--></span></a><!--/$-->"`,
     );
   });
+
+  it('converts pt padding values instead of zeroing them', async () => {
+    const html = await render(
+      <Button href="https://example.com" style={{ padding: '9pt 15pt' }} />,
+    );
+    expect(html).toContain(
+      'padding:9pt 15pt;padding-top:12px;padding-right:20px;padding-bottom:12px;padding-left:20px',
+    );
+    expect(html).toContain('mso-font-width:500%;mso-text-raise:18px');
+  });
 });

packages/react-email/src/components/button/utils/parse-padding.ts

@@ -23,7 +23,7 @@ export function convertToPx(value: PaddingType) {
     return value;
   }
 
-  const matches = /^([\d.]+)(px|em|rem|%)$/.exec(value);
+  const matches = /^([\d.]+)(px|pt|em|rem|%)$/.exec(value);
 
   if (matches && matches.length === 3) {
     const numValue = Number.parseFloat(matches[1]!);
@@ -32,6 +32,8 @@ export function convertToPx(value: PaddingType) {
     switch (unit) {
       case 'px':
         return numValue;
+      case 'pt':
+        return (numValue * 4) / 3;
       case 'em':
       case 'rem':
         px = numValue * 16;

packages/react-email/src/components/button/utils/utils.spec.ts

@@ -7,6 +7,11 @@ describe('convertToPx', () => {
     expect(result).toBe(10);
   });
 
+  it('converts "9pt" to 12', () => {
+    const result = convertToPx('9pt');
+    expect(result).toBe(12);
+  });
+
   it('converts "2em" to 32', () => {
     const result = convertToPx('2em');
     expect(result).toBe(32);