fix(theme-classic): allow nested task lists to preserve the indent

[Josh-Cena]

Pre-flight checklist

• I have read the Contributing Guidelines on pull requests.
• If this is a code change: I have written unit tests and/or added dogfooding pages to fully verify the new behavior.
• If this is a new API or substantial change: the PR has an accompanying issue (closes #0000) and the maintainers have approved on my working plan.

Motivation

I realized that nested task lists do not behave as intended. For example, on the TS-ESLint website:

The source is like:

- Configs:
  - [ ] ✅ Recommended
  - [x] 🔒 Strict
- [x] 🔧 Fixable
- [ ] 💭 Requires type information

The reason is because we applied padding-left: 0 to all lists that contain task lists. However, we should only do this for the top-level lists.

Test Plan

Test links

Deploy preview: https://deploy-preview-7438--docusaurus-2.netlify.app/tests/pages/markdownPageTests/#task-list

Note that the bullets are not rendered for all items, tasks or not. For reference, here's how GitHub renders it:

• Level
  • Task
  • Task
  • Another level
    • Task
    • Task
    • Deeper
      • Task
      • Task
    • Task
    • Task
• Task

I'm not sure if folks will prefer this style, but it also makes sense to me, compared to ours, which will always remove the bullet even when the current list item is not a task item.

Related issues/PRs

[netlify]

✅ [V2]

Name	Link
🔨 Latest commit	3be50ab
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/62835edd161ef70008337230
😎 Deploy Preview	https://deploy-preview-7438--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[github-actions]

⚡️ Lighthouse report for the deploy preview of this PR

URL	Performance	Accessibility	Best Practices	SEO	PWA	Report
/	🟠 85	🟢 100	🟢 100	🟢 100	🟢 90	Report
/docs/installation	🟠 89	🟢 99	🟢 100	🟢 100	🟢 90	Report

[netlify]

✅ [V2]

Name	Link
🔨 Latest commit	e417d4d
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/628f5588ba6e3300098f0a93
😎 Deploy Preview	https://deploy-preview-7438--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[github-actions]

Size Change: 0 B

Total Size: 796 kB

ℹ️ View Unchanged

Filename	Size
website/.docusaurus/globalData.json	52.3 kB
website/build/assets/css/styles.********.css	106 kB
website/build/assets/js/main.********.js	598 kB
website/build/index.html	38.9 kB

_{compressed-size-action}

[slorber]

Looks like it's working, but why remove MDXUl instead of encapsulating this logic here?

Note that the bullets are not rendered for all items

I prefer GitHub style but it looks more complicated to achieve (using negative margins etc) and nobody asked for this yet so not a big deal 🤷

[slorber]

why remove MDXUl?

It is a "safe" component meant to be swizzled and customized. Removing it means a breaking change.

[slorber]

MDXUl is a better place to import the CSS there. I'd like to avoid such imports in MDXComponents and just keep it as a simple map

BTW if MDX injets a .contains-task-list, it does not necessarily mean that we have to apply it, and we can keep using scoped CSS modules

[Josh-Cena]

OK, I've added MDXUl back.

.contains-task-list is the class name used by GitHub, so I thought it makes sense to re-use the same CSS rules as they do, rather than inventing another class name just to apply our styles.