From f7510c81a44756dbb12fb11497124354c615fed9 Mon Sep 17 00:00:00 2001
From: Benjamin Preiss <benjaminpreiss@protonmail.com>
Date: Mon, 4 Jul 2022 22:49:27 +0200
Subject: [PATCH] Add h5 and h6 options to plugin (#273)

* Update index.js

Add h5 and h6 tag to index.js

* Update index.js

* Add test

* Update changelog

Co-authored-by: Jordan Pittman <jordan@cryptica.me>
---
 CHANGELOG.md      |  2 ++
 src/index.js      |  4 +++-
 src/index.test.js | 34 ++++++++++++++++++++++++++++++++--
 3 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b6c33d2..e899264 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Add styles for `tfoot` elements ([#243](https://github.com/tailwindlabs/tailwindcss-typography/pull/243))
+- Add `prose-h5` and `prose-h6` variants ([#273](https://github.com/tailwindlabs/tailwindcss-typography/pull/273))
 
 ## Fixed
 
@@ -18,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix generation of `prose-headings` variant ([#264](https://github.com/tailwindlabs/tailwindcss-typography/pull/264))
 - Fix `figure` spacing ([#267](https://github.com/tailwindlabs/tailwindcss-typography/pull/267))
 - Fix child combinator `:where` selectors ([#268](https://github.com/tailwindlabs/tailwindcss-typography/pull/267))
+- Fix `prose-headings` variant to include `h5` and `h6` elements ([#273](https://github.com/tailwindlabs/tailwindcss-typography/pull/273))
 
 ## [0.5.2] - 2022-02-14
 
diff --git a/src/index.js b/src/index.js
index 14a8b7b..096de2e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -87,11 +87,13 @@ module.exports = plugin.withOptions(
       let options = { className, prefix }
 
       for (let [name, ...selectors] of [
-        ['headings', 'h1', 'h2', 'h3', 'h4', 'th'],
+        ['headings', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'th'],
         ['h1'],
         ['h2'],
         ['h3'],
         ['h4'],
+        ['h5'],
+        ['h6'],
         ['p'],
         ['a'],
         ['blockquote'],
diff --git a/src/index.test.js b/src/index.test.js
index 57c3f15..143ca1d 100644
--- a/src/index.test.js
+++ b/src/index.test.js
@@ -435,6 +435,12 @@ test('legacy target', async () => {
         .prose-headings\:text-ellipsis h4 {
           text-overflow: ellipsis;
         }
+        .prose-headings\:text-ellipsis h5 {
+          text-overflow: ellipsis;
+        }
+        .prose-headings\:text-ellipsis h6 {
+          text-overflow: ellipsis;
+        }
         .prose-headings\:text-ellipsis th {
           text-overflow: ellipsis;
         }
@@ -621,7 +627,7 @@ test('element variants', async () => {
           font-weight: 700;
         }
         .prose-headings\:underline
-          :is(:where(h1, h2, h3, h4, th):not(:where([class~='not-prose'] *))) {
+          :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~='not-prose'] *))) {
           text-decoration-line: underline;
         }
         .prose-h1\:text-3xl :is(:where(h1):not(:where([class~='not-prose'] *))) {
@@ -793,7 +799,7 @@ test('element variants with custom class name', async () => {
           font-weight: 700;
         }
         .markdown-headings\:underline
-          :is(:where(h1, h2, h3, h4, th):not(:where([class~='not-markdown'] *))) {
+          :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~='not-markdown'] *))) {
           text-decoration-line: underline;
         }
         .markdown-h1\:text-3xl :is(:where(h1):not(:where([class~='not-markdown'] *))) {
@@ -970,3 +976,27 @@ it('should be possible to use nested syntax (&) when extending the config', () =
     `)
   })
 })
+
+it('should be possible to specify custom h5 and h6 styles', () => {
+  let config = {
+    plugins: [typographyPlugin()],
+    content: [
+      {
+        raw: html`<div class="prose prose-h5:text-sm prose-h6:text-xl"></div>`,
+      },
+    ],
+  }
+
+  return run(config).then((result) => {
+    expect(result.css).toIncludeCss(css`
+      .prose-h5\:text-sm :is(:where(h5):not(:where([class~='not-prose'] *))) {
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+      }
+      .prose-h6\:text-xl :is(:where(h6):not(:where([class~='not-prose'] *))) {
+        font-size: 1.25rem;
+        line-height: 1.75rem;
+      }
+    `)
+  })
+})