remark-mdx: empty line before closing tag issue

Subject of the issue

The issue causes parsing failure in a compiler plugin that parses the child.value strings for post processing.

Reproduce

The following:

<button>
  <div>hello world</div>
  //<- there is one empty space here at the start of the line
</button>

will parse as

  "children": [
    {
      "type": "jsx",
      "value": "<button>\n  <div>hello world</div>\n\n</button>\n\n",
...
    }
  ],

However, removing the one space on the empty line will parse as 3 separate elements:

<button>
  <div>hello world</div>
//<- there is no empty space here
</button>

 "children": [
    {
      "type": "jsx",
      "value": "<button>\n  <div>hello world</div>",
    },
    {
      "type": "text",
      "value": "\n"
    },
    {
      "type": "jsx",
      "value": "</button>",
    }
  ],

Potential solution

The issue seems to be here: https://github.com/mdx-js/mdx/blob/dec55ec92f9ff42b0ae3617f0168a387e56f7ff8/packages/remark-mdx/block.js#L101

Since an empty string will always pass the test, the closing tag is missed if there is an empty line before it.

Any reasons not to change the rule to

   ...
      if (line.length && sequence[1].test(line)) {
        index = next
        break
      }
...

[wooorm]

Thanks for all your comments folks! We’re working on adding proper JSX parsing. 2.0.0 will solve many of the JSX parsing issues, including this one!

[seanhealy]

This is still being problematic for us. Removing empty lines isn’t great as it leaves the example code harder to read. Has anyone found a reliable way of preventing Prettier from stripping trailing whitespace within mdx Playground blocks?