JSX variable references do not work as children on lines with plain text

[Lugribossk]

Subject of the issue

JSX references to Javascript variables with {} do not work as children of a component or tag when on a line with other plain text.

Your environment

• OS: Windows 10
• Packages: "@mdx-js/mdx": "1.5.8",
  "@mdx-js/parcel-plugin-mdx": "1.5.8",
  "@mdx-js/react": "1.5.8",
• Env: Node.js v12.13.0, yarn v1.22.4

Steps to reproduce

Rendering this example:

export const name = "world";
export const color = "red";

Hello <span style={{color: color}}>{name}</span>
<span style={{color: color}}>Hello {name}</span>

Will produce:

Hello {name}
Hello world

However referencing the color variable does work to change the text color on both lines.

Expected behaviour

I would expect both lines to render "Hello world".

Actual behaviour

The variable reference is rendered as text instead.

[wooorm]

Correct, those aren’t working. It’s being discussed here: #994

[RadxaYuntian]

#994 is a self-reference. The related issue is probably #556.