Issue with - react-email/components >=v0.29. Preview Code adds misplaced line breaks causing buttons not render in Outlook 2016 & 2019 clients

[Wigwamwam]

Describe the Bug

Hey,
react-email button component causes rendering issues on outlook clients 2016 and 2019. This is only present on react-email/component v0.29 or above. The button and any subsequent components do not render.

Packages:

• "@react-email/components": "0.0.29",
• "@react-email/tailwind": "1.0.4",
• "react-email": "3.0.4",

I believe this is due to the code preview incorrectly prettifies the code with miss placed linebreaks as I have compared the output code between 0.28 and 0.29 and the only difference is the linebreaks.

Which package is affected (leave empty if unsure)

@react-email/button, @react-email/components

Link to the code that reproduces this issue

private repo

To Reproduce

• use react email template: https://demo.react.email/preview/notifications/vercel-invite-user?view=source&lang=jsx
• Test the email rendering using Testi.at or a similar tool to preview the email in Microsoft Outlook 2016 and 2019.
• Observe how the button components fail to render correctly in the targeted Outlook versions along with subsequent components.

Below is an example of the rendering issue:

This is what it should look like (this is taken form your website so I expect outlook to produce a lower quality version):

Expected Behavior

When I use react-email/component v0.28 it appears correctly

What's your node version? (if relevant)

No response

[Wigwamwam]

Following on from this I believe it is due to the code preview incorrectly prettifies the code with miss placed linebreaks

[project0]

I have a very similar problem with buttons, but it is not correlated with preview Code. Apparently something changed between react-render 1.0.2 and 1.0.3 .
I believe it broke the "if mso" syntax so outlook is no longer able to parse it (prettier change).

This is the diff (before, after):

<                     <td><a href="{{accept-invitation-url}}" style="line-height:normal;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;background-color:#02deaa;border:0px solid #333333;color:#ffffff;font-size:18px;font-weight:600;letter-spacing:0px;padding:16px 22px 16px 22px;text-align:center;text-transform:uppercase;box-shadow:0px 3px 0px #00C093;border-radius:35px;border-style:solid" target="_blank"><span><!--[if mso]><i style="mso-font-width:366.66666666666663%;mso-text-raise:24" hidden>&#8202;&#8202;&#8202;</i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:12px">Accept Invitation</span><span><!--[if mso]><i style="mso-font-width:366.66666666666663%" hidden>&#8202;&#8202;&#8202;&#8203;</i><![endif]--></span></a></td>
---
>                     <td>
>                       <a
>                         href="{{accept-invitation-url}}"
>                         style="line-height:normal;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;background-color:#02deaa;border:0px solid #333333;color:#ffffff;font-size:18px;font-weight:600;letter-spacing:0px;padding:16px 22px 16px 22px;text-align:center;text-transform:uppercase;box-shadow:0px 3px 0px #00C093;border-radius:35px;border-style:solid"
>                         target="_blank"
>                         ><span
>                           ><!--[if mso
>                             ]><i
>                               style="mso-font-width:366.66666666666663%;mso-text-raise:24"
>                               hidden
>                               >&#8202;&#8202;&#8202;</i
>                             ><!
>                           [endif]--></span
>                         ><span
>                           style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:12px"
>                           >Accept Invitation</span
>                         ><span
>                           ><!--[if mso
>                             ]><i
>                               style="mso-font-width:366.66666666666663%"
>                               hidden
>                               >&#8202;&#8202;&#8202;&#8203;</i
>                             ><!
>                           [endif]--></span
>                         ></a
>                       >
>                     </td>