missing icon indicating copy to clipboard operation
missing copied to clipboard

allow nested lists by default

Open CosmicToast opened this issue 2 years ago • 4 comments

It's common to author content in markdown, and then programmatically generate html from it. Markdown compilers typically do not include ways to add custom classes to their output. Consequently, missing.css is relatively unusable with markdown generators when the content includes nested lists, since there's no easy way to add the class. The potential content-side solutions include:

  • using javascript to inject the class; this does not seem like an appropriate use for js
  • parsing the output html and modifying it in-line; this is extremely complex for a script that otherwise just shells out to cmark (for example)
  • overriding the missing.css css in a second file

Since one of the goals of missing.css is to "build common components using plain, semantic HTML", and generated markdown is about as plain and semantic as it gets, this seems to be a good fit. Of additional note, it's also a notable downgrade from classless css libraries, since those typically handle this use-case fine.

Potential solutions include:

  • having the nested-list behavior be the default
  • have an override that handles something like ul:has(li ul)

CosmicToast avatar Jul 30 '23 08:07 CosmicToast

In markdown, you can use a loose list by adding empty lines between list items:

  • a

  • b

    • c

    • d

  • e

as opposed to a tight list which doesn't have them:

  • a
  • b
    • c
    • d
  • e

This will create even spacing between all list items.

The problem we were having with removing margin automatically is that sometimes you want the margin:

  • Hello! I am a long list item containing some content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    • I am a nested list. I shouldn't hug the paragraph above or the one below.
    I am the continuation in the list item.

This rarely occurs in Markdown since it will wrap the content in paragraphs, but it does occur in handwritten HTML.

dz4k avatar Jan 27 '24 00:01 dz4k

With :has and all that, we should be able to work out a sufficiently robust regex. Besides, "... it does occur in handwritten HTML" was probably just referring to my sloppy markup. - Missing Roadmap

geoffrey-eisenbarth avatar Jun 12 '25 13:06 geoffrey-eisenbarth

Goal: only have margin on nested <ul> when it's sandwiched by text.

<ul>
  <li>One
  <li>Two
  <li>Here is a lot of text, possibly even multiple paragraphs!
      <!-- margin -->
      <ul><li>A
          <li>B</ul>
      <!-- margin -->
      And then I continue talking after the list.
  <li>Three
</ul>

geoffrey-eisenbarth avatar Jul 08 '25 19:07 geoffrey-eisenbarth

Since this is considered technically breaking, we're going to move it to the next major release, where ul ul { margin-block: 0 } will be implemented, and authors will be responsible for adding extra spacing in their <li> via <p> tags. We will deprecate it in the docs for v1.2.

geoffrey-eisenbarth avatar Jul 10 '25 13:07 geoffrey-eisenbarth