Incorrect Footnote Order

Subject of the issue

I get an incorrect footnote order when I mix inline and regular footnotes.

Your environment

• Windows 10 x64
• “rehype-stringify”: “^5.0.0”, “remark-parse”: “^6.0.3”, “remark-rehype”: “^4.0.0”, “unified”: “^7.1.0”, “unified-stream”: “^1.0.4”
• Node 8.15.1

Steps to reproduce

The code (essentially lifted from the guide):

const options = {
  footnotes: true,
  gfm: true
};

const processor = unified()
  .use(parse, options)
  .use(remark2rehype)
  .use(html)

fs.readFile('sample.md', 'utf8', function(err, data) {
  processor.process(data)
    .then(function(out) {
      fs.writeFile('sample.html', out, 'utf8', function(err){
        if (err) throw err;
        return;
      })
    })
    .catch(function(err) {
      console.log(err);
    });
});

and input file sample.md:

Some text[^foo bar]

More text[^x]

[^x]: baz cuux

Actual behaviour

sample.html

<p>Some text<sup id="fnref-1"><a href="#fn-1" class="footnote-ref">1</a></sup></p>
<p>More text<sup id="fnref-x"><a href="#fn-x" class="footnote-ref">x</a></sup></p>
<div class="footnotes">
<hr>
<ol>
<li id="fn-x">baz cuux<a href="#fnref-x" class="footnote-backref">↩</a></li>
<li id="fn-1">foo bar<a href="#fnref-1" class="footnote-backref">↩</a></li>
</ol>
</div>

Expected behaviour

<p>Some text<sup id="fnref-1"><a href="#fn-1" class="footnote-ref">1</a></sup></p>
<p>More text<sup id="fnref-x"><a href="#fn-x" class="footnote-ref">x</a></sup></p>
<div class="footnotes">
<hr>
<ol>
<li id="fn-1">foo bar<a href="#fnref-1" class="footnote-backref">↩</a></li>
<li id="fn-x">baz cuux<a href="#fnref-x" class="footnote-backref">↩</a></li>
</ol>
</div>

[ChristianMurphy]

Remark is parsing the references as expected. https://astexplorer.net/#/gist/471584ba12aa4e52757dcbb9e11bd275/59c1f5114ec43c6c688990d5fd3bba1a38392153

Transferring this to remark-rehype, which handles more around the output to HTML.

[wooorm]

Sure but even here markdown brings with it ambiguity and confusion. […]

All these questions are valid. And you can do all these things with markdown! Two notes that you may find interesting:

• Markdown is not for HTML. Maybe it used to be. But if you drop that line of thinking, Markdown can do anything. You can make books, render man pages, etc… Even HTML does not dictate how things are presented. It defines semantics. And that’s what Markdown does as well!
• I don’t think Markdown is ambiguous / confusing if it doesn’t dictate how things display. Similar to other tools that don’t dictate how they are used. It’s a hammer. You can use it for a bunch of things. It doesn’t dictate how it’s used. That doesn’t make a hammer confusing.

The classic to […]

Thank you!