`<pre>` tag does not respect newlines in custom components with slots

[eltrevii]

Astro Info

Astro                    v7.1.3
Node                     v24.16.0
System                   Windows (x64)
Package Manager          bun
Output                   static
Adapter                  none
Integrations             @sentry/astro
                         @spotlightjs/astro
                         astro-icon

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

i have a custom <details> wrapper which uses a <pre> inside because i want to include content with its line breaks intact, so i use a slot inside the <pre>, like this (the example includes some extra styling i use):

---
// src/components/Dropdown.astro
const { title } = Astro.props;
---
<details aria-label="details">
    <summary>{title}</summary>
<pre><slot /></pre></details>

so, when using this component and its slot in other files, like so:

<Dropdown title="Pre in custom component">
First line
Second line
</Dropdown>

the newlines are not respected:

however, if the <pre> tag is removed from the component:

---
// src/components/DropdownNoPre.astro
const { title } = Astro.props;
---
<details aria-label="details">
    <summary>{title}</summary>
<slot /></details>

and the tag is provided to the component like this:

<DropdownNoPre title="Pre outside component (in slot)"><pre>
First line
Second line
</pre></DropdownNoPre>

then, it works as expected:

What's the expected result?

the newlines are equally respected in both components, like so:

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-48f6wvvv?file=src%2Fpages%2Findex.astro

Participation

• I am willing to submit a pull request for this issue.

[astrobot-houston]

• Reproduced: Yes
• Exploration: Yes — View branch
• Unit Test: Yes — packages/astro/test/minification-html.test.ts
• Priority: P3: minor bug. This affects the specific pattern of passing multi-line text as slot children to a component that renders <pre>. A simple workaround exists ({..text..} template literal expression, or compressHTML: false).

The root cause is in how the default compressHTML: 'jsx' setting interacts with component slot content. The compiler's JSX whitespace algorithm (matching React/Babel behavior) collapses all newlines in text nodes to single spaces. This is correct for regular HTML elements, but component slot content may be rendered inside <pre> or other whitespace-sensitive contexts that aren't visible at the call site. When the user writes <Dropdown> First line Second line </Dropdown>, the compiler collapses the text to First line Second line before the component ever gets to render it inside <pre>.

I found a potential fix for this issue. The fix adds a pre-processing step in packages/astro/src/core/compile/compile.ts that uses the compiler's parse() to identify text nodes with newlines inside component children and wraps them in template literal expressions ({text}), which the compiler passes through without whitespace manipulation. All existing minification tests continue to pass.

Try this fix

You can test this fix right now without waiting for a release:

npm i https://pkg.pr.new/astro@1b6198f

If this fixes your issue, please leave a comment letting us know (e.g. "confirmed, this fixes it"). We'll then open a pull request to get this merged.

Full Triage Report

Reproduction

Built a minimal project with two components:

• Dropdown.astro: wraps slot content in <pre><slot /></pre>
• DropdownNoPre.astro: renders slot without <pre>

With the default compressHTML: 'jsx', the build output for <Dropdown> was:

<pre>First line Second line</pre>

Newlines collapsed to spaces. Direct <pre> usage and the DropdownNoPre variant with <pre> in the caller both preserved newlines correctly.

Diagnosis

The compilation pipeline passes compact: astroConfig.compressHTML (default 'jsx') to the @astrojs/compiler-rs native compiler. The compiler's JSX whitespace algorithm (cleanJSXTextWhitespace) strips all newlines from text nodes and joins lines with a single space — standard JSX behavior matching React/Babel/TypeScript.

The isRawElement check in the compiler correctly exempts text inside <pre>, <script>, etc. However, text inside component children (like <Dropdown>) is NOT exempted because the compiler doesn't know the rendering context of the slot — it can't see that the slot will be rendered inside <pre> in the component template.

Key evidence:

• compact: false → newlines preserved ✅
• compact: true (HTML-aware) → newlines preserved ✅
• compact: 'jsx' (default) → newlines collapsed ❌

Fix

Since the compiler is a native Rust binary (@astrojs/compiler-rs) that can't be patched in this repo, the fix adds a pre-processing step in packages/astro/src/core/compile/compile.ts. Before passing source to the compiler's transform(), it:

1. Uses parse() to identify JSXText nodes inside component children
2. Filters to only text nodes containing newlines AND non-whitespace content
3. Wraps them in template literal expressions: text → {`text`}

This converts the text from a static template part (subject to JSX whitespace rules) to a JS expression (preserved by the compiler). Whitespace-only text nodes between elements are left alone so JSX stripping still works for indentation.

Tests

Added a new test case to packages/astro/test/minification-html.test.ts:

• "preserves newlines in slot content rendered inside <pre> in a component"

Added fixture component PreWrapper.astro with <pre id="slot-pre"><slot /></pre>.

All 12 minification tests pass, plus slot/children/expression tests confirmed passing.

This report was made by an LLM. The analysis may be wrong, and the potential fix might not work, but is intended as a starting point for exploring the issue.

[eltrevii]

i can confirm this fix does indeed work, although this looks like a workaround, so perhaps it could be handled differently in the rust version?

[astrobot-houston]

The fix has been verified! A pull request has been created: withastro/astro#17491

[matthewp]

Yeah that's some bad hacky slop.

This sounds similar to #127, probably the same underlying issue.

[astrobot-houston]

Triage failed unexpectedly (attempt 1 of 3).

Run: https://github.com/withastro/compiler-rs/actions/runs/30754691286

I can retry if a new comment provides more information or asks me to try again.

Error:

[flue] Unknown model "cloudflare/@cf/moonshotai/kimi-k2.6". Provider "cloudflare" / model id "@cf/moonshotai/kimi-k2.6" is not registered with @earendil-works/pi-ai or via registerProvider().