fix: compatibiliy checking not comparing proprety names correctly

Author: gabrielmfern

packages/react-email/src/actions/email-validation/check-compatibility.ts

@@ -278,8 +278,8 @@ export const checkCompatibility = async (
 
             if (cssEntryType === 'full property') {
               if (
-                property.name === entryFullProperty?.name &&
-                property.value === entryFullProperty.value
+                property.name === snakeToCamel(entryFullProperty!.name) &&
+                property.value === entryFullProperty!.value
               ) {
                 addToInsights(property);
                 break;
@@ -306,7 +306,7 @@ export const checkCompatibility = async (
               }
             } else if (
               entryProperties.some(
-                (propertyName) => property.name === propertyName,
+                (propertyName) => property.name === snakeToCamel(propertyName),
               )
             ) {
               addToInsights(property);
@@ -322,4 +322,10 @@ export const checkCompatibility = async (
   return readableStream;
 };
 
+const snakeToCamel = (snakeStr: string) => {
+  return snakeStr
+    .toLowerCase()
+    .replace(/-+([a-z])/g, (_match, letter) => letter.toUpperCase());
+};
+
 export type AST = ReturnType<typeof parse>;

packages/react-email/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",
+      },
+    },
+  ],
+}
+`;

packages/react-email/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",
+  },
+]
+`;

packages/react-email/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();
+});

packages/react-email/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();
+});

packages/react-email/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;