react-email 4.0.16 → 4.1.0-canary.10

package/src/utils/caniemail/get-compatibility-stats-for-entry.ts

@@ -1,118 +0,0 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-import type {
-  EmailClient,
-  Platform,
-  SupportEntry,
-} from '../../actions/email-validation/check-compatibility';
-
-export type SupportStatus = DetailedSupportStatus['status'];
-
-export type DetailedSupportStatus =
-  | {
-      status: 'success';
-    }
-  | {
-      status: 'error';
-    }
-  | {
-      status: 'warning';
-      notes: string;
-    };
-
-type EmailClientStats = {
-  status: SupportStatus;
-  perPlatform: Partial<Record<Platform, DetailedSupportStatus>>;
-};
-
-export type CompatibilityStats = {
-  status: SupportStatus;
-  perEmailClient: Partial<Record<EmailClient, EmailClientStats>>;
-};
-
-const noteNumbersRegex = /#(?<noteNumber>\d+)/g;
-
-export const getCompatibilityStatsForEntry = (
-  entry: SupportEntry,
-  emailClients: EmailClient[],
-) => {
-  const stats: CompatibilityStats = {
-    status: 'success',
-    perEmailClient: {},
-  };
-  for (const emailClient of emailClients) {
-    const rawStats = entry.stats[emailClient];
-    if (rawStats) {
-      const emailClientStats: EmailClientStats = {
-        status: 'success',
-        perPlatform: {},
-      };
-
-      for (const [platform, statusPerVersion] of Object.entries(rawStats)) {
-        const latestStatus = statusPerVersion[statusPerVersion.length - 1];
-        if (latestStatus === undefined)
-          throw new Error(
-            'Cannot load in status because there are none recorded for this platform/email client',
-            {
-              cause: {
-                latestStatus,
-                statusPerVersion,
-                platform,
-                emailClient,
-                supportEntry: entry,
-              },
-            },
-          );
-        const statusString = latestStatus[Object.keys(latestStatus)[0]!]!;
-        if (statusString.startsWith('u')) continue;
-        if (statusString.startsWith('a')) {
-          const notes: string[] = [];
-          noteNumbersRegex.lastIndex = 0;
-          for (const match of statusString.matchAll(noteNumbersRegex)) {
-            if (match.groups?.noteNumber) {
-              const { noteNumber } = match.groups;
-              const note = entry.notes_by_num?.[Number.parseInt(noteNumber)];
-              if (note) {
-                notes.push(note);
-              }
-              // else if (isInternalDev) {
-              //   console.warn(
-              //     'Could not get note by the number for a support entry',
-              //     {
-              //       platform,
-              //       statusString,
-              //       note,
-              //     },
-              //   );
-              // }
-            }
-          }
-          if (emailClientStats.status === 'success')
-            emailClientStats.status = 'warning';
-          if (stats.status === 'success') stats.status = 'warning';
-          emailClientStats.perPlatform[platform as Platform] = {
-            status: 'warning',
-            notes:
-              notes.length === 1
-                ? notes[0]!
-                : notes.map((note) => `- ${note}`).join('\n'),
-          };
-        } else if (statusString.startsWith('y')) {
-          emailClientStats.perPlatform[platform as Platform] = {
-            status: 'success',
-          };
-        } else if (statusString.startsWith('n')) {
-          if (emailClientStats.status !== 'error')
-            emailClientStats.status = 'error';
-          if (stats.status !== 'error') stats.status = 'error';
-          emailClientStats.perPlatform[platform as Platform] = {
-            status: 'error',
-          };
-        }
-      }
-
-      stats.perEmailClient[emailClient] = emailClientStats;
-    }
-  }
-
-  return stats;
-};

package/src/utils/caniemail/get-css-functions.ts

@@ -1,25 +0,0 @@
-export function getCssFunctions(title: string) {
-  if (/^[a-zA-Z]\(\)$/.test(title.trim())) {
-    return [title.replace('()', '')];
-  }
-
-  // ex: lch(), oklch(), lab(), oklab()
-  // this regex avoids matching entries that are for CSS properties listed
-  // separated by commas as well
-  if (/^(?:[^(),]+?\(\),?)*$/.test(title.trim())) {
-    return title
-      .split(/\s*,\s*/)
-      .map((functionCallWithoutParameters) =>
-        functionCallWithoutParameters.replace('()', ''),
-      );
-  }
-
-  // ex: CSS calc() function
-  if (/^CSS [a-z]+\(\) function$/.test(title.trim())) {
-    return [
-      title.replace('CSS ', '').replace(' function', '').replace('()', ''),
-    ];
-  }
-
-  return [];
-}

package/src/utils/caniemail/get-css-property-names.ts

@@ -1,32 +0,0 @@
-import { allCssProperties } from './all-css-properties';
-
-export const getCssPropertyNames = (title: string, keywords: string | null) => {
-  if (allCssProperties.includes(title.replace(' property', '')))
-    return [title.replace(' property', '')];
-
-  if (title.split('&').length > 1) {
-    return title
-      .split(/\s*&\s*/)
-      .map((piece) => piece.trim())
-      .filter((possiblePropertyName) =>
-        allCssProperties.includes(possiblePropertyName),
-      );
-  }
-
-  if (title.split(',').length > 1) {
-    return title
-      .split(/\s*,\s*/)
-      .map((piece) => piece.trim())
-      .filter((possiblePropertyName) =>
-        allCssProperties.includes(possiblePropertyName),
-      );
-  }
-
-  if (keywords) {
-    return keywords
-      .split(/\s*,\s*/)
-      .filter((keyword) => allCssProperties.includes(keyword));
-  }
-
-  return [];
-};

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

@@ -1,14 +0,0 @@
-const propertyRegex =
-  /(?<propertyName>[a-z-]+)\s*:\s*(?<propertyValue>[a-zA-Z\-0-9()+*/_ ]+)/;
-
-export const getCssPropertyWithValue = (title: string) => {
-  const match = propertyRegex.exec(title.trim());
-  if (match) {
-    const [_full, propertyName, propertyValue] = match;
-    return {
-      name: propertyName!,
-      value: propertyValue!,
-    };
-  }
-  return undefined;
-};

package/src/utils/caniemail/get-css-unit.ts

@@ -1,3 +0,0 @@
-export const getCssUnit = (title: string) => {
-  return title.endsWith(' unit') ? title.replace(' unit', '') : undefined;
-};

package/src/utils/caniemail/get-element-attributes.ts

@@ -1,7 +0,0 @@
-export function getElementAttributes(title: string) {
-  if (title.endsWith(' attribute')) {
-    return [title.replace(' attribute', '')];
-  }
-
-  return [];
-}

package/src/utils/caniemail/get-element-names.ts

@@ -1,20 +0,0 @@
-export const getElementNames = (title: string, keywords: string | null) => {
-  const match = /<(?<elementName>[^>]*)> element/.exec(title);
-  if (match) {
-    const [_full, elementName] = match;
-
-    if (elementName) {
-      return [elementName];
-    }
-  }
-
-  if (keywords !== null && keywords.length > 0) {
-    return keywords.split(/\s*,\s*/).map((piece) => piece.trim());
-  }
-
-  if (title.split(',').length > 1) {
-    return title.split(/\s*,\s*/).map((piece) => piece.trim());
-  }
-
-  return [];
-};

package/src/utils/caniemail/tailwind/generate-tailwind-rules.ts

@@ -1,30 +0,0 @@
-import postcss from 'postcss';
-import type { Root, Rule } from 'postcss';
-import evaluateTailwindFunctions from 'tailwindcss/lib/lib/evaluateTailwindFunctions';
-import { generateRules as rawGenerateRules } from 'tailwindcss/lib/lib/generateRules';
-import type { JitContext } from 'tailwindcss/lib/lib/setupContextUtils';
-
-export const generateTailwindCssRules = (
-  classNames: string[],
-  tailwindContext: JitContext,
-): { root: Root; rules: Rule[] } => {
-  const bigIntRuleTuples: [bigint, Rule][] = rawGenerateRules(
-    new Set(classNames),
-    tailwindContext,
-  );
-
-  const root = postcss.root({
-    nodes: bigIntRuleTuples.map(([, rule]) => rule),
-  });
-  evaluateTailwindFunctions(tailwindContext)(root);
-
-  const actualRules: Rule[] = [];
-  root.walkRules((rule) => {
-    actualRules.push(rule);
-  });
-
-  return {
-    root,
-    rules: actualRules,
-  };
-};

package/src/utils/caniemail/tailwind/get-tailwind-config.ts

@@ -1,187 +0,0 @@
-import fs from 'node:fs';
-import path from 'node:path';
-import traverse from '@babel/traverse';
-import type { Node } from '@babel/traverse';
-import * as esbuild from 'esbuild';
-import type { Config as TailwindOriginalConfig } from 'tailwindcss';
-import type { AST } from '../../../actions/email-validation/check-compatibility';
-import { isErr } from '../../result';
-import { runBundledCode } from '../../run-bundled-code';
-
-export type TailwindConfig = Pick<
-  TailwindOriginalConfig,
-  | 'important'
-  | 'prefix'
-  | 'separator'
-  | 'safelist'
-  | 'blocklist'
-  | 'presets'
-  | 'future'
-  | 'experimental'
-  | 'darkMode'
-  | 'theme'
-  | 'corePlugins'
-  | 'plugins'
->;
-
-const getFirstExistingFilepath = (filePaths: string[]) => {
-  for (const filePath of filePaths) {
-    if (fs.existsSync(filePath)) {
-      return filePath;
-    }
-  }
-};
-
-type ImportDeclaration = Node & { type: 'ImportDeclaration' };
-
-export const getTailwindConfig = async (
-  sourceCode: string,
-  ast: AST,
-  sourcePath: string,
-): Promise<TailwindConfig> => {
-  const configAttribute = getTailwindConfigNode(ast);
-
-  if (configAttribute) {
-    const configIdentifierName =
-      configAttribute.value?.type === 'JSXExpressionContainer' &&
-      configAttribute.value.expression.type === 'Identifier'
-        ? configAttribute.value.expression.name
-        : undefined;
-    if (configIdentifierName) {
-      const tailwindConfigImport = getImportWithGivenDefaultSpecifier(
-        ast,
-        configIdentifierName,
-      );
-      if (tailwindConfigImport) {
-        return getConfigFromImport(tailwindConfigImport, sourcePath);
-      }
-    }
-
-    const configObjectExpression =
-      configAttribute.value?.type === 'JSXExpressionContainer' &&
-      configAttribute.value.expression.type === 'ObjectExpression'
-        ? configAttribute.value.expression
-        : undefined;
-    if (configObjectExpression?.start && configObjectExpression.end) {
-      const configObjectSourceCode = sourceCode.slice(
-        configObjectExpression.start,
-        configObjectExpression.end,
-      );
-
-      try {
-        const getConfig = new Function(`return ${configObjectSourceCode}`);
-        return getConfig() as TailwindConfig;
-      } catch (exception) {
-        console.warn(exception);
-        console.warn(
-          `Tried reading the config defined directly in the Tailwind component but was unable to, probably because it can't run by itself.`,
-        );
-      }
-    }
-  }
-
-  return {};
-};
-
-const getConfigFromImport = async (
-  tailwindConfigImport: ImportDeclaration,
-  sourcePath: string,
-): Promise<TailwindConfig> => {
-  const configRelativePath = tailwindConfigImport.source.value;
-  const sourceDirpath = path.dirname(sourcePath);
-  const configFilepath = path.join(sourceDirpath, configRelativePath);
-
-  const configBuildResult = await esbuild.build({
-    bundle: true,
-    stdin: {
-      contents: `import tailwindConfig from "${configRelativePath}"; 
-export { tailwindConfig };`,
-      loader: 'tsx',
-      resolveDir: path.dirname(sourcePath),
-    },
-    platform: 'node',
-    write: false,
-    format: 'cjs',
-    logLevel: 'silent',
-  });
-  const configFile = configBuildResult.outputFiles[0];
-  if (configFile === undefined) {
-    throw new Error(
-      'Could not build config file as it was found as undefined, this is most likely a bug, please open an issue.',
-    );
-  }
-  const configModule = runBundledCode(configFile.text, configFilepath);
-  if (isErr(configModule)) {
-    throw new Error(
-      `Error when trying to run the config file: ${configModule.error}`,
-    );
-  }
-
-  if (
-    typeof configModule.value === 'object' &&
-    configModule.value !== null &&
-    'tailwindConfig' in configModule.value
-  ) {
-    return configModule.value.tailwindConfig as TailwindConfig;
-  }
-
-  throw new Error(
-    `Could not read Tailwind config at ${configFilepath} because it doesn't have a default export in it.`,
-    {
-      cause: {
-        configModule,
-        configFilepath,
-      },
-    },
-  );
-};
-
-const getImportWithGivenDefaultSpecifier = (
-  ast: AST,
-  specifierName: string,
-) => {
-  let importNode: ImportDeclaration | undefined;
-  traverse(ast, {
-    ImportDeclaration(nodePath) {
-      if (
-        nodePath.node.specifiers.some(
-          (specifier) =>
-            specifier.type === 'ImportDefaultSpecifier' &&
-            specifier.local.name === specifierName,
-        )
-      ) {
-        importNode = nodePath.node;
-      }
-    },
-  });
-  return importNode;
-};
-
-type JSXAttribute = Node & { type: 'JSXAttribute' };
-
-const getTailwindConfigNode = (ast: AST) => {
-  let tailwindConfigNode: JSXAttribute | undefined;
-  traverse(ast, {
-    JSXOpeningElement(nodePath) {
-      if (
-        nodePath.node.name.type === 'JSXIdentifier' &&
-        nodePath.node.name.name === 'Tailwind'
-      ) {
-        const configAttribute = nodePath.node.attributes.find(
-          (
-            attribute,
-          ): attribute is Node & {
-            type: 'JSXAttribute';
-          } =>
-            attribute.type === 'JSXAttribute' &&
-            attribute.name.type === 'JSXIdentifier' &&
-            attribute.name.name === 'config',
-        );
-        if (configAttribute) {
-          tailwindConfigNode = configAttribute;
-        }
-      }
-    },
-  });
-  return tailwindConfigNode;
-};

package/src/utils/caniemail/tailwind/get-tailwind-metadata.spec.ts

@@ -1,25 +0,0 @@
-import fs from 'node:fs/promises';
-import path from 'node:path';
-import { parse } from '@babel/parser';
-import { getTailwindMetadata } from './get-tailwind-metadata';
-
-describe('getTailwindMetadata()', () => {
-  test('with the netlify-welcome demo email', async () => {
-    const emailPath = path.resolve(
-      __dirname,
-      '../../../../../../apps/demo/emails/welcome/netlify-welcome.tsx',
-    );
-    const reactCode = await fs.readFile(emailPath, 'utf8');
-    const ast = parse(reactCode, {
-      strictMode: false,
-      errorRecovery: true,
-      sourceType: 'unambiguous',
-      plugins: ['jsx', 'typescript', 'decorators'],
-    });
-
-    const tailwindMetadata = getTailwindMetadata(ast, reactCode, emailPath);
-
-    expect(tailwindMetadata).toBeDefined();
-    // console.log(tailwindMetadata);
-  });
-});

package/src/utils/caniemail/tailwind/get-tailwind-metadata.ts

@@ -1,45 +0,0 @@
-import traverse from '@babel/traverse';
-import type { JitContext } from 'tailwindcss/lib/lib/setupContextUtils';
-import type { AST } from '../../../actions/email-validation/check-compatibility';
-import { getTailwindConfig, type TailwindConfig } from './get-tailwind-config';
-import { setupTailwindContext } from './setup-tailwind-context';
-
-export const getTailwindMetadata = async (
-  ast: AST,
-  sourceCode: string,
-  sourcePath: string,
-): Promise<
-  | {
-      hasTailwind: false;
-    }
-  | {
-      hasTailwind: true;
-      config: TailwindConfig;
-      context: JitContext;
-    }
-> => {
-  let hasTailwind = false as boolean;
-  traverse(ast, {
-    JSXOpeningElement(path) {
-      if (
-        path.node.name.type === 'JSXIdentifier' &&
-        path.node.name.name === 'Tailwind'
-      ) {
-        hasTailwind = true;
-      }
-    },
-  });
-
-  if (!hasTailwind) {
-    return { hasTailwind: false };
-  }
-
-  const config = await getTailwindConfig(sourceCode, ast, sourcePath);
-  const context = setupTailwindContext(config);
-
-  return {
-    hasTailwind: true,
-    config,
-    context,
-  };
-};

package/src/utils/caniemail/tailwind/setup-tailwind-context.ts

@@ -1,15 +0,0 @@
-import { createContext } from 'tailwindcss/lib/lib/setupContextUtils';
-import resolveConfig from 'tailwindcss/resolveConfig';
-import type { TailwindConfig } from './get-tailwind-config';
-
-export const setupTailwindContext = (config: TailwindConfig) => {
-  return createContext(
-    resolveConfig({
-      ...config,
-      content: [],
-      corePlugins: {
-        preflight: false,
-      },
-    }),
-  );
-};

package/src/utils/cn.ts

@@ -1,6 +0,0 @@
-import { type ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export const cn = (...inputs: ClassValue[]) => {
-  return twMerge(clsx(inputs));
-};

package/src/utils/constants.ts

@@ -1,6 +0,0 @@
-export const tabTransition = {
-  type: 'spring',
-  stiffness: 2000,
-  damping: 80,
-  mass: 1,
-};

package/src/utils/contains-email-template.spec.ts

@@ -1,124 +0,0 @@
-import {
-  containsEmailTemplate,
-  removeFilenameExtension,
-} from './contains-email-template';
-import type { EmailsDirectory } from './get-emails-directory-metadata';
-
-describe('removeFilenameExtension()', () => {
-  it('should work with a single .', () => {
-    expect(removeFilenameExtension('email-template.tsx')).toBe(
-      'email-template',
-    );
-  });
-
-  it('should work with an example test file', () => {
-    expect(removeFilenameExtension('email-template.spec.tsx')).toBe(
-      'email-template.spec',
-    );
-  });
-
-  it('should do nothing when there is no extension', () => {
-    expect(removeFilenameExtension('email-template')).toBe('email-template');
-  });
-});
-
-describe('containsEmailTemplate()', () => {
-  const directory: EmailsDirectory = {
-    absolutePath: '/fake/path/emails',
-    directoryName: 'emails',
-    relativePath: '',
-    emailFilenames: [],
-    subDirectories: [
-      {
-        absolutePath: '/fake/path/emails/magic-links',
-        directoryName: 'magic-links',
-        relativePath: 'magic-links',
-        emailFilenames: [
-          'aws-verify-email',
-          'linear-login-code',
-          'notion-magic-link',
-          'plaid-verify-identity',
-          'raycast-magic-link',
-          'slack-confirm',
-        ],
-        subDirectories: [
-          {
-            absolutePath: '/fake/path/emails/magic-links/resend',
-            directoryName: 'resend',
-            emailFilenames: ['verify-email'],
-            relativePath: 'magic-links/resend',
-            subDirectories: [],
-          },
-        ],
-      },
-      {
-        absolutePath: '/fake/path/emails/newsletters',
-        directoryName: 'newsletters',
-        relativePath: 'newsletters',
-        emailFilenames: [
-          'codepen-challengers',
-          'google-play-policy-update',
-          'stack-overflow-tips',
-        ],
-        subDirectories: [],
-      },
-      {
-        absolutePath: '/fake/path/emails/notifications',
-        directoryName: 'notifications',
-        relativePath: 'notifications',
-        emailFilenames: [
-          'github-access-token',
-          'papermark-year-in-review',
-          'vercel-invite-user',
-          'yelp-recent-login',
-        ],
-        subDirectories: [],
-      },
-      {
-        absolutePath: '/fake/path/emails/receipts',
-        directoryName: 'receipts',
-        relativePath: 'receipts',
-        emailFilenames: ['apple-receipt', 'nike-receipt'],
-        subDirectories: [],
-      },
-      {
-        absolutePath: '/fake/path/emails/reset-password',
-        directoryName: 'reset-password',
-        relativePath: 'reset-password',
-        emailFilenames: ['dropbox-reset-password', 'twitch-reset-password'],
-        subDirectories: [],
-      },
-      {
-        absolutePath: '/fake/path/emails/reviews',
-        directoryName: 'reviews',
-        relativePath: 'reviews',
-        emailFilenames: ['airbnb-review', 'amazon-review'],
-        subDirectories: [],
-      },
-      {
-        absolutePath: '/fake/path/emails/welcome',
-        directoryName: 'welcome',
-        relativePath: 'welcome',
-        emailFilenames: ['koala-welcome', 'netlify-welcome', 'stripe-welcome'],
-        subDirectories: [],
-      },
-    ],
-  };
-  it('should work with email inside a single sub directory', () => {
-    expect(containsEmailTemplate('welcome/koala-welcome', directory)).toBe(
-      true,
-    );
-    expect(containsEmailTemplate('welcome/missing-template', directory)).toBe(
-      false,
-    );
-  });
-
-  it('should work with email inside a second sub directory', () => {
-    expect(
-      containsEmailTemplate('magic-links/resend/verify-email', directory),
-    ).toBe(true);
-    expect(
-      containsEmailTemplate('magic-links/resend/missing-template', directory),
-    ).toBe(false);
-  });
-});