fix: stop jsx-email Butan deprecation warning on every email render

KM
2d ago
+200-3

What changed

  • Added packages/email-editor/src/email-button.tsx: EmailButton, a copy of jsx-email 2.8.4's deprecated Butan component with the deprecation log.warn removed. Everything else is the same.
  • packages/email-editor/src/renderer.tsx now uses EmailButton instead of importing Butan as Button from jsx-email.
  • Added apps/web/src/server/email-renderer.unit.test.ts. It pins the exact button markup and checks that rendering a button doesn't call console.warn.

Why

Butan logs "The Butan component is deprecated and is provided as a means of migrating to the updated Butan component…" every time it renders, so once per button per email. In production this was 356 of the last 500 error-level lines, and Railway was dropping log lines because of the rate, which hid real errors.

jsx-email's replacement Button produces completely different markup: a <table> wrapper and a VML v:roundrect, and it needs explicit width and height. Switching to it would change how every customer email with a button looks. Turning off jsx-email's shared logger would also hide its other warnings. Copying the component without the warning keeps the output the same and stops only this log line.

How I checked it

  • Rendered a sample doc through the real EmailRenderer before and after the change and compared the HTML. The doc had a paragraph, a spacer and 4 buttons (custom colors and borders, left/center/right alignment, a {{variable}} URL, a linkValues URL, and default/missing attrs), rendered both with and without variable replacement. The output was byte-identical (cmp). The before run printed the warning once per button; the after run printed nothing.
  • The new unit test's warning check fails on main and passes with this change. Its markup check passes on both.
  • pnpm --filter=web exec vitest run -c vitest.unit.config.ts: 23 files, 133 tests passed.
  • pnpm --filter=web typecheck and tsc --noEmit in packages/email-editor both pass. ESLint shows no new warnings in the changed files.

No migrations and no UI changes.

Summary by cubic

Stops jsx-email's deprecated Butan component from logging a deprecation warning on every email render; the warning accounted for 356 of the last 500 error-level log lines in production and caused Railway to drop log lines, hiding real errors.

  • Added EmailButton, a copy of Butan with the deprecation log.warn removed, and switched packages/email-editor/src/renderer.tsx to use it.
  • Kept Butan rather than switching to jsx-email's replacement Button, which renders different markup (a <table> wrapper and VML v:roundrect) and would change how every customer email with a button looks.
  • Added a unit test that pins the exact button markup and verifies rendering a button no longer calls console.warn.

Summary by CodeRabbit

  • New Features
    • Email-rendered buttons now retain the legacy button appearance, including Outlook-compatible spacing. Button padding supports pixel, em, rem, percentage, and numeric values, with shorthand and side-specific settings applied.
  • Bug Fixes
    • Email rendering now uses consistent button markup, and a rendering check verifies that button output is produced without warnings.