Extra line-break displayed on the final HTML render #1847
Description
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
#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