@react-email/preview-server 1.0.0-canary.0

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

@@ -0,0 +1,91 @@
+import traverse from '@babel/traverse';
+import type { AST } from '../../../actions/email-validation/check-compatibility';
+import { generateTailwindCssRules } from '../tailwind/generate-tailwind-rules';
+import { getTailwindMetadata } from '../tailwind/get-tailwind-metadata';
+import type { ObjectVariables, SourceLocation } from './get-object-variables';
+
+export interface StylePropertyUsage {
+  location: SourceLocation | undefined | null;
+  name: string;
+  value: string;
+}
+
+export const doesPropertyHaveLocation = (
+  prop: StylePropertyUsage,
+): prop is StylePropertyUsage & { location: SourceLocation } => {
+  return prop.location !== undefined && prop.location !== null;
+};
+
+export const getUsedStyleProperties = async (
+  ast: AST,
+  sourceCode: string,
+  sourcePath: string,
+  objectVariables: ObjectVariables,
+) => {
+  const styleProperties: StylePropertyUsage[] = [];
+  const tailwindMetadata = await getTailwindMetadata(
+    ast,
+    sourceCode,
+    sourcePath,
+  );
+
+  if (tailwindMetadata.hasTailwind) {
+    traverse(ast, {
+      JSXAttribute(path) {
+        if (path.node.name.name === 'className') {
+          path.traverse({
+            StringLiteral(stringPath) {
+              const className = stringPath.node.value;
+              const { rules } = generateTailwindCssRules(
+                className.split(' '),
+                tailwindMetadata.context,
+              );
+              for (const rule of rules) {
+                rule.walkDecls((decl) => {
+                  styleProperties.push({
+                    location: stringPath.node.loc,
+                    name: decl.prop,
+                    value: decl.value,
+                  });
+                });
+              }
+            },
+          });
+        }
+      },
+    });
+  }
+
+  traverse(ast, {
+    JSXAttribute(path) {
+      if (
+        path.node.value?.type === 'JSXExpressionContainer' &&
+        path.node.value.expression.type === 'Identifier' &&
+        path.node.name.name === 'style'
+      ) {
+        const styleVariable = objectVariables[path.node.value.expression.name];
+        if (styleVariable) {
+          for (const property of styleVariable) {
+            if (
+              (property.key.type === 'StringLiteral' ||
+                property.key.type === 'Identifier') &&
+              property.value.type === 'StringLiteral'
+            ) {
+              const propertyName =
+                property.key.type === 'StringLiteral'
+                  ? property.key.value
+                  : property.key.name;
+              styleProperties.push({
+                name: propertyName,
+                value: property.value.value,
+                location: property.loc,
+              });
+            }
+          }
+        }
+      }
+    },
+  });
+
+  return styleProperties;
+};

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

@@ -0,0 +1,118 @@
+/* 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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,14 @@
+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

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

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

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

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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,187 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,6 @@
+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

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