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

package/src/utils/caniemail/all-css-properties.ts

@@ -0,0 +1,358 @@
+// taken from https://www.w3schools.com/cssref/index.php
+export const allCssProperties = [
+  'accent-color',
+  'align-content',
+  'align-items',
+  'align-self',
+  'all',
+  'animation',
+  'animation-delay',
+  'animation-direction',
+  'animation-duration',
+  'animation-fill-mode',
+  'animation-iteration-count',
+  'animation-name',
+  'animation-play-state',
+  'animation-timing-function',
+  'aspect-ratio',
+  'backdrop-filter',
+  'backface-visibility',
+  'background',
+  'background-attachment',
+  'background-blend-mode',
+  'background-clip',
+  'background-color',
+  'background-image',
+  'background-origin',
+  'background-position',
+  'background-position-x',
+  'background-position-y',
+  'background-repeat',
+  'background-size',
+  'block-size',
+  'border',
+  'border-block',
+  'border-block-color',
+  'border-block-end',
+  'border-block-end-color',
+  'border-block-end-style',
+  'border-block-end-width',
+  'border-block-start',
+  'border-block-start-color',
+  'border-block-start-style',
+  'border-block-start-width',
+  'border-block-style',
+  'border-block-width',
+  'border-bottom',
+  'border-bottom-color',
+  'border-bottom-left-radius',
+  'border-bottom-right-radius',
+  'border-bottom-style',
+  'border-bottom-width',
+  'border-collapse',
+  'border-color',
+  'border-end-end-radius',
+  'border-end-start-radius',
+  'border-image',
+  'border-image-outset',
+  'border-image-repeat',
+  'border-image-slice',
+  'border-image-source',
+  'border-image-width',
+  'border-inline',
+  'border-inline-color',
+  'border-inline-end',
+  'border-inline-end-color',
+  'border-inline-end-style',
+  'border-inline-end-width',
+  'border-inline-start',
+  'border-inline-start-color',
+  'border-inline-start-style',
+  'border-inline-start-width',
+  'border-inline-style',
+  'border-inline-width',
+  'border-left',
+  'border-left-color',
+  'border-left-style',
+  'border-left-width',
+  'border-radius',
+  'border-right',
+  'border-right-color',
+  'border-right-style',
+  'border-right-width',
+  'border-spacing',
+  'border-start-end-radius',
+  'border-start-start-radius',
+  'border-style',
+  'border-top',
+  'border-top-color',
+  'border-top-left-radius',
+  'border-top-right-radius',
+  'border-top-style',
+  'border-top-width',
+  'border-width',
+  'bottom',
+  'box-decoration-break',
+  'box-reflect',
+  'box-shadow',
+  'box-sizing',
+  'break-after',
+  'break-before',
+  'break-inside',
+  'caption-side',
+  'caret-color',
+  '@charset',
+  'clear',
+  'clip',
+  'clip-path',
+  'color',
+  'column-count',
+  'column-fill',
+  'column-gap',
+  'column-rule',
+  'column-rule-color',
+  'column-rule-style',
+  'column-rule-width',
+  'column-span',
+  'column-width',
+  'columns',
+  'content',
+  'counter-increment',
+  'counter-reset',
+  'counter-set',
+  'cursor',
+  'direction',
+  'display',
+  'empty-cells',
+  'filter',
+  'flex',
+  'flex-basis',
+  'flex-direction',
+  'flex-flow',
+  'flex-grow',
+  'flex-shrink',
+  'flex-wrap',
+  'float',
+  'font',
+  '@font-face',
+  'font-family',
+  'font-feature-settings',
+  '@font-feature-values',
+  'font-kerning',
+  'font-language-override',
+  'font-size',
+  'font-size-adjust',
+  'font-stretch',
+  'font-style',
+  'font-synthesis',
+  'font-variant',
+  'font-variant-alternates',
+  'font-variant-caps',
+  'font-variant-east-asian',
+  'font-variant-ligatures',
+  'font-variant-numeric',
+  'font-variant-position',
+  'font-weight',
+  'gap',
+  'grid',
+  'grid-area',
+  'grid-auto-columns',
+  'grid-auto-flow',
+  'grid-auto-rows',
+  'grid-column',
+  'grid-column-end',
+  'grid-column-gap',
+  'grid-column-start',
+  'grid-gap',
+  'grid-row',
+  'grid-row-end',
+  'grid-row-gap',
+  'grid-row-start',
+  'grid-template',
+  'grid-template-areas',
+  'grid-template-columns',
+  'grid-template-rows',
+  'hanging-punctuation',
+  'height',
+  'hyphens',
+  'hypenate-character',
+  'image-rendering',
+  '@import',
+  'inline-size',
+  'inset',
+  'inset-block',
+  'inset-block-end',
+  'inset-block-start',
+  'inset-inline',
+  'inset-inline-end',
+  'inset-inline-start',
+  'isolation',
+  'justify-content',
+  'justify-items',
+  'justify-self',
+  '@keyframes',
+  'left',
+  'letter-spacing',
+  'line-break',
+  'line-height',
+  'list-style',
+  'list-style-image',
+  'list-style-position',
+  'list-style-type',
+  'margin',
+  'shape-margin',
+  'margin-block',
+  'margin-block-end',
+  'margin-block-start',
+  'margin-bottom',
+  'margin-inline',
+  'margin-inline-end',
+  'margin-inline-start',
+  'margin-left',
+  'margin-right',
+  'margin-top',
+  'mask',
+  'mask-clip',
+  'mask-composite',
+  'mask-image',
+  'mask-mode',
+  'mask-origin',
+  'mask-position',
+  'mask-repeat',
+  'mask-size',
+  'mask-type',
+  'max-height',
+  'max-width',
+  '@media',
+  'max-block-size',
+  'max-inline-size',
+  'min-block-size',
+  'min-inline-size',
+  'min-height',
+  'min-width',
+  'mix-blend-mode',
+  'object-fit',
+  'object-position',
+  'offset',
+  'offset-anchor',
+  'offset-distance',
+  'offset-path',
+  'offset-rotate',
+  'opacity',
+  'order',
+  'orphans',
+  'outline',
+  'outline-color',
+  'outline-offset',
+  'outline-style',
+  'outline-width',
+  'overflow',
+  'overflow-anchor',
+  'overflow-wrap',
+  'overflow-x',
+  'overflow-y',
+  'overscroll-behavior',
+  'overscroll-behavior-block',
+  'overscroll-behavior-inline',
+  'overscroll-behavior-x',
+  'overscroll-behavior-y',
+  'padding',
+  'padding-block',
+  'padding-block-end',
+  'padding-block-start',
+  'padding-bottom',
+  'padding-inline',
+  'padding-inline-end',
+  'padding-inline-start',
+  'padding-left',
+  'padding-right',
+  'padding-top',
+  'page-break-after',
+  'page-break-before',
+  'page-break-inside',
+  'paint-order',
+  'perspective',
+  'perspective-origin',
+  'place-content',
+  'place-items',
+  'place-self',
+  'pointer-events',
+  'position',
+  'quotes',
+  'resize',
+  'right',
+  'rotate',
+  'row-gap',
+  'scale',
+  'scroll-behavior',
+  'scroll-margin',
+  'scroll-margin-block',
+  'scroll-margin-block-end',
+  'scroll-margin-block-start',
+  'scroll-margin-bottom',
+  'scroll-margin-inline',
+  'scroll-margin-inline-end',
+  'scroll-margin-inline-start',
+  'scroll-margin-left',
+  'scroll-margin-right',
+  'scroll-margin-top',
+  'scroll-padding',
+  'scroll-padding-block',
+  'scroll-padding-block-end',
+  'scroll-padding-block-start',
+  'scroll-padding-bottom',
+  'scroll-padding-inline',
+  'scroll-padding-inline-end',
+  'scroll-padding-inline-start',
+  'scroll-padding-left',
+  'scroll-padding-right',
+  'scroll-padding-top',
+  'scroll-snap-align',
+  'scroll-snap-stop',
+  'scroll-snap-type',
+  'scrollbar-color',
+  'tab-size',
+  'table-layout',
+  'text-align',
+  'text-align-last',
+  'text-combine-upright',
+  'text-decoration',
+  'text-decoration-color',
+  'text-decoration-line',
+  'text-decoration-style',
+  'text-decoration-thickness',
+  'text-emphasis',
+  'text-emphasis-color',
+  'text-emphasis-position',
+  'text-emphasis-style',
+  'text-indent',
+  'text-justify',
+  'text-orientation',
+  'text-overflow',
+  'text-shadow',
+  'text-transform',
+  'text-underline-offset',
+  'text-underline-position',
+  'top',
+  'transform',
+  'transform-origin',
+  'transform-style',
+  'transition',
+  'transition-delay',
+  'transition-duration',
+  'transition-property',
+  'transition-timing-function',
+  'translate',
+  'unicode-bidi',
+  'user-select',
+  'vertical-align',
+  'visibility',
+  'white-space',
+  'widows',
+  'width',
+  'word-break',
+  'word-spacing',
+  'word-wrap',
+  'writing-mode',
+  'z-index',
+];

package/src/utils/caniemail/ast/get-object-variables.ts

@@ -0,0 +1,61 @@
+import type { Node } from '@babel/traverse';
+import traverse 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.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;
+};