Skip to content

Serializing MDX expressions inside MDX elements indents the expression #2

@remcohaszing

Description

@remcohaszing

Initial checklist

Affected package

mdast-util-mdx@3.0.0

Steps to reproduce

Run the following script:

import { fromMarkdown } from 'mdast-util-from-markdown'
import { mdxFromMarkdown, mdxToMarkdown } from 'mdast-util-mdx'
import { toMarkdown } from 'mdast-util-to-markdown'
import { mdxjs } from 'micromark-extension-mdxjs'

let content = `
{
  ' This is fine'
}

<div>
  {\`a
  b
    c
      d\`
        + 'e'}
</div>
`

for (let count = 0; count < 10; count++) {
  const tree = fromMarkdown(content, {
    extensions: [mdxjs()],
    mdastExtensions: [mdxFromMarkdown()]
  })

  content = toMarkdown(tree, { extensions: [mdxToMarkdown()] })

  console.log(content)
}

Actual behavior

Every iteration, the lines with b, c, d, and e get indented by 2 spaces. This is mostly inconvenient. There’s no way to format the MDX consistently. For multiline strings however, this changes the meaning of the content. The indentation spaces become part of the string after re-parsing.

Expected behavior

The expression isn’t indented.

Runtime

Node.js v24.10.0

Package manager

npm 11.6.1

Operating system

Pop!_OS 22.04

Build and bundle tools

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions