Footnotes order inside table is reversed

[magicpalmtree]

Initial checklist

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

Affected packages and versions

"remark-gfm": "^3.0.1"

Link to runnable example

No response

Steps to reproduce

// Node v18.13.0

/* Input */
Before tableeeeeeeeeee [^t0]

| h1 [^h1] | h2 [^h2] | h3 [^h3] |
| --- | --- | --- |
| 1 [^c1] | 2 [^c2] | 3 [^c3] | 
| 4 [^c4] | 5 [^c5] | 6 [^c6] |
| 7 [^c7] | 8 [^c8] | 9 [^c9] |

After table[^t1]

[^t0]: t0
[^h1]: h1
[^h2]: h2
[^h3]: h3
[^c8]: c8
[^c9]: c9
[^t1]: t1
[^c1]: c1
[^c2]: c2
[^c3]: c3
[^c4]: c4
[^c5]: c5
[^c6]: c6
[^c7]: c7

/* mdsvex.config.js */
const config = defineConfig({
    extensions: ['.svelte.md', '.md', '.svx'],

    remarkPlugins: [
        remarkParse,
        remarkGfm,
    ],
    rehypePlugins: [
        rehypeStringify,
     ],
    ... More Code ...
});

/* svelte.config.js */
... More Code ...
import { mdsvex } from 'mdsvex';
import mdsvexConfig from './mdsvex.config.js';

const config = {
    extensions: ['.svelte', ...mdsvexConfig.extensions],

    preprocess: [
        mdsvex(mdsvexConfig)
    ],
    ... More Code ...
}

Expected behavior

Before tableeeeeeeeeee ¹

h1 2	h2 3	h3 4
1 5	2 6	3 7
4 8	5 9	6 10
7 11	8 12	9 13

After table¹⁴

Footnotes

1. t0 ↩

2. h1 ↩

3. h2 ↩

4. h3 ↩

5. c1 ↩

6. c2 ↩

7. c3 ↩

8. c4 ↩

9. c5 ↩

10. c6 ↩

11. c7 ↩

12. c8 ↩

13. c9 ↩

14. t1 ↩

### Actual behavior

Before tableeeeeeeeeee ^t0

h1 h1 | h2 h2 | h3 h3 -- | -- | -- 1 c1 | 2 c2 | 3 c3 4 c4 | 5 c5 | 6 c6 7 c7 | 8 c8 | 9 c9

After table^t1

---

1. t0↩
2. c9↩
3. c8↩
4. c7↩
5. c6↩
6. c5↩
7. c4↩
8. c3↩
9. c2↩
10. c1↩
11. h3↩
12. h2↩
13. h1↩
14. t1↩

The point is that the footnote order inside table is reversed :/ ### Runtime Other (please specify in steps to reproduce) ### Package manager npm 8 ### OS macOS ### Build and bundle tools Vite

[wooorm]

This was solved a year ago: https://github.com/syntax-tree/mdast-util-to-hast/releases/tag/12.1.1

[github-actions[bot]]

Hi! This was closed. Team: If this was fixed, please add phase/solved. Otherwise, please add one of the no/* labels.

[magicpalmtree]

This was solved a year ago: https://github.com/syntax-tree/mdast-util-to-hast/releases/tag/12.1.1

did you checked with svelte+vite+mdsvex? @wooorm

[wooorm]

Why should I check those tools? I don’t work on them. If it’s an issue there, raise it there

[magicpalmtree]

Why should I check those tools? I don’t work on them. If it’s an issue there, raise it there

the issue is just on remark-gfm itself. actually other remark- packages are all working fine. I checked on the playground below and that is what I wanted. https://mdxjs.com/playground/ but can't implement on my project.

[wooorm]

No it’s not, remark-gfm doesn’t handle how tables are turned into HTML. That’s what remark-rehype/mdast-util-to-hast do. It’s fixed there. A year ago. All remark packages are working fine. The problem is in your other tools.

[magicpalmtree]

[wooorm]

What?

[magicpalmtree]

actually there is no problem with table. markdown is converted perfectly with just remark-parse and remark-gfm. but the issue is just on footnotes inside table.

if I remove remark-gfm and just use remark-rehype & remark-footnotes, then the footnotes order is fine but the table is not converted. the only way I can see table is using remark-gfm, but if I use that, footnotes order breaks.

please check this code & result on codesandbox https://codesandbox.io/s/currying-framework-o5ul2n?file=/src/index.js https://o5ul2n.csb.app/

[wooorm]

Codesandbox has some caching issues. Try on your computer:

import {unified} from 'unified'
import remarkParse from 'remark-parse'
import remarkGfm from 'remark-gfm'
import remarkRehype from './index.js'
import remarkStringify from 'rehype-stringify'

const file = await unified()
  .use(remarkParse)
  .use(remarkGfm)
  .use(remarkRehype)
  .use(remarkStringify)
  .process(
    `Before tableeeeeeeeeee [^t0]

| h1 [^h1] | h2 [^h2] |
| --- | --- |
| 1 [^c1] | 2 [^c2] |

After table[^t1]

[^t0]: t0
[^h1]: h1
[^h2]: h2
[^t1]: t1
[^c1]: c1
[^c2]: c2
`
  )

console.log(String(file))

<p>Before tableeeeeeeeeee <sup><a href="#user-content-fn-t0" id="user-content-fnref-t0" data-footnote-ref aria-describedby="footnote-label">1</a></sup></p>
<table>
<thead>
<tr>
<th>h1 <sup><a href="#user-content-fn-h1" id="user-content-fnref-h1" data-footnote-ref aria-describedby="footnote-label">2</a></sup></th>
<th>h2 <sup><a href="#user-content-fn-h2" id="user-content-fnref-h2" data-footnote-ref aria-describedby="footnote-label">3</a></sup></th>
</tr>
</thead>
<tbody>
<tr>
<td>1 <sup><a href="#user-content-fn-c1" id="user-content-fnref-c1" data-footnote-ref aria-describedby="footnote-label">4</a></sup></td>
<td>2 <sup><a href="#user-content-fn-c2" id="user-content-fnref-c2" data-footnote-ref aria-describedby="footnote-label">5</a></sup></td>
</tr>
</tbody>
</table>
<p>After table<sup><a href="#user-content-fn-t1" id="user-content-fnref-t1" data-footnote-ref aria-describedby="footnote-label">6</a></sup></p>
<section data-footnotes class="footnotes"><h2 class="sr-only" id="footnote-label">Footnotes</h2>
<ol>
<li id="user-content-fn-t0">
<p>t0 <a href="#user-content-fnref-t0" data-footnote-backref class="data-footnote-backref" aria-label="Back to content">↩</a></p>
</li>
<li id="user-content-fn-h1">
<p>h1 <a href="#user-content-fnref-h1" data-footnote-backref class="data-footnote-backref" aria-label="Back to content">↩</a></p>
</li>
<li id="user-content-fn-h2">
<p>h2 <a href="#user-content-fnref-h2" data-footnote-backref class="data-footnote-backref" aria-label="Back to content">↩</a></p>
</li>
<li id="user-content-fn-c1">
<p>c1 <a href="#user-content-fnref-c1" data-footnote-backref class="data-footnote-backref" aria-label="Back to content">↩</a></p>
</li>
<li id="user-content-fn-c2">
<p>c2 <a href="#user-content-fnref-c2" data-footnote-backref class="data-footnote-backref" aria-label="Back to content">↩</a></p>
</li>
<li id="user-content-fn-t1">
<p>t1 <a href="#user-content-fnref-t1" data-footnote-backref class="data-footnote-backref" aria-label="Back to content">↩</a></p>
</li>
</ol>
</section>

---

I gave you the solution three times: it’s not here, it’s in your other tools.

[magicpalmtree]

Yeah, it's working on local. seems the issue is on other part. Thanks. 👍