ul styled with disc inside irregular indentation

[jonohewitt]

Hi everyone, in my MDX code I have a ul with two li items, each with a component but one followed by additional plain text e.g:

  - <span>Example</span>
  - <span>Example</span> .

When I style this ul with list-style: disc inside, I somehow get additional whitespace added before the start of the component text only on the li that is not followed by plain text. This leads to choppy indentation, e.g

Does anyone have any ideas of what might be causing this and what I could do to fix it? Thank you!

[wooorm]

This is, at the root, likely due to how interleaving works. https://mdxjs.com/docs/what-is-mdx/#interleaving. In essence, “same line or not”. That makes the first item a “block” on its own. And the second item a “paragraph” that contains the components and the .. Then, list items in markdown come into play. Because there are no blank lines, these are tight list items. Meaning that there the paragraphs are not output. At some point, I’d have to dig into things, those line endings are inserted, but differently due to “paragraph or not”.

If you don’t like the interleaving, you can always force JSX by opening expressions, e.g.,

- {<><span>Example</span></>}
- {<><span>Example</span>.</>}

…or the whole list in JSX maybe?