Skip to content

Commit

Permalink
fix(render): Prettier breaking if mso comments (#1839)
Browse files Browse the repository at this point in the history 
Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: Bu Kinoshita <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
  • Loading branch information
@gabrielmfern @bukinoshita @dependabot
3 people authored Jan 22, 2025
1 parent 7e7c5b0 commit ed2fa33
Show file tree
Hide file tree
Showing 6 changed files with 70 additions and 55 deletions.
5 changes: 5 additions & 0 deletions .changeset/mean-plums-exercise.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@react-email/render": patch
---

Fix pretty option breaking button components
71 changes: 21 additions & 50 deletions packages/react-email/src/cli/commands/testing/__snapshots__/export.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,25 +11,22 @@ exports[`email export 1`] = `
<!--$-->
</head>
<div
style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0"
>
style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0">
Join undefined on Vercel
<div>
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
</div>
</div>
<body
style='background-color:rgb(255,255,255);margin-top:auto;margin-bottom:auto;margin-left:auto;margin-right:auto;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";padding-left:0.5rem;padding-right:0.5rem'
>
style='background-color:rgb(255,255,255);margin-top:auto;margin-bottom:auto;margin-left:auto;margin-right:auto;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";padding-left:0.5rem;padding-right:0.5rem'>
<table
align="center"
width="100%"
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
style="border-width:1px;border-style:solid;border-color:rgb(234,234,234);border-radius:0.25rem;margin-top:40px;margin-bottom:40px;margin-left:auto;margin-right:auto;padding:20px;max-width:465px"
>
style="border-width:1px;border-style:solid;border-color:rgb(234,234,234);border-radius:0.25rem;margin-top:40px;margin-bottom:40px;margin-left:auto;margin-right:auto;padding:20px;max-width:465px">
<tbody>
<tr style="width:100%">
<td>
Expand All @@ -40,8 +37,7 @@ exports[`email export 1`] = `
cellpadding="0"
cellspacing="0"
role="presentation"
style="margin-top:32px"
>
style="margin-top:32px">
<tbody>
<tr>
<td>
Expand All @@ -50,31 +46,26 @@ exports[`email export 1`] = `
height="37"
src="/static/vercel-logo.png"
style="margin-top:0px;margin-bottom:0px;margin-left:auto;margin-right:auto;display:block;outline:none;border:none;text-decoration:none"
width="40"
/>
width="40" />
</td>
</tr>
</tbody>
</table>
<h1
style="color:rgb(0,0,0);font-size:24px;font-weight:400;text-align:center;padding:0px;margin-top:30px;margin-bottom:30px;margin-left:0px;margin-right:0px"
>
style="color:rgb(0,0,0);font-size:24px;font-weight:400;text-align:center;padding:0px;margin-top:30px;margin-bottom:30px;margin-left:0px;margin-right:0px">
Join <strong></strong> on <strong>Vercel</strong>
</h1>
<p
style="color:rgb(0,0,0);font-size:14px;line-height:24px;margin:16px 0"
>
style="color:rgb(0,0,0);font-size:14px;line-height:24px;margin:16px 0">
Hello
<!-- -->,
</p>
<p
style="color:rgb(0,0,0);font-size:14px;line-height:24px;margin:16px 0"
>
style="color:rgb(0,0,0);font-size:14px;line-height:24px;margin:16px 0">
<strong></strong> (<a
href="mailto:undefined"
style="color:rgb(37,99,235);text-decoration-line:none"
target="_blank"
></a
target="_blank"></a
>) has invited you to the <strong></strong> team on<!-- -->
<strong>Vercel</strong>.
</p>
Expand All @@ -84,8 +75,7 @@ exports[`email export 1`] = `
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
>
role="presentation">
<tbody>
<tr>
<td>
Expand All @@ -95,32 +85,28 @@ exports[`email export 1`] = `
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
>
role="presentation">
<tbody style="width:100%">
<tr style="width:100%">
<td align="right" data-id="__react-email-column">
<img
height="64"
style="border-radius:9999px;display:block;outline:none;border:none;text-decoration:none"
width="64"
/>
width="64" />
</td>
<td align="center" data-id="__react-email-column">
<img
alt="invited you to"
height="9"
src="/static/vercel-arrow.png"
style="display:block;outline:none;border:none;text-decoration:none"
width="12"
/>
width="12" />
</td>
<td align="left" data-id="__react-email-column">
<img
height="64"
style="border-radius:9999px;display:block;outline:none;border:none;text-decoration:none"
width="64"
/>
width="64" />
</td>
</tr>
</tbody>
Expand All @@ -136,52 +122,37 @@ exports[`email export 1`] = `
cellpadding="0"
cellspacing="0"
role="presentation"
style="text-align:center;margin-top:32px;margin-bottom:32px"
>
style="text-align:center;margin-top:32px;margin-bottom:32px">
<tbody>
<tr>
<td>
<a
style="background-color:rgb(0,0,0);border-radius:0.25rem;color:rgb(255,255,255);font-size:12px;font-weight:600;text-decoration-line:none;text-align:center;padding-left:1.25rem;padding-right:1.25rem;padding-top:0.75rem;padding-bottom:0.75rem;line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;padding:12px 20px 12px 20px"
target="_blank"
><span
><!--[if mso
]><i
style="mso-font-width:500%;mso-text-raise:18"
hidden
>&#8202;&#8202;</i
><!
[endif]--></span
<!--[if mso]><i style="mso-font-width:500%;mso-text-raise:18" hidden>&#8202;&#8202;</i><![endif]-->
><span
style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:9px"
>Join the team</span
><span
><!--[if mso
]><i style="mso-font-width:500%" hidden
>&#8202;&#8202;&#8203;</i
><!
[endif]--></span
<!--[if mso]><i style="mso-font-width:500%" hidden>&#8202;&#8202;&#8203;</i><![endif]-->
></a
>
</td>
</tr>
</tbody>
</table>
<p
style="color:rgb(0,0,0);font-size:14px;line-height:24px;margin:16px 0"
>
style="color:rgb(0,0,0);font-size:14px;line-height:24px;margin:16px 0">
or copy and paste this URL into your browser:<!-- -->
<a
style="color:rgb(37,99,235);text-decoration-line:none"
target="_blank"
></a>
target="_blank"></a>
</p>
<hr
style="border-width:1px;border-style:solid;border-color:rgb(234,234,234);margin-top:26px;margin-bottom:26px;margin-left:0px;margin-right:0px;width:100%;border:none;border-top:1px solid #eaeaea"
/>
style="border-width:1px;border-style:solid;border-color:rgb(234,234,234);margin-top:26px;margin-bottom:26px;margin-left:0px;margin-right:0px;width:100%;border:none;border-top:1px solid #eaeaea" />
<p
style="color:rgb(102,102,102);font-size:12px;line-height:24px;margin:16px 0"
>
style="color:rgb(102,102,102);font-size:12px;line-height:24px;margin:16px 0">
This invitation was intended for<!-- -->
<span style="color:rgb(0,0,0)"></span>. This invite was sent from
<span style="color:rgb(0,0,0)"></span>
Expand Down
3 changes: 0 additions & 3 deletions packages/render/src/shared/react-internals.d.ts
View file

This file was deleted.

6 changes: 6 additions & 0 deletions packages/render/src/shared/utils/__snapshots__/pretty.spec.ts.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`pretty > if mso syntax does not wrap 1`] = `
"<!--[if mso]><i style="mso-font-width:100%;mso-text-raise:12" hidden>&#8202;&#8202;</i><![endif]-->
"
`;
11 changes: 11 additions & 0 deletions packages/render/src/shared/utils/pretty.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { pretty } from './pretty';

describe('pretty', () => {
test('if mso syntax does not wrap', async () => {
expect(
await pretty(
`<!--[if mso]><i style="mso-font-width:100%;mso-text-raise:12" hidden>&#8202;&#8202;</i><![endif]-->`,
),
).toMatchSnapshot();
});
});
29 changes: 27 additions & 2 deletions packages/render/src/shared/utils/pretty.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,36 @@
import type { Options } from 'prettier';
import type { Options, Plugin } from 'prettier';
import html from 'prettier/plugins/html';
import { format } from 'prettier/standalone';

const modifiedHtml = { ...html } as Plugin;
if (modifiedHtml.printers) {
// eslint-disable-next-line @typescript-eslint/unbound-method
const previousPrint = modifiedHtml.printers.html.print;
modifiedHtml.printers.html.print = (path, options, print, args) => {
const node = path.getNode() as {
type: string;
sourceSpan: {
start: { file: unknown[]; offset: number; line: number; col: number };
end: { file: unknown[]; offset: number; line: number; col: number };
details: null;
};
};

if (node.type === 'ieConditionalComment') {
return options.originalText.slice(
node.sourceSpan.start.offset,
node.sourceSpan.end.offset,
);
}
return previousPrint(path, options, print, args);
};
}

const defaults: Options = {
endOfLine: 'lf',
tabWidth: 2,
plugins: [html],
plugins: [modifiedHtml],
bracketSameLine: true,
parser: 'html',
};

Expand Down

0 comments on commit ed2fa33

Please sign in to comment.