Ensure p styles are inserted before .lead styles (#294)

tailwindlabs · Jan 10, 2023 · a5d0bc2 · a5d0bc2 · vercel · Jan 10, 2023
1 parent fda8ce5
commit a5d0bc2
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 0 deletions.
diff --git a/src/index.test.js b/src/index.test.js
@@ -1294,3 +1294,31 @@ it('ignores common non-trailing pseudo-elements in selectors', () => {
     `)
   })
 })
+
+test('lead styles are inserted after paragraph styles', async () => {
+  let config = {
+    content: [{ raw: html`<div class="prose"></div>` }],
+  }
+
+  return run(config).then((result) => {
+    expect(result.css).toIncludeCss(
+      css`
+        .prose {
+          color: var(--tw-prose-body);
+          max-width: 65ch;
+        }
+        .prose :where(p):not(:where([class~='not-prose'] *)) {
+          margin-top: 1.25em;
+          margin-bottom: 1.25em;
+        }
+        .prose :where([class~='lead']):not(:where([class~='not-prose'] *)) {
+          color: var(--tw-prose-lead);
+          font-size: 1.25em;
+          line-height: 1.6;
+          margin-top: 1.2em;
+          margin-bottom: 1.2em;
+        }
+      `
+    )
+  })
+})
diff --git a/src/styles.js b/src/styles.js
@@ -1237,6 +1237,8 @@ module.exports = {
       {
         color: 'var(--tw-prose-body)',
         maxWidth: '65ch',
+        // TODO: Figure out how to not need this, it's a merging issue
+        p: {},
         '[class~="lead"]': {
           color: 'var(--tw-prose-lead)',
         },