react-email 4.0.0-alpha.7 → 4.0.0

package/src/components/toolbar/results.tsx

@@ -25,7 +25,7 @@ Results.Row = ({
   return (
     <tr
       className={cn(
-        'border-collapse align-bottom border-slate-6 border-b',
+        'border-collapse align-bottom border-slate-6 border-b last:border-b-0',
         className,
       )}
       {...props}

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';
@@ -22,6 +23,19 @@ import { useCachedState } from './toolbar/use-cached-state';
 
 export type ToolbarTabValue = 'linter' | 'compatibility' | 'spam-assassin';
 
+export const useToolbarState = () => {
+  const searchParams = useSearchParams();
+  const activeTab = (searchParams.get('toolbar-panel') ?? undefined) as
+    | ToolbarTabValue
+    | undefined;
+
+  return {
+    activeTab,
+
+    toggled: activeTab !== undefined,
+  };
+};
+
 const ToolbarInner = ({
   serverLintingRows,
   serverSpamCheckingResult,
@@ -43,11 +57,7 @@ const ToolbarInner = ({
   const searchParams = useSearchParams();
   const router = useRouter();
 
-  const activeTab = (searchParams.get('toolbar-panel') ?? undefined) as
-    | ToolbarTabValue
-    | undefined;
-
-  const toggled = activeTab !== undefined;
+  const { activeTab, toggled } = useToolbarState();
 
   const setActivePanelValue = (newValue: ToolbarTabValue | undefined) => {
     const params = new URLSearchParams(searchParams);
@@ -114,7 +124,7 @@ const ToolbarInner = ({
       className={cn(
         'absolute bottom-0 left-0 right-0',
         'bg-black group/toolbar text-xs text-slate-11 h-52 transition-transform',
-        'data-[toggled=false]:translate-y-[170px]',
+        'data-[toggled=false]:translate-y-[10.625rem]',
       )}
     >
       <Tabs.Root
@@ -155,13 +165,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>
@@ -209,32 +212,50 @@ const ToolbarInner = ({
             </div>
           </Tabs.List>
 
-          <div className="flex-grow transition-opacity opacity-100 group-data-[toggled=false]/toolbar:opacity-0 overflow-y-auto px-2 pt-3">
+          <div className="flex-grow transition-opacity opacity-100 group-data-[toggled=false]/toolbar:opacity-0 overflow-y-auto pr-3 pl-4 pt-3">
             <Tabs.Content value="linter">
               {lintLoading ? (
-                <div className="animate-pulse text-slate-11 text-sm pt-1">
-                  Running linting...
-                </div>
+                <LoadingState message="Analyzing your code for linting issues..." />
+              ) : lintingRows?.length === 0 ? (
+                <SuccessWrapper>
+                  <SuccessIcon />
+                  <SuccessTitle>All good</SuccessTitle>
+                  <SuccessDescription>
+                    No linting issues found.
+                  </SuccessDescription>
+                </SuccessWrapper>
               ) : (
-                <Linter rows={lintingRows} />
+                <Linter rows={lintingRows ?? []} />
               )}
             </Tabs.Content>
-            <Tabs.Content value="spam-assassin">
-              {spamLoading ? (
-                <div className="animate-pulse text-slate-11 text-sm pt-1">
-                  Running spam check...
-                </div>
+            <Tabs.Content value="compatibility">
+              {compatibilityLoading ? (
+                <LoadingState message="Checking email compatibility..." />
+              ) : compatibilityCheckingResults?.length === 0 ? (
+                <SuccessWrapper>
+                  <SuccessIcon />
+                  <SuccessTitle>Great compatibility</SuccessTitle>
+                  <SuccessDescription>
+                    Template should render properly everywhere.
+                  </SuccessDescription>
+                </SuccessWrapper>
               ) : (
-                <SpamAssassin result={spamCheckingResult} />
+                <Compatibility results={compatibilityCheckingResults ?? []} />
               )}
             </Tabs.Content>
-            <Tabs.Content value="compatibility">
-              {compatibilityLoading ? (
-                <div className="animate-pulse text-slate-11 text-sm pt-1">
-                  Running compatibility check...
-                </div>
+            <Tabs.Content value="spam-assassin">
+              {spamLoading ? (
+                <LoadingState message="Evaluating your email for spam indicators..." />
+              ) : spamCheckingResult?.isSpam === false ? (
+                <SuccessWrapper>
+                  <SuccessIcon />
+                  <SuccessTitle>10/10</SuccessTitle>
+                  <SuccessDescription>
+                    Your email is clean of abuse indicators.
+                  </SuccessDescription>
+                </SuccessWrapper>
               ) : (
-                <Compatibility results={compatibilityCheckingResults} />
+                <SpamAssassin result={spamCheckingResult} />
               )}
             </Tabs.Content>
           </div>
@@ -244,6 +265,58 @@ const ToolbarInner = ({
   );
 };
 
+const LoadingState = ({ message }: { message: string }) => {
+  return (
+    <div className="flex flex-col items-center justify-center pt-8">
+      <div className="relative mb-8 flex items-center justify-center">
+        <div className="h-12 w-12 rounded-full bg-gradient-to-br from-cyan-400/80 to-cyan-600/80 opacity-10 blur-xl absolute m-auto left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 animate-pulse" />
+        <div className="h-12 w-12 rounded-full border border-slate-4 absolute m-auto left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
+        <div className="h-10 w-10 rounded-full flex items-center justify-center absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+          <div className="h-5 w-5 rounded-full border-2 border-white/50 border-t-transparent animate-spin-fast" />
+        </div>
+      </div>
+      <h3 className="text-slate-12 font-medium text-base mb-1">Processing</h3>
+      <p className="text-slate-11 text-sm text-center max-w-[320px]">
+        {message}
+      </p>
+    </div>
+  );
+};
+
+const SuccessWrapper = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div className="flex flex-col items-center justify-center pt-8">
+      {children}
+    </div>
+  );
+};
+
+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-[320px]">
+      {children}
+    </p>
+  );
+};
+
 interface ToolbarProps {
   serverSpamCheckingResult: SpamCheckingResult | undefined;
   serverLintingRows: LintingRow[] | undefined;

package/src/components/topbar.tsx

@@ -1,27 +1,39 @@
 'use client';
 
 import { use } from 'react';
+import { cn } from '../utils';
 import { Heading } from './heading';
 import { IconHideSidebar } from './icons/icon-hide-sidebar';
 import { ShellContext } from './shell';
 import { Tooltip } from './tooltip';
 
-interface TopbarProps {
+interface TopbarProps extends React.ComponentProps<'header'> {
   emailTitle: string;
   children: React.ReactNode;
 }
 
-export const Topbar = ({ emailTitle, children }: TopbarProps) => {
+export const Topbar = ({
+  emailTitle,
+  children,
+  className,
+  ...props
+}: TopbarProps) => {
   const { toggleSidebar } = use(ShellContext)!;
 
   return (
     <Tooltip.Provider>
-      <header className="relative flex h-[3.3125rem] items-center justify-between gap-3 border-slate-6 border-b px-3 py-2">
-        <div className="relative flex w-fit items-center gap-3">
+      <header
+        {...props}
+        className={cn(
+          'flex h-14 items-center justify-between gap-3 border-slate-6 border-b px-3 py-2',
+          className,
+        )}
+      >
+        <div className="flex w-fit items-center gap-3">
           <Tooltip>
             <Tooltip.Trigger asChild>
               <button
-                className="relative hidden rounded-lg px-2 py-2 text-slate-11 transition duration-200 ease-in-out hover:bg-slate-5 hover:text-slate-12 lg:flex"
+                className="hidden rounded-lg px-2 py-2 text-slate-11 transition duration-200 ease-in-out hover:bg-slate-5 hover:text-slate-12 lg:flex"
                 onClick={() => {
                   toggleSidebar();
                 }}

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;

package/tailwind.config.ts

@@ -82,6 +82,14 @@ const config: Config = {
           '0%': { strokeDashoffset: '1000' },
           '100%': { strokeDashoffset: '0' },
         },
+        spin: {
+          '0%': { transform: 'rotate(0deg)' },
+          '100%': { transform: 'rotate(360deg)' },
+        },
+      },
+      animation: {
+        'spin-slow': 'spin 3s linear infinite',
+        'spin-fast': 'spin 1.5s linear infinite',
       },
     },
   },