You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
fix: stop jsx-email Butan deprecation warning on every email render - #469
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 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.
Written for commit 4c983ff. Summary will update on new commits.
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.
No actionable comments were generated in the recent review. 🎉
ℹ️ Recent review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Advanced
Run ID: 3cd75593-8ce8-4fab-9742-33c936e5fad0
📥 Commits
Reviewing files that changed from the base of the PR and between 7634811 and 4c983ff.
📒 Files selected for processing: 3
apps/web/src/server/email-renderer.unit.test.ts
packages/email-editor/src/email-button.tsx
packages/email-editor/src/renderer.tsx
Included review availability: This review used your included allowance. Your plan provides up to 8 included reviews per hour; 7 remain after this review.
Walkthrough
The change adds an anchor-based EmailButton that parses padding values and generates button markup, including Outlook-specific spacing when padding is available. EmailRenderer.button now uses EmailButton instead of the jsx-email button component. A unit test checks the rendered button markup and verifies that rendering produces no captured console.warn calls.
Priority: ➖ Normal
Change: Bug fix
Merge Risk:⚪ Minimal · up to 4c983
No merge-blocking issue was identified; the button’s inspected rendering path preserves the existing markup.
Pre-merge checks: 4 · 1
Failed checks: 1 warning
Check name
Status
Explanation
Resolution
Docstring Coverage
Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 3 functions across 3 files.
Write docstrings for the functions missing them to satisfy the coverage threshold.
Passed checks: 4 passed
Check name
Status
Explanation
Description Check
Check skipped - CodeRabbit’s high-level summary is enabled.
Title check
The title clearly and concisely describes the main change: replacing the deprecated jsx-email Butan usage to stop deprecation warnings during email rendering.
Linked Issues check
Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check
Check skipped because no linked issues were found for this pull request.
Fix all pre-merge checks with AI
Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
Warning
Some tools did not complete. Review the errors below.
🔧 ESLint
If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.
apps/web/src/server/email-renderer.unit.test.ts
ESLint skipped: missing config or dependency (missing-dependency). The ESLint configuration references a package that is not available in the sandbox.
packages/email-editor/src/email-button.tsx
ESLint skipped: missing config or dependency (missing-dependency). The ESLint configuration references a package that is not available in the sandbox.
packages/email-editor/src/renderer.tsx
ESLint skipped: the matched ESLint configuration already failed (missing-dependency).
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What changed
packages/email-editor/src/email-button.tsx:EmailButton, a copy of jsx-email 2.8.4's deprecatedButancomponent with the deprecationlog.warnremoved. Everything else is the same.packages/email-editor/src/renderer.tsxnow usesEmailButtoninstead of importingButan as Buttonfromjsx-email.apps/web/src/server/email-renderer.unit.test.ts. It pins the exact button markup and checks that rendering a button doesn't callconsole.warn.Why
Butanlogs "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
Buttonproduces completely different markup: a<table>wrapper and a VMLv: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
EmailRendererbefore 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, alinkValuesURL, 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.mainand 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 typecheckandtsc --noEmitinpackages/email-editorboth pass. ESLint shows no new warnings in the changed files.No migrations and no UI changes.
Summary by cubic
Stops jsx-email's deprecated
Butancomponent 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.EmailButton, a copy ofButanwith the deprecationlog.warnremoved, and switchedpackages/email-editor/src/renderer.tsxto use it.Butanrather than switching to jsx-email's replacementButton, which renders different markup (a<table>wrapper and VMLv:roundrect) and would change how every customer email with a button looks.console.warn.Written for commit 4c983ff. Summary will update on new commits.
Summary by CodeRabbit