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 <[email protected]>

Author: Folyd

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