allow nested lists by default
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)
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.
This rarely occurs in Markdown since it will wrap the content in paragraphs, but it does occur in handwritten HTML.
With
:hasand 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
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>
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.