fix(preview-server): inline styles property detection, and different case property comparison

[gabrielmfern]

Meant to fix the compatibility checking issues mentioned in #2595.

The problems causing this were twofold:

1. We were not counting properties inside of object directly inside the style attribute, it was only counting for variable uses, such as

   const myStyles = { /* .,. */ };
   
   <div style={myStyles} />

   but not for

   <div style={{ /* .,. */ }} />

2. When comparing property names to find if any used property name was not supported, we were doing a transformation to the camel cased-version justifyContent coming from the JSX, that was supposed to only be done to the snake-cased one coming from caniemail's data. This caused the comparison to just fail for properties such as justifyContent/alignItems, which were the case for the issue.

This pull request also includes tests for the former problem, but not the latter, since it doesn't seem to be very trivial to test with the way we have things setup. We'd need to break code up a bit more than right now.

---

Summary by cubic

Fix compatibility checking in the preview server by correctly reading inline style object properties and comparing property names consistently. Unsupported properties like justifyContent/justify-content and alignItems are now detected.

• Bug Fixes

  • Count properties defined inline in JSX style objects (style={{ ... }}), including string and numeric values.
  • Compare JSX camelCase names to caniemail snake-case names correctly by only camel-casing caniemail data.
  • Add tests for inline style object detection.

• Dependencies

  • Update caniemail data used for compatibility checks.

[changeset-bot]

🦋 Changeset detected

Latest commit: b8f2bfd

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@react-email/preview-server	Patch
react-email	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
react-email	Ready	Preview	Comment	Oct 28, 2025 3:03pm
react-email-demo	Ready	Preview	Comment	Oct 28, 2025 3:03pm

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/resend/react-email/@react-email/preview-server@2600

commit: b8f2bfd

[cubic-dev-ai]

3 issues found across 6 files

Prompt for AI agents (all 3 issues)

Understand the root cause of the following 3 issues and fix them.


<file name="packages/preview-server/src/actions/email-validation/check-compatibility.ts">

<violation number="1" location="packages/preview-server/src/actions/email-validation/check-compatibility.ts:282">
Matching the raw property name against the camel-cased entry misses Tailwind (kebab-case) and string-literal style keys, so unsupported CSS properties slip through the compatibility check.</violation>

<violation number="2" location="packages/preview-server/src/actions/email-validation/check-compatibility.ts:312">
Directly comparing camel-cased caniemail names to the raw property name causes Tailwind and kebab-case inline style properties to be skipped, regressing the compatibility warning.</violation>
</file>

<file name="packages/preview-server/src/utils/caniemail/ast/get-used-style-properties.ts">

<violation number="1" location="packages/preview-server/src/utils/caniemail/ast/get-used-style-properties.ts:95">
Skip inline style properties whose key is computed instead of treating the identifier name as a literal CSS property.</violation>
</file>

_{React with 👍 or 👎 to teach cubic. Mention @cubic-dev-ai to give feedback, ask questions, or re-run the review.}