rehype-minify-whitespace: inline HTML content is trimmed

[erquhart]

The contents of inline tags are being trimmed. When parsing html to markdown:

Input

a b<span> </span>c d</span><strong> e</strong>

Expected output

a b c d **e**

Actual output

a bc d**e**

Runkit repro: https://runkit.com/erquhart/595d36c4e60f6b0012c00405

[wooorm]

If someone wants to work on it, it’s in rehype-minify-whitespace.

Moved from remarkjs/remark#275.

[erquhart]

@wooorm I'm not using rehype-minify-whitespace in that repro - are you certain that's the problem?

[wooorm]

Yup

[erquhart]

@wooorm seems like the best approach may be to simply allow whitespace minification to be toggled off in the options for rehype-remark/hast-util-to-mdast. Would you accept a PR for that?

[wooorm]

Just dropping this here ’cause it probably has to be something like this: https://github.com/wooorm/remark-lint/blob/master/packages/remark-lint-no-paragraph-content-indent/index.js

[erezrokah]

Bumping this as we're still experiencing this issue: decaporg/decap-cms#3727

I added a test that is failing erezrokah@d7cc409#diff-c7e2175747a03e137c1615aecfaa1636R103 but not sure how to go about fixing it.

Can you suggest a place to get started?
Tried looking at the history of https://github.com/wooorm/remark-lint/blob/master/packages/remark-lint-no-paragraph-content-indent/index.js but couldn't figure out the suggested direction.

[kptdobe]

I am facing the same issue. It is coming from those lines:

https://github.com/rehypejs/rehype-minify/blob/master/packages/rehype-minify-whitespace/index.js#L62-L68

I think the problem is that in the case of a <span>, <em>, <strong>, the siblings you want to test are not the text node siblings (almost always non existing) but the siblings of the parent (the span, em, strong siblings).

[kptdobe]

Re-thinking about it, I would even argue you should never trim an inline element: there is no way you can know if the leading / trailing space has been introduced on purpose or not:

• <span>Click here: </span><input text="my button" value="button">
• <p><strong> Maybe I want to start with a space here...</strong></p>

[wooorm]

Released!

[erezrokah]

This is amazing @wooorm, do you suggest I open PRs for https://github.com/syntax-tree/hast-util-to-mdast/blob/7c4667743dd056b33f1c76a7c319674aef951a4f/package.json#L40 and https://github.com/rehypejs/rehype-remark/blob/10c28f586be34b1baf3d221d8116a7e70aed2365/package.json#L28 to update dependencies?
Would a major version bump will be required for those?

[wooorm]

It's a patch, so reinstalling dependencies should do the trick!

[erezrokah]

Sorry, let me clarify my question.
We're using rehype-remark. Even if I update it to the latest version is still uses "hast-util-to-mdast": "^7.0.0" which uses "rehype-minify-whitespace": "^3.0.0", so it won't get the fix.

I'm using (with yarn) the following workaround:

"resolutions": {
  "rehype-minify-whitespace": "^4.0.2"
}

But that is not ideal

Update

My workaround doesn't work - investigating

[kptdobe]

Awesome! Thanks a lot @wooorm.

I tried to test the changes (I manually patched rehype-remark) and I get an error:

TypeError: Cannot read property 'type' of undefined
    at one .../hast-util-to-mdast/lib/one.js:13:12)

I traced to https://github.com/syntax-tree/hast-util-to-mdast/blob/master/index.js#L31 : minify returns undefined for my tree (was working before). Investigating too :)

[kptdobe]

@wooorm You removed the return tree :)

64c6206#diff-a6b748a472d9e6a0024e05443221d898L44

Adding it here fix the issue: https://github.com/rehypejs/rehype-minify/blob/master/packages/rehype-minify-whitespace/index.js#L40

[kptdobe]

Created a PR to address this new issue: #33
Feel free to use it or not ;)

I tested the new trimming behaviors, works pretty well, especially with "my" complex DOM. Thanks again!