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>
tailwindlabs · Mar 25, 2022 · 1874110 · 1874110 · vercel · Mar 25, 2022
1 parent c346878
commit 1874110
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git 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
@@ -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;
+        }
       `
     )
   })