From ac0fcdaaaf0ff2616d08a487ba5bb275c2dc2aa6 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Wed, 13 Apr 2022 10:30:48 -0400
Subject: [PATCH] Fix generation of `prose-headings` variant (#264)

* Fix prose-headings variant

* Update changelog
---
 CHANGELOG.md      |  1 +
 src/index.js      | 12 +++++++++---
 src/index.test.js | 17 ++++++++++++++++-
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0bbe3ee..31b1c7a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Fix prose elements `legacy` mode ([#259](https://github.com/tailwindlabs/tailwindcss-typography/pull/259))
 - Allow `lead` class to override element styles ([#260](https://github.com/tailwindlabs/tailwindcss-typography/pull/260))
+- Fix generation of `prose-headings` variant  ([#264](https://github.com/tailwindlabs/tailwindcss-typography/pull/264))
 
 ## [0.5.2] - 2022-02-14
 
diff --git a/src/index.js b/src/index.js
index c30b522..e8ce67f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -89,8 +89,8 @@ module.exports = plugin.withOptions(
 
       let options = { className, prefix }
 
-      for (let [name, selector = name] of [
-        ['headings', 'h1, h2, h3, h4, th'],
+      for (let [name, ...selectors] of [
+        ['headings', 'h1', 'h2', 'h3', 'h4', 'th'],
         ['h1'],
         ['h2'],
         ['h3'],
@@ -117,7 +117,13 @@ module.exports = plugin.withOptions(
         ['hr'],
         ['lead', '[class~="lead"]'],
       ]) {
-        addVariant(`${className}-${name}`, target === 'legacy' ? `& ${selector}` : `& :is(${inWhere(selector, options)})`)
+        selectors = selectors.length === 0 ? [name] : selectors
+
+        let selector = target === 'legacy'
+          ? selectors.map(selector => `& ${selector}`)
+          : selectors.join(', ')
+
+        addVariant(`${className}-${name}`, target === 'legacy' ? selector : `& :is(${inWhere(selector, options)})`)
       }
 
       addComponents(
diff --git a/src/index.test.js b/src/index.test.js
index 5c2ce9f..d3c1b02 100644
--- a/src/index.test.js
+++ b/src/index.test.js
@@ -335,7 +335,7 @@ test('modifiers', async () => {
 test('legacy target', async () => {
   let config = {
     plugins: [typographyPlugin({ target: 'legacy' })],
-    content: [{ raw: html`<div class="prose prose-h1:text-center"></div>` }],
+    content: [{ raw: html`<div class="prose prose-h1:text-center prose-headings:text-ellipsis"></div>` }],
     theme: {
       typography: {
         DEFAULT: {
@@ -423,6 +423,21 @@ test('legacy target', async () => {
         .prose code::after {
           content: '&#96;';
         }
+        .prose-headings\:text-ellipsis h1 {
+          text-overflow: ellipsis;
+        }
+        .prose-headings\:text-ellipsis h2 {
+          text-overflow: ellipsis;
+        }
+        .prose-headings\:text-ellipsis h3 {
+          text-overflow: ellipsis;
+        }
+        .prose-headings\:text-ellipsis h4 {
+          text-overflow: ellipsis;
+        }
+        .prose-headings\:text-ellipsis th {
+          text-overflow: ellipsis;
+        }
         .prose-h1\:text-center h1 {
           text-align: center;
         }