Multiline expression with template literal indentation issue

[vrepsys]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

remark-mdx 3.0.1, remark-stringify/remark-parse 11.0.0

Link to runnable example

https://codesandbox.io/p/live/8c858a72-e7de-4db3-ad55-7f630eb6d197

Steps to reproduce

const toAst = (md) => {
  const ast = unified().use(remarkParse).use(remarkMdx).parse(md);
  console.log(JSON.stringify(ast.children[0].children[0].value, null, 2));
  return ast;
};

const toMdx = (ast) => {
  return unified().use(remarkMdx).use(remarkStringify).stringify(ast);
};

let text = `<CodeBlock>
{\`link:
title: front page\`}
</CodeBlock>`;
console.log(text);
text = toMdx(toAst(text));
console.log(text);
text = toMdx(toAst(text));
console.log(text);
text = toMdx(toAst(text));
console.log(text);
text = toMdx(toAst(text));
console.log(text);

Expected behavior

I expected the string literal value to remain the same across conversions, as you can see in CodeSandox the actual behaviour is that already in the first iteration multiline code literal is indented which changes its actual value just by converting back and forth.

I'd expect the output to be:

<CodeBlock>
{`link:
title: front page`}
</CodeBlock>

"`link:\ntitle: front page`"
<CodeBlock>
{`link:
title: front page`}
</CodeBlock>

"`link:\ntitle: front page`"
<CodeBlock>
{`link:
title: front page`}
</CodeBlock>

"`link:\ntitle: front page`"
<CodeBlock>
{`link:
title: front page`}
</CodeBlock>
"`link:\ntitle: front page`"

Actual behavior

The tempalte literal value in expression attains more and more spaces

"`link:\ntitle: front page`"
"`link:\n  title: front page`"
"`link:\n    title: front page`"
"`link:\n      title: front page`"

That's because of indentation, here's a complete output of reproducing code:

<CodeBlock className="language-yaml" title="test">
{`link:
title: front page`}
</CodeBlock>
"`link:\ntitle: front page`"
<CodeBlock>
  {`link:
  title: front page`}
</CodeBlock>

"`link:\n  title: front page`"
<CodeBlock>
  {`link:
    title: front page`}
</CodeBlock>

"`link:\n    title: front page`"
<CodeBlock>
  {`link:
      title: front page`}
</CodeBlock>

"`link:\n      title: front page`"
<CodeBlock>
  {`link:
        title: front page`}
</CodeBlock>

Also tested this with one of the 2.x versions, and the behaviour is different -- the template literal value changes the first time (which is still an issue), but then stops changing with iterations once i

I really appreciate all the open-source work on MDX!

Runtime

No response

Package manager

No response

OS

No response

Build and bundle tools

No response

[wooorm]

Thanks for the report and the kind words; released in micromark-factory-mdx-expression@2.0.2; npm update should do the trick!

[Airkro]

Still happen in 3.1.0:

import { remark } from 'remark';
import remarkMdx from 'remark-mdx';

function transform(input) {
  return remark()
    .use(remarkMdx)
    .process(input)
    .then((file) => file.toString().trim());
}

/* prettier-ignore */
const input =
`<div>{\`
  abc
\`}</div>`;
/* prettier-ignore */

console.log(input);

const output1 = await transform(input);

console.log(output1);

const output2 = await transform(output1);

console.log(output2);

const output3 = await transform(output2);

console.log(output3)

<div>{`
  abc
`}</div>
<div>
  {`
    abc
    `}
</div>
<div>
  {`
      abc
      `}
</div>
<div>
  {`
        abc
        `}
</div>

[wooorm]

remove your package lock, clear your cache, and reinstall