From 1874110782ae8e232aad84e60207a36955c626af Mon Sep 17 00:00:00 2001
From: Folyd <lyshuhow@gmail.com>
Date: Sat, 26 Mar 2022 01:45:46 +0800
Subject: [PATCH] Fix prose elements `legacy` mode. Fixes #258 (#259)

* Fix prose elements `legacy` mode. Fixes #258

* Add test

* Fix legacy mode custom element selectors

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

diff --git a/src/index.js b/src/index.js
index a4f79b4..a021223 100644
--- a/src/index.js
+++ b/src/index.js
@@ -117,7 +117,7 @@ module.exports = plugin.withOptions(
         ['video'],
         ['hr'],
       ]) {
-        addVariant(`${className}-${name}`, `& :is(${inWhere(selector, options)})`)
+        addVariant(`${className}-${name}`, target === 'legacy' ? `& ${selector}` : `& :is(${inWhere(selector, options)})`)
       }
 
       addComponents(
diff --git a/src/index.test.js b/src/index.test.js
index 7f624f1..0d72fe1 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"></div>` }],
+    content: [{ raw: html`<div class="prose prose-h1:text-center"></div>` }],
     theme: {
       typography: {
         DEFAULT: {
@@ -423,6 +423,9 @@ test('legacy target', async () => {
         .prose code::after {
           content: '&#96;';
         }
+        .prose-h1\:text-center h1 {
+          text-align: center;
+        }
       `
     )
   })