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

package/src/components/toolbar.tsx

@@ -3,13 +3,15 @@ import * as Tabs from '@radix-ui/react-tabs';
 import { LayoutGroup } from 'framer-motion';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { use, useEffect } from 'react';
+import type { CompatibilityCheckingResult } from '../actions/email-validation/check-compatibility';
 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 { IconScanner } from './icons/icon-scanner';
-import { IconScissors } from './icons/icon-scissors';
+import { Compatibility, useCompatibility } from './toolbar/compatibility';
 import { Linter, type LintingRow, useLinter } from './toolbar/linter';
 import {
   SpamAssassin,
@@ -19,11 +21,12 @@ import {
 import { ToolbarButton } from './toolbar/toolbar-button';
 import { useCachedState } from './toolbar/use-cached-state';
 
-export type ToolbarTabValue = 'linter' | 'spam-assassin';
+export type ToolbarTabValue = 'linter' | 'compatibility' | 'spam-assassin';
 
 const ToolbarInner = ({
   serverLintingRows,
   serverSpamCheckingResult,
+  serverCompatibilityResults,
 
   markup,
   reactMarkup,
@@ -54,30 +57,42 @@ const ToolbarInner = ({
     } else {
       params.set('toolbar-panel', newValue);
     }
-    router.push(`${pathname}?${params.toString()}`);
+    router.push(`${pathname}?${params.toString()}${location.hash}`);
   };
 
   const [cachedSpamCheckingResult, setCachedSpamCheckingResult] =
     useCachedState<SpamCheckingResult>(
       `spam-assassin-${emailSlug.replaceAll('/', '-')}`,
     );
-  const [spamCheckingResult, { load: loadSpamChecking }] = useSpamAssassin({
-    markup,
-    plainText,
+  const [spamCheckingResult, { load: loadSpamChecking, loading: spamLoading }] =
+    useSpamAssassin({
+      markup,
+      plainText,
 
-    initialResult: serverSpamCheckingResult ?? cachedSpamCheckingResult,
-  });
+      initialResult: serverSpamCheckingResult ?? cachedSpamCheckingResult,
+    });
 
   const [cachedLintingRows, setCachedLintingRows] = useCachedState<
     LintingRow[]
   >(`linter-${emailSlug.replaceAll('/', '-')}`);
-  const [lintingRows, { load: loadLinting }] = useLinter({
-    reactMarkup,
-    emailPath,
+  const [lintingRows, { load: loadLinting, loading: lintLoading }] = useLinter({
     markup,
 
     initialRows: serverLintingRows ?? cachedLintingRows,
   });
+  const [cachedCompatibilityResults, setCachedCompatibilityResults] =
+    useCachedState<CompatibilityCheckingResult[]>(
+      `compatibility-${emailSlug.replaceAll('/', '-')}`,
+    );
+  const [
+    compatibilityCheckingResults,
+    { load: loadCompatibility, loading: compatibilityLoading },
+  ] = useCompatibility({
+    emailPath,
+    reactMarkup,
+
+    initialResults: serverCompatibilityResults ?? cachedCompatibilityResults,
+  });
 
   if (!isBuilding) {
     useEffect(() => {
@@ -87,6 +102,9 @@ const ToolbarInner = ({
 
         const spamCheckingResult = await loadSpamChecking();
         setCachedSpamCheckingResult(spamCheckingResult);
+
+        const compatibilityCheckingResults = await loadCompatibility();
+        setCachedCompatibilityResults(compatibilityCheckingResults);
       })();
     }, []);
   }
@@ -95,49 +113,76 @@ const ToolbarInner = ({
     <div
       data-toggled={toggled}
       className={cn(
-        'bg-black group/toolbar text-xs text-slate-11 h-48 transition-all',
-        'data-[toggled=false]:h-8',
+        '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]',
       )}
     >
       <Tabs.Root
-        value={activeTab}
+        value={activeTab ?? ''}
         onValueChange={(newValue) => {
           setActivePanelValue(newValue as ToolbarTabValue);
         }}
         asChild
       >
         <div className="flex flex-col h-full">
-          <Tabs.List className="flex gap-4 px-2 border-b border-solid border-slate-6 h-7 w-full">
+          <Tabs.List className="flex gap-4 px-4 border-b border-solid border-slate-6 h-10 w-full flex-shrink-0">
             <LayoutGroup id="toolbar">
-              <Tabs.Trigger asChild value="spam-assassin">
-                <ToolbarButton active={activeTab === 'spam-assassin'}>
-                  <IconScissors />
-                  Spam Assassin
-                </ToolbarButton>
-              </Tabs.Trigger>
               <Tabs.Trigger asChild value="linter">
                 <ToolbarButton active={activeTab === 'linter'}>
-                  <IconScanner />
                   Linter
                 </ToolbarButton>
               </Tabs.Trigger>
+              <Tabs.Trigger asChild value="compatibility">
+                <ToolbarButton active={activeTab === 'compatibility'}>
+                  Compatibility
+                </ToolbarButton>
+              </Tabs.Trigger>
+              <Tabs.Trigger asChild value="spam-assassin">
+                <ToolbarButton active={activeTab === 'spam-assassin'}>
+                  Spam
+                </ToolbarButton>
+              </Tabs.Trigger>
             </LayoutGroup>
-            <div className="flex gap-1 ml-auto">
+            <div className="flex gap-0.5 ml-auto">
+              <ToolbarButton
+                delayDuration={0}
+                tooltip={
+                  (activeTab === 'linter' &&
+                    'The Linter tab checks all the images and links for common issues like missing alt text, broken URLs, insecure HTTP methods, and more.') ||
+                  (activeTab === 'spam-assassin' &&
+                    'The Spam tab will look at the content and use a robust scoring framework to determine if the email is likely to be spam. Powered by SpamAssassin.') ||
+                  (activeTab === 'compatibility' &&
+                    'The Compatibility tab shows how well the HTML/CSS is supported across mail clients like Outlook, Gmail, etc. Powered by Can I Email.') ||
+                  'Info'
+                }
+              >
+                <IconInfo size={24} />
+              </ToolbarButton>
               {isBuilding ? null : (
                 <ToolbarButton
                   tooltip="Reload"
+                  disabled={lintLoading || spamLoading}
                   onClick={async () => {
                     if (activeTab === undefined) {
                       setActivePanelValue('linter');
                     }
                     if (activeTab === 'spam-assassin') {
                       await loadSpamChecking();
-                    } else {
+                    } else if (activeTab === 'linter') {
                       await loadLinting();
+                    } else if (activeTab === 'compatibility') {
+                      await loadCompatibility();
                     }
                   }}
                 >
-                  <IconReload />
+                  <IconReload
+                    size={24}
+                    className={cn({
+                      'animate-spin opacity-60 animate-spin-fast':
+                        lintLoading || spamLoading,
+                    })}
+                  />
                 </ToolbarButton>
               )}
               <ToolbarButton
@@ -150,17 +195,65 @@ const ToolbarInner = ({
                   }
                 }}
               >
-                <IconArrowDown className="transition-transform group-data-[toggled=false]/toolbar:rotate-180" />
+                <IconArrowDown
+                  size={24}
+                  className="transition-transform group-data-[toggled=false]/toolbar:rotate-180"
+                />
               </ToolbarButton>
             </div>
           </Tabs.List>
 
-          <div className="flex-grow transition-opacity opacity-100 group-data-[toggled=false]/toolbar:opacity-0 overflow-y-auto px-2">
+          <div className="flex-grow transition-opacity opacity-100 group-data-[toggled=false]/toolbar:opacity-0 overflow-y-auto px-2 pt-3">
             <Tabs.Content value="linter">
-              <Linter rows={lintingRows} />
+              {lintLoading ? (
+                <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 ?? []} />
+              )}
+            </Tabs.Content>
+            <Tabs.Content value="compatibility">
+              {compatibilityLoading ? (
+                <div className="animate-pulse text-slate-11 text-sm pt-1">
+                  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>
+              ) : (
+                <Compatibility results={compatibilityCheckingResults ?? []} />
+              )}
             </Tabs.Content>
             <Tabs.Content value="spam-assassin">
-              <SpamAssassin result={spamCheckingResult} />
+              {spamLoading ? (
+                <div className="animate-pulse text-slate-11 text-sm pt-1">
+                  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>
+              ) : (
+                <SpamAssassin result={spamCheckingResult} />
+              )}
             </Tabs.Content>
           </div>
         </div>
@@ -169,14 +262,42 @@ 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;
+  serverCompatibilityResults: CompatibilityCheckingResult[] | undefined;
 }
 
 export const Toolbar = ({
   serverLintingRows,
   serverSpamCheckingResult,
+  serverCompatibilityResults,
 }: ToolbarProps) => {
   const { emailPath, emailSlug, renderedEmailMetadata } = use(PreviewContext)!;
 
@@ -192,6 +313,7 @@ export const Toolbar = ({
       plainText={plainText}
       serverLintingRows={serverLintingRows}
       serverSpamCheckingResult={serverSpamCheckingResult}
+      serverCompatibilityResults={serverCompatibilityResults}
     />
   );
 };

package/src/components/tooltip-content.tsx

@@ -18,7 +18,7 @@ export const TooltipContent = React.forwardRef<
       {...props}
       className={cn(
         'z-20 rounded-md border border-slate-6 bg-black px-3 py-2 text-white text-xs',
-        'font-sans',
+        'font-sans max-w-60',
       )}
       ref={forwardedRef}
       sideOffset={sideOffset}

package/src/components/topbar/view-size-controls.tsx

@@ -1,4 +1,3 @@
-'use client';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { motion } from 'framer-motion';
 import * as React from 'react';
@@ -124,7 +123,7 @@ const PresetMenuItem = ({
     onClick={() => onSelect(dimensions)}
   >
     {name}
-    <span className="flex h-fit items-center rounded-full bg-slate-6 px-1.5 py-0.5 font-bold text-white text-xs">
+    <span className="flex h-fit items-center rounded-full bg-slate-6 px-2 py-1 font-medium text-slate-11 text-xs">
       {dimensions.width}x{dimensions.height}
     </span>
   </DropdownMenu.Item>

package/src/components/topbar.tsx

@@ -16,7 +16,7 @@ export const Topbar = ({ emailTitle, children }: TopbarProps) => {
 
   return (
     <Tooltip.Provider>
-      <header className="relative flex h-[3.3125rem] items-center justify-between gap-3 border-slate-6 border-b px-3">
+      <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">
           <Tooltip>
             <Tooltip.Trigger asChild>
@@ -40,25 +40,6 @@ export const Topbar = ({ emailTitle, children }: TopbarProps) => {
         </div>
         <div className="flex w-full items-center justify-between gap-3 lg:w-fit lg:justify-start">
           {children}
-          {/* {setViewWidth && setViewHeight && viewWidth && viewHeight ? ( */}
-          {/*   <ViewSizeControls */}
-          {/*     setViewHeight={setViewHeight} */}
-          {/*     setViewWidth={setViewWidth} */}
-          {/*     viewHeight={viewHeight} */}
-          {/*     viewWidth={viewWidth} */}
-          {/*   /> */}
-          {/* ) : null} */}
-          {/* {activeView && setActiveView ? ( */}
-          {/*   <ActiveViewToggleGroup */}
-          {/*     activeView={activeView} */}
-          {/*     setActiveView={setActiveView} */}
-          {/*   /> */}
-          {/* ) : null} */}
-          {/* {markup ? ( */}
-          {/*   <div className="flex justify-end"> */}
-          {/*     <Send markup={markup} /> */}
-          {/*   </div> */}
-          {/* ) : null} */}
         </div>
       </header>
     </Tooltip.Provider>

package/src/contexts/fragment-identifier.tsx

@@ -0,0 +1,46 @@
+'use client';
+import { usePathname, useSearchParams } from 'next/navigation';
+import { createContext, use, useEffect, useState } from 'react';
+
+export const FragmentIdentifierContext = createContext<
+  | {
+      identifier: string | undefined;
+
+      update(value: string): void;
+    }
+  | undefined
+>(undefined);
+
+export const useFragmentIdentifier = () => {
+  const value = use(FragmentIdentifierContext);
+  return value?.identifier;
+};
+
+export const FragmentIdentifierProvider = ({
+  children,
+}: { children: React.ReactNode }) => {
+  const [fragmentIdentifier, setFragmentIdentifier] = useState<string>();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const update = () => {
+    setFragmentIdentifier(location.hash);
+  };
+
+  useEffect(() => {
+    update();
+  }, [pathname, searchParams]);
+
+  return (
+    <FragmentIdentifierContext.Provider
+      value={{
+        identifier: fragmentIdentifier,
+        update(value: string) {
+          setFragmentIdentifier(value);
+        },
+      }}
+    >
+      {children}
+    </FragmentIdentifierContext.Provider>
+  );
+};

package/src/hooks/use-fragment-identifier.ts

@@ -0,0 +1,14 @@
+import { usePathname, useSearchParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
+export const useFragmentIdentifier = () => {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const [fragmentIdentifier, setFragmentIdentifier] = useState<string>();
+
+  useEffect(() => {
+    setFragmentIdentifier(global.location?.hash);
+  }, [pathname, searchParams]);
+
+  return fragmentIdentifier;
+};

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/src/utils/caniemail/tailwind/get-tailwind-config.ts

@@ -133,8 +133,6 @@ const getConfigFromImport = async (
     });
   }
 
-  console.log(configModule);
-
   if (
     typeof configModule.value === 'object' &&
     configModule.value !== null &&

package/src/utils/get-email-component.ts

@@ -12,7 +12,7 @@ import type { EmailTemplate as EmailComponent } from './types/email-template';
 import type { ErrorObject } from './types/error-object';
 
 const EmailComponentModule = z.object({
-  default: z.function(),
+  default: z.any(),
   render: z.function(),
   reactEmailCreateReactElement: z.function(),
 });

package/src/utils/get-line-and-column-from-offset.spec.ts

@@ -0,0 +1,11 @@
+import { getLineAndColumnFromOffset } from './get-line-and-column-from-offset';
+
+test('getLineAndColumnFromOffset()', () => {
+  const content = `export default function MyEmail() {
+  return <div className="testing classes to make sure this is not removed" id="my-div" aria-label="my beautiful div">
+    inside the div, should also stay unchanged
+  </div>;
+}`;
+  const offset = content.indexOf('className');
+  expect(getLineAndColumnFromOffset(offset, content)).toEqual([2, 15]);
+});