Gatsby: [gatsby-transformer-remark] Nested lists inserting rogue paragraphs

[martynhoyer]

Seems similar to https://github.com/gatsbyjs/gatsby/issues/4096 which got closed

Description

Using a markdown nested list seems to produce some slightly awkward/inconsistent markup which is a bit challenging to style. If an <li> has a child <ul>, that list item's content will be wrapped in a paragraph.

Steps to reproduce

Project is private on GitLab I'm afraid, but using a markdown page, add the following markdown content:

- List item one
- List item two
- List item three
- List item four
  - Nested list item four point one
  - Nested list item four point two
- List item five
  - Nested list item five point one
- List item six

Expected result

Rendered HTML should be:

<ul>
  <li>List item one</li>
  <li>List item two</li>
  <li>List item three</li>
  <li>
    List item four
    <ul>
      <li>Nested list item four point one</li>
      <li>Nested list item four point two</li>
    </ul>
  </li>
  <li>
    List item five
    <ul>
      <li>Nested list item five point one</li>
    </ul>
  </li>
  <li>List item six</li>
</ul>

Actual result

Rendered HTML is (note the two parent <li>s with <p>s around their content):

<ul>
  <li>List item one</li>
  <li>List item two</li>
  <li>List item three</li>
  <li>
    <p>List item four</p>
    <ul>
      <li>Nested list item four point one</li>
      <li>Nested list item four point two</li>
    </ul>
  </li>
  <li>
    <p>List item five</p>
    <ul>
      <li>Nested list item five point one</li>
    </ul>
  </li>
  <li>List item six</li>
</ul>

Environment

  System:
    OS: macOS 10.14.2
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.14.1 - ~/.nvm/versions/node/v10.14.1/bin/node
    npm: 6.4.1 - ~/.nvm/versions/node/v10.14.1/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 71.0.3578.98
    Firefox: 64.0
    Safari: 12.0.2
  npmPackages:
    gatsby: ^2.0.83 => 2.0.83 
    gatsby-image: ^2.0.25 => 2.0.25 
    gatsby-plugin-catch-links: ^2.0.9 => 2.0.9 
    gatsby-plugin-manifest: ^2.0.13 => 2.0.13 
    gatsby-plugin-netlify: ^2.0.6 => 2.0.6 
    gatsby-plugin-netlify-cms: ^3.0.9 => 3.0.9 
    gatsby-plugin-netlify-cms-paths: ^1.1.0 => 1.1.0 
    gatsby-plugin-offline: ^2.0.20 => 2.0.20 
    gatsby-plugin-react-helmet: ^3.0.5 => 3.0.5 
    gatsby-plugin-sharp: ^2.0.17 => 2.0.17 
    gatsby-plugin-styled-components: ^3.0.4 => 3.0.4 
    gatsby-plugin-svgr: ^2.0.1 => 2.0.1 
    gatsby-remark-images: ^3.0.1 => 3.0.1 
    gatsby-remark-relative-images: ^0.2.1 => 0.2.1 
    gatsby-source-filesystem: ^2.0.12 => 2.0.12 
    gatsby-transformer-remark: ^2.1.19 => 2.1.19 
    gatsby-transformer-sharp: ^2.1.10 => 2.1.10 
  npmGlobalPackages:
    gatsby-cli: 2.4.8

[sidharthachatterjee]

Thank you for opening this @martynhoyer

I added a resolver for the markdownAst to gatsby-transformer-remark so inspect what remark returns for the markdown you posted above

Calling remark.parse(markdownNode.internal.content) on it returns

              {
                "type": "listItem",
                "loose": false,
                "checked": null,
                "children": [
                  {
                    "type": "paragraph",
                    "children": [
                      {
                        "type": "text",
                        "value": "List item six",
                        "position": {
                          "start": {
                            "line": 27,
                            "column": 3,
                            "offset": 992
                          },
                          "end": {
                            "line": 27,
                            "column": 16,
                            "offset": 1005
                          },
                          "indent": []
                        }
                      }
                    ],

Looks like it is an upstream issue with remark

[sidharthachatterjee]

After diving a little more into this, it seems that remark always wraps text in paragraphs (https://github.com/remarkjs/remark/issues/104) and mdast-util-to-hast _unrolls_ only tight lists

https://daringfireball.net/projects/markdown/syntax#list doesn't mention nested lists and https://commonmark.org/help/tutorial/10-nestedLists.html mentions that the expected output is without _p_ tags so I'm not sure if this is a bug or not

@pieh Thoughts?

[martynhoyer]

Thanks for looking! I did a bit more research myself and ended up at the remark route too. It's a bit odd though - using this preview tool it seems to work as expected and that uses remark/unified under the hood:
https://rexxars.github.io/react-markdown/

This one, however has the same issue, but _doesn't_ appear to be using Remark at all...! 🤷‍♂️
https://markdownlivepreview.com/
https://github.com/tanabe/markdown-live-preview

[sidharthachatterjee]

https://rexxars.github.io/react-markdown doesn't use mdast-util-to-hast

It has its own renderers for elements. They do seem to include paragraphs in non tight lists in the last element at https://github.com/rexxars/react-markdown/commit/3bee068ea60069a5ce8a6b964e66ed35f0e4992f

[martynhoyer]

I see! In that case, apologies for the noise!

[sidharthachatterjee]

No problem at all, @martynhoyer 🙂

Let's keep this open for now and see what everyone else thinks

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[AryanJ-NYC]

I have a similar problem to this. How is/was this solved?

[martynhoyer]

@AryanJ-NYC It wasn't really... I ended up just hacking around with the CSS to remove the inappropriate margins from the paragraphs inside the list items.

[ishan0445]

I have a similar problem to this. How is/was this solved?

Just like @martynhoyer suggested, I have removed the extra space from the

tag inside

.

li > p {
    margin-top: -24px;
}