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>

Author: benjaminpreiss

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
 

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'],

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;
+      }
+    `)
+  })
+})