Fix space between <figcaption> and <pre> (tailwindlabs#313)

* Fix space between `<figcaption>` and `<pre>`

* Update changelog

Author: reinink

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Fix space between `<figcaption>` and `<pre>` ([#313](https://github.com/tailwindlabs/tailwindcss-typography/pull/313))
 
 ## [0.5.9] - 2023-01-10
 

src/styles.js

@@ -60,19 +60,6 @@ let defaultModifiers = {
           marginTop: em(24, 14),
           marginBottom: em(24, 14),
         },
-        figure: {
-          marginTop: em(24, 14),
-          marginBottom: em(24, 14),
-        },
-        'figure > *': {
-          marginTop: '0',
-          marginBottom: '0',
-        },
-        figcaption: {
-          fontSize: em(12, 14),
-          lineHeight: round(16 / 12),
-          marginTop: em(8, 12),
-        },
         code: {
           fontSize: em(12, 14),
         },
@@ -176,6 +163,19 @@ let defaultModifiers = {
         'tbody td:last-child, tfoot td:last-child': {
           paddingRight: '0',
         },
+        figure: {
+          marginTop: em(24, 14),
+          marginBottom: em(24, 14),
+        },
+        'figure > *': {
+          marginTop: '0',
+          marginBottom: '0',
+        },
+        figcaption: {
+          fontSize: em(12, 14),
+          lineHeight: round(16 / 12),
+          marginTop: em(8, 12),
+        },
       },
       {
         '> :first-child': {
@@ -238,19 +238,6 @@ let defaultModifiers = {
           marginTop: em(32, 16),
           marginBottom: em(32, 16),
         },
-        figure: {
-          marginTop: em(32, 16),
-          marginBottom: em(32, 16),
-        },
-        'figure > *': {
-          marginTop: '0',
-          marginBottom: '0',
-        },
-        figcaption: {
-          fontSize: em(14, 16),
-          lineHeight: round(20 / 14),
-          marginTop: em(12, 14),
-        },
         code: {
           fontSize: em(14, 16),
         },
@@ -354,6 +341,19 @@ let defaultModifiers = {
         'tbody td:last-child, tfoot td:last-child': {
           paddingRight: '0',
         },
+        figure: {
+          marginTop: em(32, 16),
+          marginBottom: em(32, 16),
+        },
+        'figure > *': {
+          marginTop: '0',
+          marginBottom: '0',
+        },
+        figcaption: {
+          fontSize: em(14, 16),
+          lineHeight: round(20 / 14),
+          marginTop: em(12, 14),
+        },
       },
       {
         '> :first-child': {
@@ -416,19 +416,6 @@ let defaultModifiers = {
           marginTop: em(32, 18),
           marginBottom: em(32, 18),
         },
-        figure: {
-          marginTop: em(32, 18),
-          marginBottom: em(32, 18),
-        },
-        'figure > *': {
-          marginTop: '0',
-          marginBottom: '0',
-        },
-        figcaption: {
-          fontSize: em(16, 18),
-          lineHeight: round(24 / 16),
-          marginTop: em(16, 16),
-        },
         code: {
           fontSize: em(16, 18),
         },
@@ -532,6 +519,19 @@ let defaultModifiers = {
         'tbody td:last-child, tfoot td:last-child': {
           paddingRight: '0',
         },
+        figure: {
+          marginTop: em(32, 18),
+          marginBottom: em(32, 18),
+        },
+        'figure > *': {
+          marginTop: '0',
+          marginBottom: '0',
+        },
+        figcaption: {
+          fontSize: em(16, 18),
+          lineHeight: round(24 / 16),
+          marginTop: em(16, 16),
+        },
       },
       {
         '> :first-child': {
@@ -594,19 +594,6 @@ let defaultModifiers = {
           marginTop: em(40, 20),
           marginBottom: em(40, 20),
         },
-        figure: {
-          marginTop: em(40, 20),
-          marginBottom: em(40, 20),
-        },
-        'figure > *': {
-          marginTop: '0',
-          marginBottom: '0',
-        },
-        figcaption: {
-          fontSize: em(18, 20),
-          lineHeight: round(28 / 18),
-          marginTop: em(18, 18),
-        },
         code: {
           fontSize: em(18, 20),
         },
@@ -710,6 +697,19 @@ let defaultModifiers = {
         'tbody td:last-child, tfoot td:last-child': {
           paddingRight: '0',
         },
+        figure: {
+          marginTop: em(40, 20),
+          marginBottom: em(40, 20),
+        },
+        'figure > *': {
+          marginTop: '0',
+          marginBottom: '0',
+        },
+        figcaption: {
+          fontSize: em(18, 20),
+          lineHeight: round(28 / 18),
+          marginTop: em(18, 18),
+        },
       },
       {
         '> :first-child': {
@@ -772,19 +772,6 @@ let defaultModifiers = {
           marginTop: em(48, 24),
           marginBottom: em(48, 24),
         },
-        figure: {
-          marginTop: em(48, 24),
-          marginBottom: em(48, 24),
-        },
-        'figure > *': {
-          marginTop: '0',
-          marginBottom: '0',
-        },
-        figcaption: {
-          fontSize: em(20, 24),
-          lineHeight: round(32 / 20),
-          marginTop: em(20, 20),
-        },
         code: {
           fontSize: em(20, 24),
         },
@@ -888,6 +875,19 @@ let defaultModifiers = {
         'tbody td:last-child, tfoot td:last-child': {
           paddingRight: '0',
         },
+        figure: {
+          marginTop: em(48, 24),
+          marginBottom: em(48, 24),
+        },
+        'figure > *': {
+          marginTop: '0',
+          marginBottom: '0',
+        },
+        figcaption: {
+          fontSize: em(20, 24),
+          lineHeight: round(32 / 20),
+          marginTop: em(20, 20),
+        },
       },
       {
         '> :first-child': {
@@ -1237,8 +1237,7 @@ module.exports = {
       {
         color: 'var(--tw-prose-body)',
         maxWidth: '65ch',
-        // TODO: Figure out how to not need this, it's a merging issue
-        p: {},
+        p: {}, // Required to maintain correct order when merging
         '[class~="lead"]': {
           color: 'var(--tw-prose-lead)',
         },
@@ -1350,12 +1349,7 @@ module.exports = {
           fontWeight: '700',
           color: 'inherit',
         },
-        // TODO: Figure out how to not need these, it's a merging issue
-        img: {},
-        'figure > *': {},
-        figcaption: {
-          color: 'var(--tw-prose-captions)',
-        },
+        img: {}, // Required to maintain correct order when merging
         code: {
           color: 'var(--tw-prose-code)',
           fontWeight: '600',
@@ -1443,6 +1437,10 @@ module.exports = {
         'tfoot td': {
           verticalAlign: 'top',
         },
+        'figure > *': {}, // Required to maintain correct order when merging
+        figcaption: {
+          color: 'var(--tw-prose-captions)',
+        },
       },
       defaultModifiers.gray.css,
       ...defaultModifiers.base.css,