react-email Extra line-break displayed on the final HTML render

Describe the Bug

When input a long string in the markup, there are extra line break being output. We can reproduced in the official document

It works fine if there is no CSS white-space setting, but if we want to honor the original string /n line break, the paragraph will looks mal-formated

Extra line break

Original string

import {
  Body,
  Button,
  Container,
  Head,
  Heading,
  Hr,
  Html,
  Img,
  Link,
  Preview,
  Section,
  Text,
} from "@react-email/components";
import * as React from "react";

interface LinearLoginCodeEmailProps {
  validationCode?: string;
}

const baseUrl = process.env.VERCEL_URL
  ? `https://${process.env.VERCEL_URL}`
  : "";

export const LinearLoginCodeEmail = ({
  validationCode,
}: LinearLoginCodeEmailProps) => (
  <Html>
    <Head />
    <Preview>Your login code for Linear</Preview>
    <Body style={main}>
      <Container style={container}>
        <Img
          src={`${baseUrl}/static/linear-logo.png`}
          width="42"
          height="42"
          alt="Linear"
          style={logo}
        />
        <Heading style={heading}>Your login code for Linear</Heading>
        <Section style={buttonContainer}>
          <Button style={button} href="https://linear.app">
            Login to Linear
          </Button>
        </Section>
        <Text style={paragraph}>
          This link and code will only be valid for the next 5 minutes. If the
          link does not work, you can use the login verification code directly:
        </Text>
        <code style={code}>{validationCode}</code>
        <Hr style={hr} />
        <Link href="https://linear.app" style={reportLink}>
          Linear
        </Link>
      </Container>
    </Body>
  </Html>
);

without CSS whitespace	with CSS whitespace

Version

We were recently upgrade to the latest version and started to notice the issue.

[email protected]
@react-email/[email protected]

The issue started to show up at @react-email/[email protected]

Fixed on 0.028 works,

wondering if this is the same root cause as https://github.com/resend/react-email/issues/1813

Thnaks

Which package is affected (leave empty if unsure)

@react-email/components

Link to the code that reproduces this issue

https://demo.react.email/preview/magic-links/linear-login-code?view=desktop&lang=jsx

To Reproduce

input a long pargraph
Add white-space: pre-line
Extra line break cause the paragraph not fully expanded

Expected Behavior

Original strings should be honored and no extra line break.

What's your node version? (if relevant)

No response

Dec 29 '24 02:12 roderickhsiao

Thanks @roderickhsiao, experienced similar issue today but with [email protected] and @react-components0.0.32

Jan 13 '25 14:01 kevinlandsberg

I'm experiencing the same issue with @0.0.32

Jan 25 '25 19:01 MartinXPN

saw some fixes related to prettier, but still able to reproduce in 0.0.33

Feb 21 '25 00:02 roderickhsiao

I’ve experienced the same. It’s problematic if you want to use pre-line white space.

Mar 08 '25 16:03 bdezso

checking the lastest 0.0.36 the issue still persist. the last working version is 0.0.28

Apr 17 '25 03:04 roderickhsiao

the issue is still there on 0.0.41

May 16 '25 19:05 roderickhsiao

Tested on latest 0.1.0, the issue persists.

Jun 18 '25 17:06 roderickhsiao

The extra lines are because of the output going through pretty, which we'll definitely look into changing. But it also seems like, if you want to include explicit line breaks in your JSX, you need to use {'\n'} just like you would do {' '} if you were adding trailing white spaces.

Jul 11 '25 13:07 gabrielmfern

We started working on #2361 to fix this with an option to use for formatting, and we're thinking about possible solutions still, but in my opinion an in-house formatter is going to be the best bet. Will let you all know how that goes.

If anyone knows of any other library that does formatting in some sort flexible way that would fit in with our use cases let me know, because we'd much rather use something from the ecosystem if it works well.

Jul 21 '25 17:07 gabrielmfern

Any prettier option we can tweak to prevent it from happening? I tried that wrapping in <pre> tag will prevent it happens, but pre also have default browser style (margin and whitespace:pre), which works as a workaround but not able to manage the code base in scale.

IMO formatting HTML attribute make sense (like style tag/class name), but modify the text node to split by programmatically adding line-break is pretty opinoated.

https://prettier.io/docs/options#prose-wrap

Jul 25 '25 03:07 roderickhsiao

@roderickhsiao What, that prose-wrap option seems perfect for this, can't believe I didn't find out about it. If you have the problem when rendering the email to send, you can just use the pretty function directly, and then pass in a proseWrap: 'preserve'. With the preview server, it's definitely going to be better for us to do as I mentioned either way, though.

Should be fixed in [email protected]/@react-email/[email protected]

Jul 31 '25 13:07 gabrielmfern

Thank you! perhaps allowing passing pretty option to the render function from email component will be nice? (Currently there is only boolean turn on/off

Verified the new version works fine!

Jul 31 '25 16:07 roderickhsiao