[v3] fix vertical margin for nested ordered <ol /> and unordered <ul /> lists (#2969)

* fix

* prettier

* use pnpm/action-setup@v4

Author: Dimitri POSTOLOV

.changeset/giant-gifts-care.md

@@ -0,0 +1,5 @@
+---
+'nextra-theme-docs': patch
+---
+
+fix vertical margin for nested ordered `<ol />` and unordered `<ul />` lists

.github/workflows/lint.yml

@@ -20,7 +20,7 @@ jobs:
       - name: Checkout Master
         uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v2.4.0
+      - uses: pnpm/action-setup@v4
 
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v4

.github/workflows/nextjs-bundle-analysis.yml

@@ -26,7 +26,7 @@ jobs:
 
       - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v2.4.0
+      - uses: pnpm/action-setup@v4
 
       - name: Install Node.js
         uses: actions/setup-node@v4

.github/workflows/release.yml

@@ -13,7 +13,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v2.4.0
+      - uses: pnpm/action-setup@v4
 
       - name: Install Node.js
         uses: actions/setup-node@v4

.github/workflows/test.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Checkout Master
         uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v2.4.0
+      - uses: pnpm/action-setup@v4
 
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v4

examples/blog/pages/posts/lists.mdx

@@ -0,0 +1,19 @@
+---
+title: Lists
+date: 2024/7/11
+description: Example of ordered/unordered nested lists.
+tag: web development
+author: Dimitri POSTOLOV
+---
+
+- **foo**
+  - bar
+  - **baz**
+    - qux
+    - **qwe**
+      1. he
+      1. **be**
+         1. wo
+         1. **be** da
+            - da
+            - ba

examples/swr-site/pages/en/docs/getting-started.mdx

@@ -5,6 +5,18 @@ import { Callout, FileTree, Steps } from 'nextra/components'
 
 https://google.com/da;djaldhksagfugsufgasuyfgyuasgfuasgdjasbdjasdjkasfuydfasyrdyafsdygasjdgasgdsafgdhjfasgjdfsahjdfsahjgdasgdjkasgdkjasgdkjasgdkagdkjasgdkjagdkjagdkagdkagdkjagdkagdkagdkagda
 
+- **foo**
+  - bar
+  - **baz**
+    - qux
+    - **qwe**
+      1. he
+      1. **be**
+         1. wo
+         1. **be** da
+            - da
+            - ba
+
 <Steps>
 ### One
   <Steps>

packages/nextra-theme-docs/src/components/flexsearch.tsx

@@ -199,7 +199,7 @@ export function Flexsearch({
           prefix: isFirstItemOfPage && (
             <div
               className={cn(
-                '_mx-2.5 _mb-2 _mt-6 _select-none _border-b _border-black/10 _px-2.5 _pb-1.5 _text-xs _font-semibold _uppercase _text-gray-500 first:_mt-0 dark:_border-white/20 dark:_text-gray-300',
+                '_mx-2.5 _mb-2 [&:not(:first-child)]:_mt-6 _select-none _border-b _border-black/10 _px-2.5 _pb-1.5 _text-xs _font-semibold _uppercase _text-gray-500 dark:_border-white/20 dark:_text-gray-300',
                 'contrast-more:_border-gray-600 contrast-more:_text-gray-900 contrast-more:dark:_border-gray-50 contrast-more:dark:_text-gray-50'
               )}
             >

packages/nextra-theme-docs/src/components/sidebar.tsx

@@ -201,7 +201,7 @@ function Separator({ title }: { title: string }): ReactElement {
       className={cn(
         '[word-break:break-word]',
         title
-          ? '_mt-5 _mb-2 _px-2 _py-1.5 _text-sm _font-semibold _text-gray-900 first:_mt-0 dark:_text-gray-100'
+          ? '[&:not(:first-child)]:_mt-5 _mb-2 _px-2 _py-1.5 _text-sm _font-semibold _text-gray-900 dark:_text-gray-100'
           : '_my-4'
       )}
     >

packages/nextra-theme-docs/src/mdx-components.tsx

@@ -134,7 +134,7 @@ function Details({
 
   return (
     <details
-      className="_my-4 _rounded _border _border-gray-200 _bg-white _p-2 _shadow-sm first:_mt-0 dark:_border-neutral-800 dark:_bg-neutral-900"
+      className="[&:not(:first-child)]:_mt-4 _rounded _border _border-gray-200 _bg-white _p-2 _shadow-sm dark:_border-neutral-800 dark:_bg-neutral-900"
       {...props}
       open={delayedOpenState}
       data-expanded={openState ? '' : undefined}
@@ -281,22 +281,22 @@ const DEFAULT_COMPONENTS: MDXComponents = {
   ),
   ul: props => (
     <ul
-      className="_mt-6 _list-disc first:_mt-0 ltr:_ml-6 rtl:_mr-6"
+      className="[:is(ol,ul)_&]:_my-3 [&:not(:first-child)]:_mt-6 _list-disc ltr:_ml-6 rtl:_mr-6"
       {...props}
     />
   ),
   ol: props => (
     <ol
-      className="_mt-6 _list-decimal first:_mt-0 ltr:_ml-6 rtl:_mr-6"
+      className="[:is(ol,ul)_&]:_my-3 [&:not(:first-child)]:_mt-6 _list-decimal ltr:_ml-6 rtl:_mr-6"
       {...props}
     />
   ),
   li: props => <li className="_my-2" {...props} />,
   blockquote: props => (
     <blockquote
       className={cn(
-        '_mt-6 _border-gray-300 _italic _text-gray-700 dark:_border-gray-700 dark:_text-gray-400',
-        'first:_mt-0 ltr:_border-l-2 ltr:_pl-6 rtl:_border-r-2 rtl:_pr-6'
+        '[&:not(:first-child)]:_mt-6 _border-gray-300 _italic _text-gray-700 dark:_border-gray-700 dark:_text-gray-400',
+        'ltr:_border-l-2 ltr:_pl-6 rtl:_border-r-2 rtl:_pr-6'
       )}
       {...props}
     />
@@ -309,9 +309,14 @@ const DEFAULT_COMPONENTS: MDXComponents = {
   ),
   a: Link,
   table: props => (
-    <Table className="nextra-scrollbar _mt-6 _p-0 first:_mt-0" {...props} />
+    <Table
+      className="nextra-scrollbar [&:not(:first-child)]:_mt-6 _p-0"
+      {...props}
+    />
+  ),
+  p: props => (
+    <p className="[&:not(:first-child)]:_mt-6 _leading-7" {...props} />
   ),
-  p: props => <p className="_mt-6 _leading-7 first:_mt-0" {...props} />,
   tr: Tr,
   th: Th,
   td: Td,

packages/nextra/src/client/components/pre.tsx

@@ -41,7 +41,7 @@ export function Pre({
   )
 
   return (
-    <div className="nextra-code _relative _mt-6 first:_mt-0">
+    <div className="nextra-code _relative [&:not(:first-child)]:_mt-6">
       {filename && (
         <div
           className={cn(