Skip to content

Line breaks in block-level JSX create unexpected whitespace in the output #843

@thorn0

Description

@thorn0

Subject of the issue

As we're trying to improve Prettier's support of MDX, I'm trying to understand its syntax better. So far it looked like block-level JSX is supposed to be 100% React-compatible for it to be possible to copy-paste React code from JS to MDX (also it would allow Prettier to use the same code for formatting JSX that it uses for JSX in JS). But I found an incompatibility that breaks this use case, namely: a line break between an element and text doesn't create whitespace in the output in React but does in MDX. Posting here after asking on Spectrum.

Your environment

The official playground https://mdxjs.com/playground/

Steps to reproduce

<b>foo</b>
bar

Expected behaviour

Should be rendered as

foobar

https://codepen.io/thorn0/pen/NWWEaoo

Actual behaviour

Is rendered as

foo bar

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions