template literals

[geddski]

MDX appears to be trying to parse template literals into MDX Tags, rather than pass the value through.

# Testing template literals

<TemplateLiteralTest 
  test={`
    thing1 {
      background: blue;
    }

    thing2 {
      background: blue;
    }
  `}
/>

MDX is transforming that into this:

<TemplateLiteralTest
  test={`
    thing1 {
      background: blue;
    }
<MDXTag name="pre" components={components}><MDXTag name="code" components={components} parentName="pre">{`thing2 {
  background: blue;
}
`}</MDXTag></MDXTag>
<MDXTag name="p" components={components}>{`  \`}
/>`}</MDXTag></MDXTag>

which leads to this error:

SyntaxError: unknown: Unexpected token, expected "}" (23:106)
    21 |       background: blue;
    22 |     }
  > 23 | <MDXTag name="pre" components={components}><MDXTag name="code" components={components} parentName="pre">{`thing2 {
       |                                                                                                           ^
    24 |   background: blue;
    25 | }
    26 | `}</MDXTag></MDXTag>

I'd expect MDX to interpolate and pass the template literal value through to the component.

[johno]

Thanks for filing an issue!

This is a known bug with empty lines within JSX blocks (a problem with the remark parser). We're currently working on implementing a new custom parser to better handle JSX parsing.

[geddski]

@johno oh cool. Is there an issue I can sub to follow that?

[johno]

#195 is what I'm currently referencing, but we can keep this open as well in case folks stumble upon it. Hoping to get a fix implemented in the next week.

[geddski]

awesome

[johno]

Going to close this since we can track progress in #195. Thanks for opening up the issue!