Fix generation of prose-headings variant (#264)

* Fix prose-headings variant

* Update changelog

Author: thecrypticace

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
 

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(

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;
         }