From 609e387c6d0991d252d574294645a4e69c118d83 Mon Sep 17 00:00:00 2001 From: Paul Ehikhuemen <67395687+lordelogos@users.noreply.github.com> Date: Wed, 17 Apr 2024 13:57:06 +0100 Subject: [PATCH 01/41] feat(jsx-email): add `rem-to-px` preset to `unoconfig` (#189) --- .../.snapshots/smoke.spec.ts-Code-chromium.snap | 2 +- .../smoke.spec.ts-Tailwind-chromium.snap | 10 +++++----- packages/jsx-email/package.json | 1 + .../src/components/tailwind/tailwind.tsx | 3 +++ .../test/render/.snapshots/render.test.tsx.snap | 16 ++++++++-------- .../tailwind/.snapshots/tailwind.test.tsx.snap | 16 ++++++++-------- pnpm-lock.yaml | 15 ++++++++++++++- 7 files changed, 40 insertions(+), 23 deletions(-) diff --git a/apps/test/tests/.snapshots/smoke.spec.ts-Code-chromium.snap b/apps/test/tests/.snapshots/smoke.spec.ts-Code-chromium.snap index 44f918bc..369e70ee 100644 --- a/apps/test/tests/.snapshots/smoke.spec.ts-Code-chromium.snap +++ b/apps/test/tests/.snapshots/smoke.spec.ts-Code-chromium.snap @@ -42,7 +42,7 @@ } .rounded { - border-radius: 0.25rem; + border-radius: 4px; } .border-solid { diff --git a/apps/test/tests/.snapshots/smoke.spec.ts-Tailwind-chromium.snap b/apps/test/tests/.snapshots/smoke.spec.ts-Tailwind-chromium.snap index 26a939c6..ec4e3eaf 100644 --- a/apps/test/tests/.snapshots/smoke.spec.ts-Tailwind-chromium.snap +++ b/apps/test/tests/.snapshots/smoke.spec.ts-Tailwind-chromium.snap @@ -8,13 +8,13 @@ } .px-3 { - padding-left: 0.75rem; - padding-right: 0.75rem; + padding-left: 12px; + padding-right: 12px; } .py-2 { - padding-top: 0.5rem; - padding-bottom: 0.5rem; + padding-top: 8px; + padding-bottom: 8px; } .text-white { @@ -26,7 +26,7 @@ } .leading-4 { - line-height: 1rem; + line-height: 16px; } diff --git a/packages/jsx-email/package.json b/packages/jsx-email/package.json index 2ed73a02..02ef982a 100644 --- a/packages/jsx-email/package.json +++ b/packages/jsx-email/package.json @@ -51,6 +51,7 @@ "@jsx-email/minify-preset": "workspace:^", "@radix-ui/react-slot": "1.0.2", "@unocss/core": "^0.58.3", + "@unocss/preset-rem-to-px": "^0.59.3", "@unocss/preset-typography": "^0.58.3", "@unocss/preset-uno": "^0.58.3", "@unocss/preset-wind": "^0.58.3", diff --git a/packages/jsx-email/src/components/tailwind/tailwind.tsx b/packages/jsx-email/src/components/tailwind/tailwind.tsx index 8f9815c3..20909796 100644 --- a/packages/jsx-email/src/components/tailwind/tailwind.tsx +++ b/packages/jsx-email/src/components/tailwind/tailwind.tsx @@ -3,6 +3,7 @@ import { createGenerator, type ConfigBase } from '@unocss/core'; import { presetTypography } from '@unocss/preset-typography'; import { presetWind } from '@unocss/preset-wind'; import { presetUno } from '@unocss/preset-uno'; +import { presetRemToPx } from '@unocss/preset-rem-to-px'; import transformerCompileClass from '@unocss/transformer-compile-class'; import transformerVariantGroup from '@unocss/transformer-variant-group'; import MagicString from 'magic-string'; @@ -51,6 +52,8 @@ const getUno = (config: ConfigBase, production: boolean) => { const presets = [ ...(config.presets || []), + // Convert all `rem` values to `px` + presetRemToPx(), presetTypography(), presetUno({ dark: 'media' }), presetWind() diff --git a/packages/jsx-email/test/render/.snapshots/render.test.tsx.snap b/packages/jsx-email/test/render/.snapshots/render.test.tsx.snap index b095e342..6b4adf96 100644 --- a/packages/jsx-email/test/render/.snapshots/render.test.tsx.snap +++ b/packages/jsx-email/test/render/.snapshots/render.test.tsx.snap @@ -157,15 +157,15 @@ exports[`render > renders the vercel demo template 1`] = ` .border-separate{border-collapse:separate;} .border{border-width:1px;} .border-\\\\[\\\\#eaeaea\\\\]{border-color:rgb(234,234,234);} -.rounded{border-radius:0.25rem;} +.rounded{border-radius:4px;} .rounded-full{border-radius:9999px;} .border-solid{border-style:solid;} .bg-\\\\[\\\\#000000\\\\]{background-color:rgb(0,0,0);} .bg-white{background-color:rgb(255,255,255);} .p-\\\\[20px\\\\]{padding:20px;} .p-0{padding:0;} -.px-5{padding-left:1.25rem;padding-right:1.25rem;} -.py-3{padding-top:0.75rem;padding-bottom:0.75rem;} +.px-5{padding-left:20px;padding-right:20px;} +.py-3{padding-top:12px;padding-bottom:12px;} .text-center{text-align:center;} .\\\\!text-\\\\[12px\\\\]{font-size:12px !important;} .\\\\!text-\\\\[14px\\\\]{font-size:14px !important;} @@ -261,7 +261,7 @@ exports[`render > renders the vercel demo template 2`] = ` } .rounded { - border-radius: 0.25rem; + border-radius: 4px; } .rounded-full { @@ -289,13 +289,13 @@ exports[`render > renders the vercel demo template 2`] = ` } .px-5 { - padding-left: 1.25rem; - padding-right: 1.25rem; + padding-left: 20px; + padding-right: 20px; } .py-3 { - padding-top: 0.75rem; - padding-bottom: 0.75rem; + padding-top: 12px; + padding-bottom: 12px; } .text-center { diff --git a/packages/jsx-email/test/tailwind/.snapshots/tailwind.test.tsx.snap b/packages/jsx-email/test/tailwind/.snapshots/tailwind.test.tsx.snap index 0dd34717..b4fb40e1 100644 --- a/packages/jsx-email/test/tailwind/.snapshots/tailwind.test.tsx.snap +++ b/packages/jsx-email/test/tailwind/.snapshots/tailwind.test.tsx.snap @@ -8,10 +8,10 @@ exports[` component > should preserve mso styles 1`] = ` .sm\\\\:bg-red-50{background-color:rgb(254,242,242);} @media (min-width: 640px){ .sm\\\\:bg-red-50{background-color:rgb(254,242,242);}} -.sm\\\\:text-sm{font-size:0.875rem;line-height:1.25rem;} +.sm\\\\:text-sm{font-size:14px;line-height:20px;} } @media (min-width: 768px){ -.md\\\\:text-lg{font-size:1.125rem;line-height:1.75rem;} +.md\\\\:text-lg{font-size:18px;line-height:28px;} }" `; @@ -38,14 +38,14 @@ exports[` component > should work with calc() with + sign 1`] = ` "
something tall
" `; exports[`Custom theme config > should be able to use custom border radius 1`] = ` "
" +.rounded-4xl{border-radius:32px;}" `; exports[`Custom theme config > should be able to use custom colors 1`] = ` @@ -65,7 +65,7 @@ exports[`Custom theme config > should be able to use custom fonts 1`] = ` exports[`Custom theme config > should be able to use custom spacing 1`] = ` "
" +.m-8xl{margin:1536px;}" `; exports[`Custom theme config > should be able to use custom text alignment 1`] = ` @@ -77,7 +77,7 @@ exports[`Custom theme config > should be able to use custom text alignment 1`] = exports[`Production mode > should generate class names with a prefix 1`] = ` "
" +.je-5wyw0k{background-color:rgb(254,226,226);font-size:14px;line-height:20px;}" `; exports[`Responsive styles > should add css to 1`] = ` @@ -152,7 +152,7 @@ exports[`Tailwind component > Inline styles > should render children with inline "
" +.text-sm{font-size:14px;line-height:20px;}
" `; exports[`Tailwind component > should be able to use background image 1`] = ` @@ -164,7 +164,7 @@ exports[`Tailwind component > should be able to use background image 1`] = ` exports[`Tailwind component > should preserve component inline styles with Tailwind styles 1`] = ` "
" +.\\\\!w-12{width:48px !important;}" `; exports[`Tailwind component > should preserve inline styles with Tailwind classes 1`] = ` diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index dbd84c59..00b2e1be 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -249,6 +249,9 @@ importers: '@unocss/core': specifier: ^0.58.3 version: 0.58.3 + '@unocss/preset-rem-to-px': + specifier: ^0.59.3 + version: 0.59.3 '@unocss/preset-typography': specifier: ^0.58.3 version: 0.58.3 @@ -3160,6 +3163,10 @@ packages: resolution: {integrity: sha512-qbPqL+46hf1/UelQOwUwpAuvm6buoss43DPYHOPdfNJ+NTWkSpATQMF0JKT04QE0QRQbHNSHdMe9ariG+IIlCw==} dev: false + /@unocss/core@0.59.3: + resolution: {integrity: sha512-G9+1pmQB65KnGj2tvshcMGYs1aqiaw9FWb8cxMRLvQyquuOU/JdULD9vuuchXQ+DLYPTZ4vgDmMJefBJT6JDVw==} + dev: false + /@unocss/extractor-arbitrary-variants@0.58.3: resolution: {integrity: sha512-QszC2atLcvzyoZFsjgtMBbILN4lrYI60iVRWdii+GGiKVtoIaKRWiA/3WERkvYGVPseVWOMflUpfxNeq+s9zUw==} dependencies: @@ -3228,6 +3235,12 @@ packages: '@unocss/rule-utils': 0.58.5 dev: false + /@unocss/preset-rem-to-px@0.59.3: + resolution: {integrity: sha512-tTp28cdFpj+BYmv2fHS9R+QlVl2Z1R/SMTpISVQqLWHV1zYBF9sgaR2r77bX3EVnCDGcF62gmpGsgMvKyxEACA==} + dependencies: + '@unocss/core': 0.59.3 + dev: false + /@unocss/preset-tagify@0.58.5: resolution: {integrity: sha512-UB9IXi8vA/SzmmRLMWR7bzeBpxpiRo7y9xk3ruvDddYlsyiwIeDIMwG23YtcA6q41FDQvkrmvTxUEH9LFlv6aA==} dependencies: @@ -3297,7 +3310,7 @@ packages: resolution: {integrity: sha512-0Px9gIW+VOKetZuYET19uamIRpk7A9c8sCzQuGlNvCLXKEWamqXz5asLtnvPzw6SwCXEQDgWXE9i+aeoXaM0Jg==} engines: {node: '>=14'} dependencies: - '@unocss/core': 0.58.3 + '@unocss/core': 0.58.5 magic-string: 0.30.5 dev: false From bd75c728dc8afd49eee524ea5349fe3b6440ef3f Mon Sep 17 00:00:00 2001 From: Paul Ehikhuemen <67395687+lordelogos@users.noreply.github.com> Date: Wed, 17 Apr 2024 13:57:53 +0100 Subject: [PATCH 02/41] feat(jsx-email): add meta tags to `head` and update test suite (#187) --- .../smoke.spec.ts-Base-chromium.snap | 9 +++++++++ .../smoke.spec.ts-Code-chromium.snap | 9 +++++++++ docs/components/head.md | 17 ++++++++++++++++- packages/jsx-email/src/components/head.tsx | 15 +++++++++++++-- .../test/.snapshots/debug.test.tsx.snap | 3 +++ .../test/.snapshots/head.test.tsx.snap | 4 ++-- packages/jsx-email/test/head.test.tsx | 12 ++++++++++++ .../render/.snapshots/render.test.tsx.snap | 19 ++++++++++++++----- .../.snapshots/tailwind-head.test.tsx.snap | 5 ++++- .../.snapshots/tailwind.test.tsx.snap | 4 ++-- 10 files changed, 84 insertions(+), 13 deletions(-) diff --git a/apps/test/tests/.snapshots/smoke.spec.ts-Base-chromium.snap b/apps/test/tests/.snapshots/smoke.spec.ts-Base-chromium.snap index d3077b9b..6ec298d1 100644 --- a/apps/test/tests/.snapshots/smoke.spec.ts-Base-chromium.snap +++ b/apps/test/tests/.snapshots/smoke.spec.ts-Base-chromium.snap @@ -21,6 +21,15 @@ http-equiv="Content-Type" content="text/html; charset=UTF-8" > + + + " `; diff --git a/packages/jsx-email/test/head.test.tsx b/packages/jsx-email/test/head.test.tsx index 4343ee03..a6de174d 100644 --- a/packages/jsx-email/test/head.test.tsx +++ b/packages/jsx-email/test/head.test.tsx @@ -16,6 +16,12 @@ describe(' component', async () => { expect(html).toContain(testMessage); }); + it('renders meta tags correctly', async () => { + const testMessage = 'Test message'; + const html = await jsxToString({testMessage}); + expect(html).toContain(testMessage); + }); + it('renders correctly', async () => { const actualOutput = await jsxToString(); expect(actualOutput).toMatchSnapshot(); @@ -33,4 +39,10 @@ describe(' component', async () => { ); expect(actualOutput).toMatchSnapshot(); }); + + it('renders meta format-detection conditionally', async () => { + const testMessage = 'Test message'; + const html = await jsxToString({testMessage}); + expect(html).toContain(testMessage); + }); }); diff --git a/packages/jsx-email/test/render/.snapshots/render.test.tsx.snap b/packages/jsx-email/test/render/.snapshots/render.test.tsx.snap index 6b4adf96..978e93db 100644 --- a/packages/jsx-email/test/render/.snapshots/render.test.tsx.snap +++ b/packages/jsx-email/test/render/.snapshots/render.test.tsx.snap @@ -17,7 +17,7 @@ exports[`render > converts to plain text using options 1`] = ` THIS SHOULD BE RENDERED IN PLAIN TEXT" `; -exports[`render > renders the airbnb demo template 1`] = `"
Read undefined's review
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
\\"Airbnb\\"

Here's what wrote

Now that the review period is over, we’ve posted ’s review to your Airbnb profile.

While it’s too late to write a review of your own, you can send your feedback to using your Airbnb message thread.

Send My Feedback

Common questions

How do reviews work?

How do star ratings work?

Can I leave a review after 14 days?

Airbnb, Inc., 888 Brannan St, San Francisco, CA 94103

Report unsafe behavior
"`; +exports[`render > renders the airbnb demo template 1`] = `"
Read undefined's review
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
\\"Airbnb\\"

Here's what wrote

Now that the review period is over, we’ve posted ’s review to your Airbnb profile.

While it’s too late to write a review of your own, you can send your feedback to using your Airbnb message thread.

Send My Feedback

Common questions

How do reviews work?

How do star ratings work?

Can I leave a review after 14 days?

Airbnb, Inc., 888 Brannan St, San Francisco, CA 94103

Report unsafe behavior
"`; exports[`render > renders the airbnb demo template 2`] = ` " @@ -25,6 +25,9 @@ exports[`render > renders the airbnb demo template 2`] = ` + + + @@ -102,7 +105,7 @@ exports[`render > renders the airbnb demo template 2`] = ` " `; -exports[`render > renders the plaid demo template 1`] = `"
\\"Plaid\\"

Verify Your Identity

Enter the following code to finish linking Venmo.

Not expecting this email?

Contact login@plaid.com if you did not request this code.

Securely powered by Plaid.

"`; +exports[`render > renders the plaid demo template 1`] = `"
\\"Plaid\\"

Verify Your Identity

Enter the following code to finish linking Venmo.

Not expecting this email?

Contact login@plaid.com if you did not request this code.

Securely powered by Plaid.

"`; exports[`render > renders the plaid demo template 2`] = ` " @@ -110,6 +113,9 @@ exports[`render > renders the plaid demo template 2`] = ` + + + @@ -141,7 +147,7 @@ exports[`render > renders the plaid demo template 2`] = ` `; exports[`render > renders the vercel demo template 1`] = ` -""`; +exports[`Tailwind + Head > should not clobber content 1`] = `"test title"`; exports[`Tailwind + Head > should not clobber content 2`] = ` " @@ -8,6 +8,9 @@ exports[`Tailwind + Head > should not clobber content 2`] = ` + + + test title " + }" `; diff --git a/packages/jsx-email/test/head.test.tsx b/packages/jsx-email/test/head.test.tsx index a6de174d..a89b6112 100644 --- a/packages/jsx-email/test/head.test.tsx +++ b/packages/jsx-email/test/head.test.tsx @@ -45,4 +45,11 @@ describe(' component', async () => { const html = await jsxToString({testMessage}); expect(html).toContain(testMessage); }); + + it('renders mso-conditional statement correctly', async () => { + const msoConditional = + ''; + const html = await jsxToString(); + expect(html).toContain(msoConditional); + }); }); From e896365c29ade959ffe1e7d37965403e57574e9f Mon Sep 17 00:00:00 2001 From: lordelogos Date: Mon, 3 Jun 2024 10:25:28 +0100 Subject: [PATCH 23/41] feat: update container and tests --- packages/jsx-email/src/components/container.tsx | 2 +- packages/jsx-email/test/.snapshots/container.test.tsx.snap | 2 +- packages/jsx-email/test/container.test.tsx | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/jsx-email/src/components/container.tsx b/packages/jsx-email/src/components/container.tsx index 574b9faf..44a0587a 100644 --- a/packages/jsx-email/src/components/container.tsx +++ b/packages/jsx-email/src/components/container.tsx @@ -21,7 +21,7 @@ export const Container: JsxEmailComponent = ({ {/* For Outlook versions < 2013: we need a table wrapper width set to `max-width` */} -
` + __html: `` }} /> component > renders correctly 1`] = `"
"`; +exports[` component > renders correctly 1`] = `"
"`; diff --git a/packages/jsx-email/test/container.test.tsx b/packages/jsx-email/test/container.test.tsx index 56904304..4df83a2d 100644 --- a/packages/jsx-email/test/container.test.tsx +++ b/packages/jsx-email/test/container.test.tsx @@ -17,9 +17,9 @@ describe(' component', async () => { }); it('passes style and other props correctly', async () => { - const style = { backgroundColor: 'red', maxWidth: 300 }; + const style = { backgroundColor: 'red' }; const html = await jsxToString( - + Test ); @@ -29,7 +29,7 @@ describe(' component', async () => { it('renders correctly', async () => { const container = await jsxToString( - + ); From 6e13b325ff9e9d75c7894af1aefa6ec6cf32d4f5 Mon Sep 17 00:00:00 2001 From: lordelogos Date: Mon, 3 Jun 2024 10:30:15 +0100 Subject: [PATCH 24/41] feat: update conditional tests --- .../jsx-email/test/.snapshots/conditional.test.tsx.snap | 2 ++ packages/jsx-email/test/conditional.test.tsx | 9 +++++++++ 2 files changed, 11 insertions(+) diff --git a/packages/jsx-email/test/.snapshots/conditional.test.tsx.snap b/packages/jsx-email/test/.snapshots/conditional.test.tsx.snap index 1a51b8ed..beeb2f08 100644 --- a/packages/jsx-email/test/.snapshots/conditional.test.tsx.snap +++ b/packages/jsx-email/test/.snapshots/conditional.test.tsx.snap @@ -6,6 +6,8 @@ exports[` component > renders mso: false 1`] = `" component > renders mso: true 1`] = `""`; +exports[` component > renders with head: true 1`] = `""`; + exports[` component > renders with jsxToString 1`] = `""`; exports[` component > throws on bad props 1`] = `[RangeError: jsx-email: Conditional expects the \`expression\` or \`mso\` prop to be defined]`; diff --git a/packages/jsx-email/test/conditional.test.tsx b/packages/jsx-email/test/conditional.test.tsx index 89b286e0..5d7e1e65 100644 --- a/packages/jsx-email/test/conditional.test.tsx +++ b/packages/jsx-email/test/conditional.test.tsx @@ -19,6 +19,15 @@ describe(' component', async () => { expect(html).toMatchSnapshot(); }); + it('renders with head: true', async () => { + const html = await jsxToString( + +

batman

+ + ); + expect(html).toMatchSnapshot(); + }); + it('renders mso: true', async () => { const html = await render( From 127986563ab6dc32fa23ddd5989c59ad24e33440 Mon Sep 17 00:00:00 2001 From: lordelogos Date: Mon, 3 Jun 2024 10:39:02 +0100 Subject: [PATCH 25/41] feat: update button-legacy and tests --- .../button-legacy/{button.tsx => button-legacy.tsx} | 9 +++++++-- .../test/.snapshots/button-legacy.test.tsx.snap | 5 +++++ .../{button-misc.test.ts => button-legacy-misc.test.ts} | 4 ++-- .../test/{button.test.tsx => button-legacy.test.tsx} | 2 +- 4 files changed, 15 insertions(+), 5 deletions(-) rename packages/jsx-email/src/components/button-legacy/{button.tsx => button-legacy.tsx} (93%) create mode 100644 packages/jsx-email/test/.snapshots/button-legacy.test.tsx.snap rename packages/jsx-email/test/{button-misc.test.ts => button-legacy-misc.test.ts} (97%) rename packages/jsx-email/test/{button.test.tsx => button-legacy.test.tsx} (93%) diff --git a/packages/jsx-email/src/components/button-legacy/button.tsx b/packages/jsx-email/src/components/button-legacy/button-legacy.tsx similarity index 93% rename from packages/jsx-email/src/components/button-legacy/button.tsx rename to packages/jsx-email/src/components/button-legacy/button-legacy.tsx index 993b796d..68d7c7ec 100644 --- a/packages/jsx-email/src/components/button-legacy/button.tsx +++ b/packages/jsx-email/src/components/button-legacy/button-legacy.tsx @@ -46,7 +46,12 @@ const buttonTextStyle = (pb?: number) => { }; }; -export const Button: JsxEmailComponent = ({ children, style, target, ...props }) => { +export const ButtonLegacy: JsxEmailComponent = ({ + children, + style, + target, + ...props +}) => { const parsedPadding = parsePadding(style || {}); let textRaiseTop = ''; let textRaiseBottom: number | undefined; @@ -84,4 +89,4 @@ export const Button: JsxEmailComponent = ({ children, style, target ); }; -Button.displayName = 'Button'; +ButtonLegacy.displayName = 'Button'; diff --git a/packages/jsx-email/test/.snapshots/button-legacy.test.tsx.snap b/packages/jsx-email/test/.snapshots/button-legacy.test.tsx.snap new file mode 100644 index 00000000..bf230755 --- /dev/null +++ b/packages/jsx-email/test/.snapshots/button-legacy.test.tsx.snap @@ -0,0 +1,5 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`
- - - - - - -
- - - - - - -
\\"Airbnb\\"
- - - - - - -
- - - - - - -
-

Here's what wrote

-

-

Now that the review period is over, we’ve posted ’s review to your Airbnb profile.

-

While it’s too late to write a review of your own, you can send your feedback to using your Airbnb message thread.

Send My Feedback - - - - -
-
-
- - - - - - -
-

Common questions

-

How do reviews work?

-

How do star ratings work?

-

Can I leave a review after 14 days?

-
-

Airbnb, Inc., 888 Brannan St, San Francisco, CA 94103

Report unsafe behavior - - - - -
-
-
+
+
+ + + + + + +
+ + + + + + +
\\"Airbnb\\"
+ + + + + + +
+ + + + + + +
+

Here's what wrote

+

+

Now that the review period is over, we’ve posted ’s review to your Airbnb profile.

+

While it’s too late to write a review of your own, you can send your feedback to using your Airbnb message thread.

+ + + + +
+ + + + + + +
Send My Feedback
+
+
+
+ + + + + + +
+

Common questions

+

How do reviews work?

+

How do star ratings work?

+

Can I leave a review after 14 days?

+
+

Airbnb, Inc., 888 Brannan St, San Francisco, CA 94103

Report unsafe behavior + + + + +
+
+
+
+ " `; -exports[`render > renders the plaid demo template 1`] = `"
\\"Plaid\\"

Verify Your Identity

Enter the following code to finish linking Venmo.

Not expecting this email?

Contact login@plaid.com if you did not request this code.

Securely powered by Plaid.

"`; +exports[`render > renders the plaid demo template 1`] = `"
\\"Plaid\\"

Verify Your Identity

Enter the following code to finish linking Venmo.

Not expecting this email?

Contact login@plaid.com if you did not request this code.

Securely powered by Plaid.

"`; exports[`render > renders the plaid demo template 2`] = ` " - + - + - - - - - - -
\\"Plaid\\" -

Verify Your Identity

-

Enter the following code to finish linking Venmo.

- - - - - - -
-

-
-

Not expecting this email?

-

Contact login@plaid.com if you did not request this code.

-
+
+
+ + + + + + +
\\"Plaid\\" +

Verify Your Identity

+

Enter the following code to finish linking Venmo.

+ + + + + + +
+

+
+

Not expecting this email?

+

Contact login@plaid.com if you did not request this code.

+
+
+

Securely powered by Plaid.

@@ -147,7 +176,7 @@ exports[`render > renders the plaid demo template 2`] = ` `; exports[`render > renders the vercel demo template 1`] = ` -"
\\"Vercel\\"

Join on Vercel

Hello,

() has invited you to the team on Vercel.

\\"invited
Join the team

or copy and paste this URL into your browser:

This invitation was intended for .This invite was sent from located in . If you were not expecting this invitation, you can ignore this email. If you are concerned about your account's safety, please reply to this email to get in touch with us.

" +}
\\"Vercel\\"

Join on Vercel

Hello,

() has invited you to the team on Vercel.

\\"invited
Join the team

or copy and paste this URL into your browser:

This invitation was intended for .This invite was sent from located in . If you were not expecting this invitation, you can ignore this email. If you are concerned about your account's safety, please reply to this email to get in touch with us.

" `; exports[`render > renders the vercel demo template 2`] = ` " - + - + "`; +exports[`Tailwind + Head > should not clobber content 1`] = `"test title"`; exports[`Tailwind + Head > should not clobber content 2`] = ` " - + - test title + test title diff --git a/packages/jsx-email/test/tailwind/.snapshots/tailwind.test.tsx.snap b/packages/jsx-email/test/tailwind/.snapshots/tailwind.test.tsx.snap index 82fc9115..13337938 100644 --- a/packages/jsx-email/test/tailwind/.snapshots/tailwind.test.tsx.snap +++ b/packages/jsx-email/test/tailwind/.snapshots/tailwind.test.tsx.snap @@ -1,7 +1,7 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[` component > should preserve mso styles 1`] = ` -"
" `; From 141f052e9a2e268d66e3cca36184fae6dc4ddb51 Mon Sep 17 00:00:00 2001 From: lordelogos Date: Mon, 3 Jun 2024 11:31:33 +0100 Subject: [PATCH 27/41] feat: add button tests --- .../test/.snapshots/button.test.tsx.snap | 10 ++- packages/jsx-email/test/button.test.tsx | 63 +++++++++++++++++++ 2 files changed, 70 insertions(+), 3 deletions(-) create mode 100644 packages/jsx-email/test/button.test.tsx diff --git a/packages/jsx-email/test/.snapshots/button.test.tsx.snap b/packages/jsx-email/test/.snapshots/button.test.tsx.snap index bf230755..ba8fbcac 100644 --- a/packages/jsx-email/test/.snapshots/button.test.tsx.snap +++ b/packages/jsx-email/test/.snapshots/button.test.tsx.snap @@ -1,5 +1,9 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[` + ); + expect(html).toContain(testMessage); + }); + + it('passes props correctly', async () => { + const html = await jsxToString( + + ); + expect(html).toContain('background-color:#cccccc'); + expect(html).toContain('border:2px solid #cccccc'); + expect(html).toContain('border-radius:40px'); + expect(html).toContain('font-size:20px'); + expect(html).toContain('color:#000000'); + expect(html).toContain('data-testid="button-test"'); + }); + + it('renders correctly when nested in ', async () => { + const actualOutput = await jsxToString( + +