react-email 4.1.0-canary.6 → 4.1.0-canary.8

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

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

@@ -1,19 +0,0 @@
-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-object-variables.ts

@@ -1,61 +0,0 @@
-import traverse from '@babel/traverse';
-import type { Node } from '@babel/traverse';
-import type { AST } from '../../../actions/email-validation/check-compatibility';
-
-export interface Position {
-  line: number;
-  column: number;
-  index: number;
-}
-
-export const convertLocationIntoObject = (
-  location: SourceLocation,
-): SourceLocation => {
-  return {
-    start: {
-      line: location.start.line,
-      column: location.start.column,
-      index: location.start.index,
-    },
-    end: {
-      line: location.end.line,
-      column: location.end.column,
-      index: location.end.index,
-    },
-    filename: location.filename,
-    identifierName: location.identifierName,
-  };
-};
-
-export interface SourceLocation {
-  start: Position;
-  end: Position;
-  filename: string;
-  identifierName: string | undefined | null;
-}
-
-type ObjectProperty = Node & { type: 'ObjectProperty' };
-
-export type ObjectVariables = Record<string, ObjectProperty[]>;
-
-export const getObjectVariables = (ast: AST) => {
-  const objectVariables: ObjectVariables = {};
-  traverse(ast, {
-    ObjectExpression(nodePath) {
-      if (nodePath.parent.type === 'VariableDeclarator') {
-        if (nodePath.parent.id.type === 'Identifier') {
-          const variableName = nodePath.parent.id.name;
-          const properties: ObjectProperty[] = [];
-          for (const property of nodePath.node.properties) {
-            if (property.type === 'ObjectProperty') {
-              properties.push(property);
-            }
-          }
-          objectVariables[variableName] = properties;
-        }
-      }
-    },
-  });
-
-  return objectVariables;
-};

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

@@ -1,23 +0,0 @@
-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/ast/get-used-style-properties.ts

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

@@ -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);
-  });
-});