react-email 4.0.0-alpha.7 → 4.0.0-alpha.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "4.0.0-alpha.7",
+  "version": "4.0.0-alpha.8",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/cli/index.js"

package/src/actions/email-validation/check-compatibility.ts

@@ -154,7 +154,11 @@ export const checkCompatibility = async (
         );
         if (Object.keys(compatibilityStats.perEmailClient).length === 0)
           continue;
-        if (compatibilityStats.status === 'success') continue;
+        if (
+          compatibilityStats.status === 'success' ||
+          compatibilityStats.status === 'warning'
+        )
+          continue;
 
         if (entry.category === 'html') {
           const entryElements = getElementNames(entry.title, entry.keywords);
@@ -274,8 +278,9 @@ export const checkCompatibility = async (
 
             if (cssEntryType === 'full property') {
               if (
-                property.name === entryFullProperty?.name &&
-                property.value === entryFullProperty.value
+                snakeToCamel(property.name) ===
+                  snakeToCamel(entryFullProperty!.name) &&
+                property.value === entryFullProperty!.value
               ) {
                 addToInsights(property);
                 break;
@@ -302,7 +307,8 @@ export const checkCompatibility = async (
               }
             } else if (
               entryProperties.some(
-                (propertyName) => property.name === propertyName,
+                (propertyName) =>
+                  snakeToCamel(property.name) === snakeToCamel(propertyName),
               )
             ) {
               addToInsights(property);
@@ -318,4 +324,10 @@ export const checkCompatibility = async (
   return readableStream;
 };
 
+const snakeToCamel = (snakeStr: string) => {
+  return snakeStr
+    .toLowerCase()
+    .replace(/-+([a-z])/g, (_match, letter) => letter.toUpperCase());
+};
+
 export type AST = ReturnType<typeof parse>;

package/src/components/sidebar/file-tree-directory-children.tsx

@@ -5,6 +5,7 @@ import { useSearchParams } from 'next/navigation';
 import { cn } from '../../utils';
 import type { EmailsDirectory } from '../../utils/get-emails-directory-metadata';
 import { IconFile } from '../icons/icon-file';
+import { Tooltip } from '../tooltip';
 import { FileTreeDirectory } from './file-tree-directory';
 
 export const FileTreeDirectoryChildren = (props: {
@@ -77,7 +78,7 @@ export const FileTreeDirectoryChildren = (props: {
                         <motion.span
                           animate={{ x: 0, opacity: 1 }}
                           className={cn(
-                            'relative flex h-8 max-w-full items-center gap-2 rounded-md align-middle text-slate-11 text-sm transition-colors duration-100 ease-[cubic-bezier(.6,.12,.34,.96)]',
+                            'relative flex h-8 w-full items-center text-start gap-2 rounded-md align-middle text-slate-11 text-sm transition-colors duration-100 ease-[cubic-bezier(.6,.12,.34,.96)]',
                             props.isRoot ? undefined : 'pl-3',
                             {
                               'text-cyan-11': isCurrentPage,
@@ -116,7 +117,16 @@ export const FileTreeDirectoryChildren = (props: {
                             height="20"
                             width="20"
                           />
-                          <span className="truncate">{emailFilename}</span>
+                          <Tooltip.Provider>
+                            <Tooltip>
+                              <Tooltip.Trigger asChild>
+                                <span className="truncate w-[calc(100%-1.25rem)]">
+                                  {emailFilename}
+                                </span>
+                              </Tooltip.Trigger>
+                              <Tooltip.Content>{emailFilename}</Tooltip.Content>
+                            </Tooltip>
+                          </Tooltip.Provider>
                         </motion.span>
                       </Link>
                     );

package/src/components/sidebar/file-tree-directory.tsx

@@ -7,6 +7,7 @@ import { Heading } from '../heading';
 import { IconArrowDown } from '../icons/icon-arrow-down';
 import { IconFolder } from '../icons/icon-folder';
 import { IconFolderOpen } from '../icons/icon-folder-open';
+import { Tooltip } from '../tooltip';
 import { FileTreeDirectoryChildren } from './file-tree-directory-children';
 
 interface SidebarDirectoryProps {
@@ -51,31 +52,38 @@ export const FileTreeDirectory = ({
     >
       <Collapsible.Trigger
         className={cn(
-          'mt-1 mb-1.5 flex w-full items-center justify-between gap-2 font-medium text-[14px]',
+          'mt-1 mb-1.5 flex w-full items-center text-start justify-between gap-2 font-medium text-[14px]',
           {
             'cursor-pointer': !isEmpty,
           },
         )}
       >
-        <div className="flex items-center gap-2 text-slate-11 transition duration-200 ease-in-out hover:text-slate-12">
-          {open ? (
-            <IconFolderOpen height="20" width="20" />
-          ) : (
-            <IconFolder height="20" width="20" />
-          )}
-          <Heading
-            as="h3"
-            className="transition duration-200 ease-in-out hover:text-slate-12"
-            color="gray"
-            size="2"
-            weight="medium"
-          >
-            {directoryMetadata.directoryName}
-          </Heading>
-        </div>
+        {open ? (
+          <IconFolderOpen className="w-[20px]" height="20" width="20" />
+        ) : (
+          <IconFolder height="20" width="20" />
+        )}
+        <Tooltip.Provider>
+          <Tooltip>
+            <Tooltip.Trigger asChild>
+              <Heading
+                as="h3"
+                className="transition grow w-[calc(100%-40px)] truncate duration-200 ease-in-out hover:text-slate-12"
+                color="gray"
+                size="2"
+                weight="medium"
+              >
+                {directoryMetadata.directoryName}
+              </Heading>
+            </Tooltip.Trigger>
+            <Tooltip.Content>{directoryMetadata.directoryName}</Tooltip.Content>
+          </Tooltip>
+        </Tooltip.Provider>
         {!isEmpty ? (
           <IconArrowDown
-            className="justify-self-end opacity-60 transition-transform data-[open=true]:rotate-180"
+            width="20"
+            height="20"
+            className="ml-auto opacity-60 transition-transform data-[open=true]:rotate-180"
             data-open={open}
           />
         ) : null}

package/src/components/sidebar/file-tree.tsx

@@ -13,8 +13,8 @@ export const FileTree = ({
   emailsDirectoryMetadata,
 }: FileTreeProps) => {
   return (
-    <div className="flex h-full w-full flex-col overflow-hidden lg:w-full lg:min-w-[14.5rem]">
-      <nav className="flex w-full flex-grow flex-col overflow-y-auto p-4 pr-0 pl-0">
+    <div className="flex w-full h-full flex-col lg:w-full lg:min-w-[14.5rem]">
+      <nav className="flex flex-grow flex-col p-4 pr-0 pl-0">
         <Collapsible.Root open>
           <React.Suspense>
             <FileTreeDirectoryChildren

package/src/components/sidebar/sidebar.tsx

@@ -16,28 +16,26 @@ export const Sidebar = ({ className, currentEmailOpenSlug }: SidebarProps) => {
   return (
     <aside
       className={cn(
-        'fixed top-[4.375rem] left-0 z-[9999] h-full max-h-full w-screen max-w-ful overflow-hidden bg-black will-change-auto',
+        'fixed top-[4.375rem] left-0 z-[9999] h-full max-h-full w-screen max-w-full bg-black will-change-auto',
         'lg:static lg:z-auto lg:max-h-screen lg:w-[16rem]',
         className,
       )}
     >
-      <div className="w-full h-full overflow-y-auto overflow-x-hidden">
-        <div className="flex w-full h-full flex-col border-slate-6 border-r">
-          <div
-            className={clsx(
-              'hidden min-h-[3.3125rem] flex-shrink items-center p-3 px-4 lg:flex',
-            )}
-          >
-            <h2>
-              <Logo />
-            </h2>
-          </div>
-          <div className="relative h-full w-full border-slate-4 border-t px-4 pb-3">
-            <FileTree
-              currentEmailOpenSlug={currentEmailOpenSlug}
-              emailsDirectoryMetadata={emailsDirectoryMetadata}
-            />
-          </div>
+      <div className="flex w-full h-full overflow-hidden flex-col border-slate-6 border-r">
+        <div
+          className={clsx(
+            'hidden min-h-[3.3125rem] flex-shrink items-center p-3 px-4 lg:flex',
+          )}
+        >
+          <h2>
+            <Logo />
+          </h2>
+        </div>
+        <div className="relative grow w-full h-full overflow-y-auto overflow-x-hidden border-slate-4 border-t px-4 pb-3">
+          <FileTree
+            currentEmailOpenSlug={currentEmailOpenSlug}
+            emailsDirectoryMetadata={emailsDirectoryMetadata}
+          />
         </div>
       </div>
     </aside>

package/src/components/toolbar/spam-assassin.tsx

@@ -101,19 +101,22 @@ export const SpamAssassin = ({ result }: SpamAssassinProps) => {
             <Results.Column>
               {result.points === 0
                 ? 'Congratulations! Your email is clean of abuse indicators.'
-                : 'Lower scores are better'}
+                : 'Higher scores are better'}
             </Results.Column>
-            <Results.Column
-              className={cn(
-                'text-right text-3xl tracking-tighter font-bold',
-                result.points === 0 ? 'text-green-400' : null,
-                result.points > 0 && result.points <= 1.5 ? null : null,
-                result.points > 1.5 ? 'text-yellow-200' : null,
-                result.points > 3 ? 'text-orange-400' : null,
-                result.points >= 5 ? 'text-red-400' : null,
-              )}
-            >
-              {result.points.toFixed(1)}
+            <Results.Column className="text-right tracking-tighter font-bold">
+              <span
+                className={cn(
+                  'text-3xl',
+                  result.points === 0 ? 'text-green-400' : null,
+                  result.points > 0 && result.points <= 1.5 ? null : null,
+                  result.points > 1.5 ? 'text-yellow-200' : null,
+                  result.points > 3 ? 'text-orange-400' : null,
+                  result.points >= 5 ? 'text-red-400' : null,
+                )}
+              >
+                {(10 - result.points).toFixed(1)}
+              </span>{' '}
+              <span className="text-lg">/ 10</span>
             </Results.Column>
           </Results.Row>
           {toSorted(result.checks, (a, b) => b.points - a.points).map(
@@ -140,7 +143,7 @@ export const SpamAssassin = ({ result }: SpamAssassinProps) => {
                     check.points > 3 ? 'text-red-400' : null,
                   )}
                 >
-                  {check.points.toFixed(1)}
+                  -{check.points.toFixed(1)}
                 </Results.Column>
               </Results.Row>
             ),

package/src/components/toolbar/use-cached-state.ts

@@ -4,7 +4,7 @@ export const useCachedState = <T>(key: string) => {
   let value: T | undefined = undefined;
   if ('localStorage' in global) {
     const storedValue = global.localStorage.getItem(key);
-    if (storedValue !== null) {
+    if (storedValue !== null && storedValue !== 'undefined') {
       try {
         value = JSON.parse(storedValue) as T;
       } catch (exception) {
@@ -12,7 +12,7 @@ export const useCachedState = <T>(key: string) => {
           'Failed to load stored value for',
           key,
           'with value',
-          value,
+          storedValue,
         );
       }
     }

package/src/components/toolbar.tsx

@@ -8,6 +8,7 @@ import { isBuilding } from '../app/env';
 import { PreviewContext } from '../contexts/preview';
 import { cn } from '../utils';
 import { IconArrowDown } from './icons/icon-arrow-down';
+import { IconCheck } from './icons/icon-check';
 import { IconInfo } from './icons/icon-info';
 import { IconReload } from './icons/icon-reload';
 import { Compatibility, useCompatibility } from './toolbar/compatibility';
@@ -155,13 +156,6 @@ const ToolbarInner = ({
                     'The Compatibility tab shows how well the HTML/CSS is supported across mail clients like Outlook, Gmail, etc. Powered by Can I Email.') ||
                   'Info'
                 }
-                onClick={() => {
-                  if (activeTab === undefined) {
-                    setActivePanelValue('linter');
-                  } else {
-                    setActivePanelValue(undefined);
-                  }
-                }}
               >
                 <IconInfo size={24} />
               </ToolbarButton>
@@ -215,26 +209,50 @@ const ToolbarInner = ({
                 <div className="animate-pulse text-slate-11 text-sm pt-1">
                   Running linting...
                 </div>
+              ) : lintingRows?.length === 0 ? (
+                <div className="flex flex-col items-center justify-center pt-8">
+                  <SuccessIcon />
+                  <SuccessTitle>All good</SuccessTitle>
+                  <SuccessDescription>
+                    No linting issues found.
+                  </SuccessDescription>
+                </div>
               ) : (
-                <Linter rows={lintingRows} />
+                <Linter rows={lintingRows ?? []} />
               )}
             </Tabs.Content>
-            <Tabs.Content value="spam-assassin">
-              {spamLoading ? (
+            <Tabs.Content value="compatibility">
+              {compatibilityLoading ? (
                 <div className="animate-pulse text-slate-11 text-sm pt-1">
-                  Running spam check...
+                  Running compatibility check...
+                </div>
+              ) : compatibilityCheckingResults?.length === 0 ? (
+                <div className="flex flex-col items-center justify-center py-8 px-4 my-4">
+                  <SuccessIcon />
+                  <SuccessTitle>Great compatibility</SuccessTitle>
+                  <SuccessDescription>
+                    It should render properly everywhere.
+                  </SuccessDescription>
                 </div>
               ) : (
-                <SpamAssassin result={spamCheckingResult} />
+                <Compatibility results={compatibilityCheckingResults ?? []} />
               )}
             </Tabs.Content>
-            <Tabs.Content value="compatibility">
-              {compatibilityLoading ? (
+            <Tabs.Content value="spam-assassin">
+              {spamLoading ? (
                 <div className="animate-pulse text-slate-11 text-sm pt-1">
-                  Running compatibility check...
+                  Running spam check...
+                </div>
+              ) : spamCheckingResult?.isSpam === false ? (
+                <div className="flex flex-col items-center justify-center py-4 px-4 my-4">
+                  <SuccessIcon />
+                  <SuccessTitle>10/10</SuccessTitle>
+                  <SuccessDescription>
+                    Your email is clean of abuse indicators.
+                  </SuccessDescription>
                 </div>
               ) : (
-                <Compatibility results={compatibilityCheckingResults} />
+                <SpamAssassin result={spamCheckingResult} />
               )}
             </Tabs.Content>
           </div>
@@ -244,6 +262,32 @@ const ToolbarInner = ({
   );
 };
 
+const SuccessIcon = () => {
+  return (
+    <div className="relative mb-8 flex items-center justify-center">
+      <div className="h-16 w-16 rounded-full bg-gradient-to-br from-green-300/20 opacity-80 to-emerald-500/30 blur-md absolute m-auto left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
+      <div className="h-12 w-12 rounded-full bg-gradient-to-br from-green-400/80 opacity-10 to-emerald-600/80 absolute m-auto left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-lg" />
+      <div className="h-10 w-10 rounded-full bg-gradient-to-br from-green-400 to-emerald-600 flex items-center justify-center absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-[inset_0_1px_1px_rgba(255,255,255,0.4)]">
+        <IconCheck size={24} className="text-white drop-shadow-sm" />
+      </div>
+    </div>
+  );
+};
+
+const SuccessTitle = ({ children }) => {
+  return (
+    <h3 className="text-slate-12 font-medium text-base mb-1">{children}</h3>
+  );
+};
+
+const SuccessDescription = ({ children }) => {
+  return (
+    <p className="text-slate-11 text-sm text-center max-w-[300px]">
+      {children}
+    </p>
+  );
+};
+
 interface ToolbarProps {
   serverSpamCheckingResult: SpamCheckingResult | undefined;
   serverLintingRows: LintingRow[] | undefined;

package/src/utils/__snapshots__/get-email-component.spec.ts.snap

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`getEmailComponent() > with a demo email template 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="ltr" lang="en"><head><link rel="preload" as="image" href="/static/vercel-logo.png"/><link rel="preload" as="image" href="/static/vercel-user.png"/><link rel="preload" as="image" href="/static/vercel-arrow.png"/><link rel="preload" as="image" href="/static/vercel-team.png"/><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/><!--$--></head><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, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;;padding-left:0.5rem;padding-right:0.5rem"><div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0">Join Alan on Vercel<div> ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏</div></div><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"><tbody><tr style="width:100%"><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="margin-top:32px"><tbody><tr><td><img alt="Vercel" 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"/></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">Join <strong>Enigma</strong> on <strong>Vercel</strong></h1><p style="color:rgb(0,0,0);font-size:14px;line-height:24px;margin-bottom:16px;margin-top:16px">Hello <!-- -->alanturing<!-- -->,</p><p style="color:rgb(0,0,0);font-size:14px;line-height:24px;margin-bottom:16px;margin-top:16px"><strong>Alan</strong> (<a href="mailto:alan.turing@example.com" style="color:rgb(37,99,235);text-decoration-line:none" target="_blank">alan.turing@example.com</a>) has invited you to the <strong>Enigma</strong> team on<!-- --> <strong>Vercel</strong>.</p><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody><tr><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td align="right" data-id="__react-email-column"><img height="64" src="/static/vercel-user.png" style="border-radius:9999px;display:block;outline:none;border:none;text-decoration:none" 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"/></td><td align="left" data-id="__react-email-column"><img height="64" src="/static/vercel-team.png" style="border-radius:9999px;display:block;outline:none;border:none;text-decoration:none" width="64"/></td></tr></tbody></table></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="text-align:center;margin-top:32px;margin-bottom:32px"><tbody><tr><td><a href="https://vercel.com/teams/invite/foo" 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><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></a></td></tr></tbody></table><p style="color:rgb(0,0,0);font-size:14px;line-height:24px;margin-bottom:16px;margin-top:16px">or copy and paste this URL into your browser:<!-- --> <a href="https://vercel.com/teams/invite/foo" style="color:rgb(37,99,235);text-decoration-line:none" target="_blank">https://vercel.com/teams/invite/foo</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"/><p style="color:rgb(102,102,102);font-size:12px;line-height:24px;margin-bottom:16px;margin-top:16px">This invitation was intended for<!-- --> <span style="color:rgb(0,0,0)">alanturing</span>. This invite was sent from <span style="color:rgb(0,0,0)">204.13.186.218</span> <!-- -->located in<!-- --> <span style="color:rgb(0,0,0)">São Paulo, Brazil</span>. If you were not expecting this invitation, you can ignore this email. If you are concerned about your account&#x27;s safety, please reply to this email to get in touch with us.</p></td></tr></tbody></table><!--/$--></body></html>"`;
+exports[`getEmailComponent() > with a demo email template 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="ltr" lang="en"><head><link rel="preload" as="image" href="/static/vercel-logo.png"/><link rel="preload" as="image" href="/static/vercel-user.png"/><link rel="preload" as="image" href="/static/vercel-arrow.png"/><link rel="preload" as="image" href="/static/vercel-team.png"/><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/><!--$--></head><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, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;;padding-left:0.5rem;padding-right:0.5rem"><div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0">Join Alan on Vercel<div> ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏</div></div><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"><tbody><tr style="width:100%"><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="margin-top:32px"><tbody><tr><td><img alt="Vercel Logo" 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"/></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">Join <strong>Enigma</strong> on <strong>Vercel</strong></h1><p style="color:rgb(0,0,0);font-size:14px;line-height:24px;margin-bottom:16px;margin-top:16px">Hello <!-- -->alanturing<!-- -->,</p><p style="color:rgb(0,0,0);font-size:14px;line-height:24px;margin-bottom:16px;margin-top:16px"><strong>Alan</strong> (<a href="mailto:alan.turing@example.com" style="color:rgb(37,99,235);text-decoration-line:none" target="_blank">alan.turing@example.com</a>) has invited you to the <strong>Enigma</strong> team on<!-- --> <strong>Vercel</strong>.</p><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody><tr><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td align="right" data-id="__react-email-column"><img alt="alanturing&#x27;s profile picture" height="64" src="/static/vercel-user.png" style="border-radius:9999px;display:block;outline:none;border:none;text-decoration:none" width="64"/></td><td align="center" data-id="__react-email-column"><img alt="Arrow indicating invitation" height="9" src="/static/vercel-arrow.png" style="display:block;outline:none;border:none;text-decoration:none" width="12"/></td><td align="left" data-id="__react-email-column"><img alt="Enigma team logo" height="64" src="/static/vercel-team.png" style="border-radius:9999px;display:block;outline:none;border:none;text-decoration:none" width="64"/></td></tr></tbody></table></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="text-align:center;margin-top:32px;margin-bottom:32px"><tbody><tr><td><a href="https://vercel.com" 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><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></a></td></tr></tbody></table><p style="color:rgb(0,0,0);font-size:14px;line-height:24px;margin-bottom:16px;margin-top:16px">or copy and paste this URL into your browser:<!-- --> <a href="https://vercel.com" style="color:rgb(37,99,235);text-decoration-line:none" target="_blank">https://vercel.com</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"/><p style="color:rgb(102,102,102);font-size:12px;line-height:24px;margin-bottom:16px;margin-top:16px">This invitation was intended for<!-- --> <span style="color:rgb(0,0,0)">alanturing</span>. This invite was sent from <span style="color:rgb(0,0,0)">204.13.186.218</span> <!-- -->located in<!-- --> <span style="color:rgb(0,0,0)">São Paulo, Brazil</span>. If you were not expecting this invitation, you can ignore this email. If you are concerned about your account&#x27;s safety, please reply to this email to get in touch with us.</p></td></tr></tbody></table><!--/$--></body></html>"`;

package/src/utils/caniemail/ast/__snapshots__/get-object-variables.spec.ts.snap

@@ -0,0 +1,74 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`getObjectVariables() 1`] = `
+{
+  "buttonStyle": [
+    Node {
+      "computed": false,
+      "end": 91,
+      "key": Node {
+        "end": 84,
+        "loc": SourceLocation {
+          "end": Position {
+            "column": 14,
+            "index": 84,
+            "line": 5,
+          },
+          "filename": undefined,
+          "identifierName": "borderRadius",
+          "start": Position {
+            "column": 2,
+            "index": 72,
+            "line": 5,
+          },
+        },
+        "name": "borderRadius",
+        "start": 72,
+        "type": "Identifier",
+      },
+      "loc": SourceLocation {
+        "end": Position {
+          "column": 21,
+          "index": 91,
+          "line": 5,
+        },
+        "filename": undefined,
+        "identifierName": undefined,
+        "start": Position {
+          "column": 2,
+          "index": 72,
+          "line": 5,
+        },
+      },
+      "method": false,
+      "shorthand": false,
+      "start": 72,
+      "type": "ObjectProperty",
+      "value": Node {
+        "end": 91,
+        "extra": {
+          "raw": "'5px'",
+          "rawValue": "5px",
+        },
+        "loc": SourceLocation {
+          "end": Position {
+            "column": 21,
+            "index": 91,
+            "line": 5,
+          },
+          "filename": undefined,
+          "identifierName": undefined,
+          "start": Position {
+            "column": 16,
+            "index": 86,
+            "line": 5,
+          },
+        },
+        "start": 86,
+        "type": "StringLiteral",
+        "value": "5px",
+      },
+    },
+  ],
+}
+`;

package/src/utils/caniemail/ast/__snapshots__/get-used-style-properties.spec.ts.snap

@@ -0,0 +1,24 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`getUsedStyleProperties() 1`] = `
+[
+  {
+    "location": SourceLocation {
+      "end": Position {
+        "column": 21,
+        "index": 91,
+        "line": 5,
+      },
+      "filename": undefined,
+      "identifierName": undefined,
+      "start": Position {
+        "column": 2,
+        "index": 72,
+        "line": 5,
+      },
+    },
+    "name": "borderRadius",
+    "value": "5px",
+  },
+]
+`;

package/src/utils/caniemail/ast/get-object-variables.spec.ts

@@ -0,0 +1,19 @@
+import { parse } from '@babel/parser';
+import { getObjectVariables } from './get-object-variables';
+
+test('getObjectVariables()', () => {
+  const reactCode = `
+<Button style={buttonStyle}>Click me</Button>
+
+const buttonStyle = {
+  borderRadius: '5px',
+};
+`;
+  const ast = parse(reactCode, {
+    strictMode: false,
+    errorRecovery: true,
+    sourceType: 'unambiguous',
+    plugins: ['jsx', 'typescript', 'decorators'],
+  });
+  expect(getObjectVariables(ast)).toMatchSnapshot();
+});

package/src/utils/caniemail/ast/get-used-style-properties.spec.ts

@@ -0,0 +1,23 @@
+import { parse } from '@babel/parser';
+import { getObjectVariables } from './get-object-variables';
+import { getUsedStyleProperties } from './get-used-style-properties';
+
+test('getUsedStyleProperties()', async () => {
+  const reactCode = `
+<Button style={buttonStyle}>Click me</Button>
+
+const buttonStyle = {
+  borderRadius: '5px',
+};
+`;
+  const ast = parse(reactCode, {
+    strictMode: false,
+    errorRecovery: true,
+    sourceType: 'unambiguous',
+    plugins: ['jsx', 'typescript', 'decorators'],
+  });
+  const objectVariables = getObjectVariables(ast);
+  expect(
+    await getUsedStyleProperties(ast, reactCode, '', objectVariables),
+  ).toMatchSnapshot();
+});

package/src/utils/caniemail/get-css-property-with-value.ts

@@ -6,8 +6,8 @@ export const getCssPropertyWithValue = (title: string) => {
   if (match) {
     const [_full, propertyName, propertyValue] = match;
     return {
-      name: propertyName,
-      value: propertyValue,
+      name: propertyName!,
+      value: propertyValue!,
     };
   }
   return undefined;