diff --git a/CHANGELOG.md b/CHANGELOG.md index 60994ff..e3ed6c1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed - Fix space between `
` and `
` ([#313](https://github.com/tailwindlabs/tailwindcss-typography/pull/313))
+- Remove typography styles from `not-prose` elements in addition to their children ([#301](https://github.com/tailwindlabs/tailwindcss-typography/pull/301))
 
 ## [0.5.9] - 2023-01-10
 
diff --git a/src/index.js b/src/index.js
index bf2b1a1..7b32ca7 100644
--- a/src/index.js
+++ b/src/index.js
@@ -19,10 +19,10 @@ function inWhere(selector, { className, modifier, prefix }) {
   let [trailingPseudo, rebuiltSelector] = commonTrailingPseudos(selector)
 
   if (trailingPseudo) {
-    return `:where(${selectorPrefix}${rebuiltSelector}):not(:where([class~="${prefixedNot}"] *))${trailingPseudo}`
+    return `:where(${selectorPrefix}${rebuiltSelector}):not(:where([class~="${prefixedNot}"],[class~="${prefixedNot}"] *))${trailingPseudo}`
   }
 
-  return `:where(${selectorPrefix}${selector}):not(:where([class~="${prefixedNot}"] *))`
+  return `:where(${selectorPrefix}${selector}):not(:where([class~="${prefixedNot}"],[class~="${prefixedNot}"] *))`
 }
 
 function isObject(value) {
diff --git a/src/index.test.js b/src/index.test.js
index d6cbf58..94e3552 100644
--- a/src/index.test.js
+++ b/src/index.test.js
@@ -140,40 +140,45 @@ test('specificity is reduced with :where', async () => {
           color: var(--tw-prose-body);
           max-width: 65ch;
         }
-        .prose :where([class~='lead']):not(:where([class~='not-prose'] *)) {
+        .prose :where([class~='lead']):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           color: var(--tw-prose-lead);
         }
-        .prose :where(strong):not(:where([class~='not-prose'] *)) {
+        .prose :where(strong):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           color: var(--tw-prose-bold);
           font-weight: 600;
         }
-        .prose :where(ol[type='A']):not(:where([class~='not-prose'] *)) {
+        .prose :where(ol[type='A']):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           list-style-type: upper-alpha;
         }
-        .prose :where(blockquote p:first-of-type):not(:where([class~='not-prose'] *))::before {
+        .prose
+          :where(blockquote p:first-of-type):not(:where([class~='not-prose'], [class~='not-prose']
+              *))::before {
           content: open-quote;
         }
-        .prose :where(blockquote p:last-of-type):not(:where([class~='not-prose'] *))::after {
+        .prose
+          :where(blockquote p:last-of-type):not(:where([class~='not-prose'], [class~='not-prose']
+              *))::after {
           content: close-quote;
         }
-        .prose :where(h4 strong):not(:where([class~='not-prose'] *)) {
+        .prose :where(h4 strong):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           font-weight: 700;
         }
-        .prose :where(figure > *):not(:where([class~='not-prose'] *)) {
+        .prose :where(figure > *):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           margin: 0;
         }
-        .prose :where(ol > li):not(:where([class~='not-prose'] *))::marker {
+        .prose :where(ol > li):not(:where([class~='not-prose'], [class~='not-prose'] *))::marker {
           font-weight: 400;
           color: var(--tw-prose-counters);
         }
-        .prose :where(.prose > ul > li p):not(:where([class~='not-prose'] *)) {
+        .prose
+          :where(.prose > ul > li p):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           margin-top: 16px;
           margin-bottom: 16px;
         }
-        .prose :where(code):not(:where([class~='not-prose'] *))::before {
+        .prose :where(code):not(:where([class~='not-prose'], [class~='not-prose'] *))::before {
           content: '`';
         }
-        .prose :where(code):not(:where([class~='not-prose'] *))::after {
+        .prose :where(code):not(:where([class~='not-prose'], [class~='not-prose'] *))::after {
           content: '`';
         }
       `
@@ -230,21 +235,24 @@ test('variants', async () => {
         .hover\:prose-lg:hover {
           color: green;
         }
-        .hover\:prose-lg:hover :where(p):not(:where([class~='not-prose'] *)) {
+        .hover\:prose-lg:hover :where(p):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           color: tomato;
         }
         .hover\:prose-lg:hover
-          :where(.hover\:prose-lg:hover > ul > li):not(:where([class~='not-prose'] *)) {
+          :where(.hover\:prose-lg:hover
+            > ul
+            > li):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           color: blue;
         }
         @media (min-width: 640px) {
           .sm\:prose {
             color: red;
           }
-          .sm\:prose :where(p):not(:where([class~='not-prose'] *)) {
+          .sm\:prose :where(p):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
             color: lime;
           }
-          .sm\:prose :where(.sm\:prose > ul > li):not(:where([class~='not-prose'] *)) {
+          .sm\:prose
+            :where(.sm\:prose > ul > li):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
             color: purple;
           }
         }
@@ -252,10 +260,12 @@ test('variants', async () => {
           .lg\:prose-lg {
             color: green;
           }
-          .lg\:prose-lg :where(p):not(:where([class~='not-prose'] *)) {
+          .lg\:prose-lg :where(p):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
             color: tomato;
           }
-          .lg\:prose-lg :where(.lg\:prose-lg > ul > li):not(:where([class~='not-prose'] *)) {
+          .lg\:prose-lg
+            :where(.lg\:prose-lg > ul > li):not(:where([class~='not-prose'], [class~='not-prose']
+                *)) {
             color: blue;
           }
         }
@@ -359,67 +369,73 @@ test('modifiers', async () => {
           color: var(--tw-prose-body);
           max-width: 65ch;
         }
-        .prose :where([class~='lead']):not(:where([class~='not-prose'] *)) {
+        .prose :where([class~='lead']):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           color: var(--tw-prose-lead);
         }
-        .prose :where(strong):not(:where([class~='not-prose'] *)) {
+        .prose :where(strong):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           color: var(--tw-prose-bold);
           font-weight: 600;
         }
-        .prose :where(ol[type='A']):not(:where([class~='not-prose'] *)) {
+        .prose :where(ol[type='A']):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           list-style-type: upper-alpha;
         }
-        .prose :where(blockquote p:first-of-type):not(:where([class~='not-prose'] *))::before {
+        .prose
+          :where(blockquote p:first-of-type):not(:where([class~='not-prose'], [class~='not-prose']
+              *))::before {
           content: open-quote;
         }
-        .prose :where(blockquote p:last-of-type):not(:where([class~='not-prose'] *))::after {
+        .prose
+          :where(blockquote p:last-of-type):not(:where([class~='not-prose'], [class~='not-prose']
+              *))::after {
           content: close-quote;
         }
-        .prose :where(h4 strong):not(:where([class~='not-prose'] *)) {
+        .prose :where(h4 strong):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           font-weight: 700;
         }
-        .prose :where(figure > *):not(:where([class~='not-prose'] *)) {
+        .prose :where(figure > *):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           margin: 0;
         }
-        .prose :where(ol > li):not(:where([class~='not-prose'] *))::marker {
+        .prose :where(ol > li):not(:where([class~='not-prose'], [class~='not-prose'] *))::marker {
           font-weight: 400;
           color: var(--tw-prose-counters);
         }
-        .prose :where(code):not(:where([class~='not-prose'] *))::before {
+        .prose :where(code):not(:where([class~='not-prose'], [class~='not-prose'] *))::before {
           content: '`';
         }
-        .prose :where(code):not(:where([class~='not-prose'] *))::after {
+        .prose :where(code):not(:where([class~='not-prose'], [class~='not-prose'] *))::after {
           content: '`';
         }
         .prose-lg {
           font-size: 18px;
           line-height: 1.75;
         }
-        .prose-lg :where(p):not(:where([class~='not-prose'] *)) {
+        .prose-lg :where(p):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           margin-top: 24px;
           margin-bottom: 24px;
         }
-        .prose-lg :where([class~='lead']):not(:where([class~='not-prose'] *)) {
+        .prose-lg
+          :where([class~='lead']):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           font-size: 22px;
         }
-        .prose-lg :where(blockquote):not(:where([class~='not-prose'] *)) {
+        .prose-lg :where(blockquote):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           margin-top: 40px;
           margin-bottom: 40px;
         }
-        .prose-lg :where(.prose-lg > ul > li):not(:where([class~='not-prose'] *)) {
+        .prose-lg
+          :where(.prose-lg > ul > li):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           padding-left: 12px;
         }
-        .prose-lg :where(h1):not(:where([class~='not-prose'] *)) {
+        .prose-lg :where(h1):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           font-size: 48px;
           margin-top: 0;
           margin-bottom: 40px;
         }
-        .prose-lg :where(h2):not(:where([class~='not-prose'] *)) {
+        .prose-lg :where(h2):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           font-size: 30px;
           margin-top: 56px;
           margin-bottom: 32px;
         }
-        .prose-lg :where(h3):not(:where([class~='not-prose'] *)) {
+        .prose-lg :where(h3):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           font-size: 24px;
           margin-top: 40px;
           margin-bottom: 16px;
@@ -610,37 +626,48 @@ test('custom class name', async () => {
           color: var(--tw-prose-body);
           max-width: 65ch;
         }
-        .markdown :where([class~='lead']):not(:where([class~='not-markdown'] *)) {
+        .markdown
+          :where([class~='lead']):not(:where([class~='not-markdown'], [class~='not-markdown'] *)) {
           color: var(--tw-prose-lead);
         }
-        .markdown :where(strong):not(:where([class~='not-markdown'] *)) {
+        .markdown :where(strong):not(:where([class~='not-markdown'], [class~='not-markdown'] *)) {
           color: var(--tw-prose-bold);
           font-weight: 600;
         }
-        .markdown :where(ol[type='A']):not(:where([class~='not-markdown'] *)) {
+        .markdown
+          :where(ol[type='A']):not(:where([class~='not-markdown'], [class~='not-markdown'] *)) {
           list-style-type: upper-alpha;
         }
         .markdown
-          :where(blockquote p:first-of-type):not(:where([class~='not-markdown'] *))::before {
+          :where(blockquote
+            p:first-of-type):not(:where([class~='not-markdown'], [class~='not-markdown']
+              *))::before {
           content: open-quote;
         }
-        .markdown :where(blockquote p:last-of-type):not(:where([class~='not-markdown'] *))::after {
+        .markdown
+          :where(blockquote
+            p:last-of-type):not(:where([class~='not-markdown'], [class~='not-markdown'] *))::after {
           content: close-quote;
         }
-        .markdown :where(h4 strong):not(:where([class~='not-markdown'] *)) {
+        .markdown
+          :where(h4 strong):not(:where([class~='not-markdown'], [class~='not-markdown'] *)) {
           font-weight: 700;
         }
-        .markdown :where(figure > *):not(:where([class~='not-markdown'] *)) {
+        .markdown
+          :where(figure > *):not(:where([class~='not-markdown'], [class~='not-markdown'] *)) {
           margin: 0;
         }
-        .markdown :where(ol > li):not(:where([class~='not-markdown'] *))::marker {
+        .markdown
+          :where(ol > li):not(:where([class~='not-markdown'], [class~='not-markdown'] *))::marker {
           font-weight: 400;
           color: var(--tw-prose-counters);
         }
-        .markdown :where(code):not(:where([class~='not-markdown'] *))::before {
+        .markdown
+          :where(code):not(:where([class~='not-markdown'], [class~='not-markdown'] *))::before {
           content: '`';
         }
-        .markdown :where(code):not(:where([class~='not-markdown'] *))::after {
+        .markdown
+          :where(code):not(:where([class~='not-markdown'], [class~='not-markdown'] *))::after {
           content: '`';
         }
       `
@@ -715,103 +742,125 @@ test('element variants', async () => {
         .prose {
           color: var(--tw-prose-body);
         }
-        .prose :where([class~='lead']):not(:where([class~='not-prose'] *)) {
+        .prose :where([class~='lead']):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           color: var(--tw-prose-lead);
         }
-        .prose :where(strong):not(:where([class~='not-prose'] *)) {
+        .prose :where(strong):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           color: var(--tw-prose-bold);
           font-weight: 600;
         }
-        .prose :where(h4 strong):not(:where([class~='not-prose'] *)) {
+        .prose :where(h4 strong):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           font-weight: 700;
         }
         .prose-headings\:underline
-          :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~='not-prose'] *))) {
+          :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~='not-prose'], [class~='not-prose']
+                *))) {
           text-decoration-line: underline;
         }
-        .prose-h1\:text-3xl :is(:where(h1):not(:where([class~='not-prose'] *))) {
+        .prose-h1\:text-3xl
+          :is(:where(h1):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           font-size: 1.875rem;
           line-height: 2.25rem;
         }
-        .prose-h2\:text-2xl :is(:where(h2):not(:where([class~='not-prose'] *))) {
+        .prose-h2\:text-2xl
+          :is(:where(h2):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           font-size: 1.5rem;
           line-height: 2rem;
         }
-        .prose-h3\:text-xl :is(:where(h3):not(:where([class~='not-prose'] *))) {
+        .prose-h3\:text-xl
+          :is(:where(h3):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           font-size: 1.25rem;
           line-height: 1.75rem;
         }
-        .prose-h4\:text-lg :is(:where(h4):not(:where([class~='not-prose'] *))) {
+        .prose-h4\:text-lg
+          :is(:where(h4):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           font-size: 1.125rem;
           line-height: 1.75rem;
         }
-        .prose-p\:text-gray-700 :is(:where(p):not(:where([class~='not-prose'] *))) {
+        .prose-p\:text-gray-700
+          :is(:where(p):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           --tw-text-opacity: 1;
           color: rgb(55 65 81 / var(--tw-text-opacity));
         }
-        .prose-a\:font-bold :is(:where(a):not(:where([class~='not-prose'] *))) {
+        .prose-a\:font-bold
+          :is(:where(a):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           font-weight: 700;
         }
-        .prose-blockquote\:italic :is(:where(blockquote):not(:where([class~='not-prose'] *))) {
+        .prose-blockquote\:italic
+          :is(:where(blockquote):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           font-style: italic;
         }
-        .prose-figure\:mx-auto :is(:where(figure):not(:where([class~='not-prose'] *))) {
+        .prose-figure\:mx-auto
+          :is(:where(figure):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           margin-left: auto;
           margin-right: auto;
         }
-        .prose-figcaption\:opacity-75 :is(:where(figcaption):not(:where([class~='not-prose'] *))) {
+        .prose-figcaption\:opacity-75
+          :is(:where(figcaption):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           opacity: 0.75;
         }
-        .prose-strong\:font-medium :is(:where(strong):not(:where([class~='not-prose'] *))) {
+        .prose-strong\:font-medium
+          :is(:where(strong):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           font-weight: 500;
         }
-        .prose-em\:italic :is(:where(em):not(:where([class~='not-prose'] *))) {
+        .prose-em\:italic
+          :is(:where(em):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           font-style: italic;
         }
-        .prose-code\:font-mono :is(:where(code):not(:where([class~='not-prose'] *))) {
+        .prose-code\:font-mono
+          :is(:where(code):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
             'Courier New', monospace;
         }
-        .prose-pre\:font-mono :is(:where(pre):not(:where([class~='not-prose'] *))) {
+        .prose-pre\:font-mono
+          :is(:where(pre):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
             'Courier New', monospace;
         }
-        .prose-ol\:pl-6 :is(:where(ol):not(:where([class~='not-prose'] *))) {
+        .prose-ol\:pl-6 :is(:where(ol):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           padding-left: 1.5rem;
         }
-        .prose-ul\:pl-8 :is(:where(ul):not(:where([class~='not-prose'] *))) {
+        .prose-ul\:pl-8 :is(:where(ul):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           padding-left: 2rem;
         }
-        .prose-li\:my-4 :is(:where(li):not(:where([class~='not-prose'] *))) {
+        .prose-li\:my-4 :is(:where(li):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           margin-top: 1rem;
           margin-bottom: 1rem;
         }
-        .prose-table\:my-8 :is(:where(table):not(:where([class~='not-prose'] *))) {
+        .prose-table\:my-8
+          :is(:where(table):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           margin-top: 2rem;
           margin-bottom: 2rem;
         }
-        .prose-thead\:border-red-300 :is(:where(thead):not(:where([class~='not-prose'] *))) {
+        .prose-thead\:border-red-300
+          :is(:where(thead):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           --tw-border-opacity: 1;
           border-color: rgb(252 165 165 / var(--tw-border-opacity));
         }
-        .prose-tr\:border-red-200 :is(:where(tr):not(:where([class~='not-prose'] *))) {
+        .prose-tr\:border-red-200
+          :is(:where(tr):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           --tw-border-opacity: 1;
           border-color: rgb(254 202 202 / var(--tw-border-opacity));
         }
-        .prose-th\:text-left :is(:where(th):not(:where([class~='not-prose'] *))) {
+        .prose-th\:text-left
+          :is(:where(th):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           text-align: left;
         }
-        .prose-img\:rounded-lg :is(:where(img):not(:where([class~='not-prose'] *))) {
+        .prose-img\:rounded-lg
+          :is(:where(img):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           border-radius: 0.5rem;
         }
-        .prose-video\:my-12 :is(:where(video):not(:where([class~='not-prose'] *))) {
+        .prose-video\:my-12
+          :is(:where(video):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           margin-top: 3rem;
           margin-bottom: 3rem;
         }
-        .prose-hr\:border-t-2 :is(:where(hr):not(:where([class~='not-prose'] *))) {
+        .prose-hr\:border-t-2
+          :is(:where(hr):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           border-top-width: 2px;
         }
-        .prose-lead\:italic :is(:where([class~='lead']):not(:where([class~='not-prose'] *))) {
+        .prose-lead\:italic
+          :is(:where([class~='lead']):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           font-style: italic;
         }
       `
@@ -887,105 +936,131 @@ test('element variants with custom class name', async () => {
         .markdown {
           color: var(--tw-prose-body);
         }
-        .markdown :where([class~='lead']):not(:where([class~='not-markdown'] *)) {
+        .markdown
+          :where([class~='lead']):not(:where([class~='not-markdown'], [class~='not-markdown'] *)) {
           color: var(--tw-prose-lead);
         }
-        .markdown :where(strong):not(:where([class~='not-markdown'] *)) {
+        .markdown :where(strong):not(:where([class~='not-markdown'], [class~='not-markdown'] *)) {
           color: var(--tw-prose-bold);
           font-weight: 600;
         }
-        .markdown :where(h4 strong):not(:where([class~='not-markdown'] *)) {
+        .markdown
+          :where(h4 strong):not(:where([class~='not-markdown'], [class~='not-markdown'] *)) {
           font-weight: 700;
         }
         .markdown-headings\:underline
-          :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~='not-markdown'] *))) {
+          :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~='not-markdown'], [class~='not-markdown']
+                *))) {
           text-decoration-line: underline;
         }
-        .markdown-h1\:text-3xl :is(:where(h1):not(:where([class~='not-markdown'] *))) {
+        .markdown-h1\:text-3xl
+          :is(:where(h1):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           font-size: 1.875rem;
           line-height: 2.25rem;
         }
-        .markdown-h2\:text-2xl :is(:where(h2):not(:where([class~='not-markdown'] *))) {
+        .markdown-h2\:text-2xl
+          :is(:where(h2):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           font-size: 1.5rem;
           line-height: 2rem;
         }
-        .markdown-h3\:text-xl :is(:where(h3):not(:where([class~='not-markdown'] *))) {
+        .markdown-h3\:text-xl
+          :is(:where(h3):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           font-size: 1.25rem;
           line-height: 1.75rem;
         }
-        .markdown-h4\:text-lg :is(:where(h4):not(:where([class~='not-markdown'] *))) {
+        .markdown-h4\:text-lg
+          :is(:where(h4):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           font-size: 1.125rem;
           line-height: 1.75rem;
         }
-        .markdown-p\:text-gray-700 :is(:where(p):not(:where([class~='not-markdown'] *))) {
+        .markdown-p\:text-gray-700
+          :is(:where(p):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           --tw-text-opacity: 1;
           color: rgb(55 65 81 / var(--tw-text-opacity));
         }
-        .markdown-a\:font-bold :is(:where(a):not(:where([class~='not-markdown'] *))) {
+        .markdown-a\:font-bold
+          :is(:where(a):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           font-weight: 700;
         }
         .markdown-blockquote\:italic
-          :is(:where(blockquote):not(:where([class~='not-markdown'] *))) {
+          :is(:where(blockquote):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           font-style: italic;
         }
-        .markdown-figure\:mx-auto :is(:where(figure):not(:where([class~='not-markdown'] *))) {
+        .markdown-figure\:mx-auto
+          :is(:where(figure):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           margin-left: auto;
           margin-right: auto;
         }
         .markdown-figcaption\:opacity-75
-          :is(:where(figcaption):not(:where([class~='not-markdown'] *))) {
+          :is(:where(figcaption):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           opacity: 0.75;
         }
-        .markdown-strong\:font-medium :is(:where(strong):not(:where([class~='not-markdown'] *))) {
+        .markdown-strong\:font-medium
+          :is(:where(strong):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           font-weight: 500;
         }
-        .markdown-em\:italic :is(:where(em):not(:where([class~='not-markdown'] *))) {
+        .markdown-em\:italic
+          :is(:where(em):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           font-style: italic;
         }
-        .markdown-code\:font-mono :is(:where(code):not(:where([class~='not-markdown'] *))) {
+        .markdown-code\:font-mono
+          :is(:where(code):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
             'Courier New', monospace;
         }
-        .markdown-pre\:font-mono :is(:where(pre):not(:where([class~='not-markdown'] *))) {
+        .markdown-pre\:font-mono
+          :is(:where(pre):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
             'Courier New', monospace;
         }
-        .markdown-ol\:pl-6 :is(:where(ol):not(:where([class~='not-markdown'] *))) {
+        .markdown-ol\:pl-6
+          :is(:where(ol):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           padding-left: 1.5rem;
         }
-        .markdown-ul\:pl-8 :is(:where(ul):not(:where([class~='not-markdown'] *))) {
+        .markdown-ul\:pl-8
+          :is(:where(ul):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           padding-left: 2rem;
         }
-        .markdown-li\:my-4 :is(:where(li):not(:where([class~='not-markdown'] *))) {
+        .markdown-li\:my-4
+          :is(:where(li):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           margin-top: 1rem;
           margin-bottom: 1rem;
         }
-        .markdown-table\:my-8 :is(:where(table):not(:where([class~='not-markdown'] *))) {
+        .markdown-table\:my-8
+          :is(:where(table):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           margin-top: 2rem;
           margin-bottom: 2rem;
         }
-        .markdown-thead\:border-red-300 :is(:where(thead):not(:where([class~='not-markdown'] *))) {
+        .markdown-thead\:border-red-300
+          :is(:where(thead):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           --tw-border-opacity: 1;
           border-color: rgb(252 165 165 / var(--tw-border-opacity));
         }
-        .markdown-tr\:border-red-200 :is(:where(tr):not(:where([class~='not-markdown'] *))) {
+        .markdown-tr\:border-red-200
+          :is(:where(tr):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           --tw-border-opacity: 1;
           border-color: rgb(254 202 202 / var(--tw-border-opacity));
         }
-        .markdown-th\:text-left :is(:where(th):not(:where([class~='not-markdown'] *))) {
+        .markdown-th\:text-left
+          :is(:where(th):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           text-align: left;
         }
-        .markdown-img\:rounded-lg :is(:where(img):not(:where([class~='not-markdown'] *))) {
+        .markdown-img\:rounded-lg
+          :is(:where(img):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           border-radius: 0.5rem;
         }
-        .markdown-video\:my-12 :is(:where(video):not(:where([class~='not-markdown'] *))) {
+        .markdown-video\:my-12
+          :is(:where(video):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           margin-top: 3rem;
           margin-bottom: 3rem;
         }
-        .markdown-hr\:border-t-2 :is(:where(hr):not(:where([class~='not-markdown'] *))) {
+        .markdown-hr\:border-t-2
+          :is(:where(hr):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           border-top-width: 2px;
         }
-        .markdown-lead\:italic :is(:where([class~='lead']):not(:where([class~='not-markdown'] *))) {
+        .markdown-lead\:italic
+          :is(:where([class~='lead']):not(:where([class~='not-markdown'], [class~='not-markdown']
+                *))) {
           font-style: italic;
         }
       `
@@ -1061,7 +1136,7 @@ it('should be possible to use nested syntax (&) when extending the config', () =
     `)
 
     expect(result.css).toIncludeCss(css`
-      .prose :where(a):not(:where([class~='not-prose'] *)) {
+      .prose :where(a):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
         color: #888;
         text-decoration: underline;
         font-weight: 500;
@@ -1069,7 +1144,7 @@ it('should be possible to use nested syntax (&) when extending the config', () =
     `)
 
     expect(result.css).toIncludeCss(css`
-      .prose :where(a):not(:where([class~='not-prose'] *)):hover {
+      .prose :where(a):not(:where([class~='not-prose'], [class~='not-prose'] *)):hover {
         color: #ff0000;
       }
     `)
@@ -1088,11 +1163,11 @@ it('should be possible to specify custom h5 and h6 styles', () => {
 
   return run(config).then((result) => {
     expect(result.css).toIncludeCss(css`
-      .prose-h5\:text-sm :is(:where(h5):not(:where([class~='not-prose'] *))) {
+      .prose-h5\:text-sm :is(:where(h5):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
         font-size: 0.875rem;
         line-height: 1.25rem;
       }
-      .prose-h6\:text-xl :is(:where(h6):not(:where([class~='not-prose'] *))) {
+      .prose-h6\:text-xl :is(:where(h6):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
         font-size: 1.25rem;
         line-height: 1.75rem;
       }
@@ -1124,7 +1199,9 @@ it('should not break with multiple selectors with pseudo elements using variants
 
   return run(config).then((result) => {
     expect(result.css).toIncludeCss(css`
-      .dark .dark\:prose :where(ol li, ul li):not(:where([class~='not-prose'] *))::before {
+      .dark
+        .dark\:prose
+        :where(ol li, ul li):not(:where([class~='not-prose'], [class~='not-prose'] *))::before {
         color: red;
       }
     `)
@@ -1155,7 +1232,9 @@ it('lifts all common, trailing pseudo elements when the same across all selector
 
   return run(config).then((result) => {
     expect(result.css).toIncludeCss(css`
-      .prose :where(ol li, ul li):not(:where([class~='not-prose'] *))::marker::before {
+      .prose
+        :where(ol li, ul li):not(:where([class~='not-prose'], [class~='not-prose']
+            *))::marker::before {
         color: red;
       }
     `)
@@ -1163,7 +1242,10 @@ it('lifts all common, trailing pseudo elements when the same across all selector
     // TODO: The output here is a bug in tailwindcss variant selector rewriting
     // IT should be ::marker::before
     expect(result.css).toIncludeCss(css`
-      .dark .dark\:prose :where(ol li, ul li):not(:where([class~='not-prose'] *))::before::marker {
+      .dark
+        .dark\:prose
+        :where(ol li, ul li):not(:where([class~='not-prose'], [class~='not-prose']
+            *))::before::marker {
         color: red;
       }
     `)
@@ -1194,14 +1276,18 @@ it('does not modify selectors with differing pseudo elements', () => {
 
   return run(config).then((result) => {
     expect(result.css).toIncludeCss(css`
-      .prose :where(ol li::before, ul li::after):not(:where([class~='not-prose'] *)) {
+      .prose
+        :where(ol li::before, ul li::after):not(:where([class~='not-prose'], [class~='not-prose']
+            *)) {
         color: red;
       }
     `)
 
     // TODO: The output here is a bug in tailwindcss variant selector rewriting
     expect(result.css).toIncludeCss(css`
-      .dark .dark\:prose :where(ol li, ul li):not(:where([class~='not-prose'] *))::before,
+      .dark
+        .dark\:prose
+        :where(ol li, ul li):not(:where([class~='not-prose'], [class~='not-prose'] *))::before,
       ::after {
         color: red;
       }
@@ -1234,15 +1320,18 @@ it('lifts only the common, trailing pseudo elements from selectors', () => {
   return run(config).then((result) => {
     expect(result.css).toIncludeCss(css`
       .prose
-        :where(ol li::scroll-thumb, ul li::scroll-track):not(:where([class~='not-prose']
-            *))::before {
+        :where(ol li::scroll-thumb, ul
+          li::scroll-track):not(:where([class~='not-prose'], [class~='not-prose'] *))::before {
         color: red;
       }
     `)
 
     // TODO: The output here is a bug in tailwindcss variant selector rewriting
     expect(result.css).toIncludeCss(css`
-      .dark .dark\:prose :where(ol li, ul li):not(:where([class~='not-prose'] *))::scroll-thumb,
+      .dark
+        .dark\:prose
+        :where(ol li, ul li):not(:where([class~='not-prose'], [class~='not-prose']
+            *))::scroll-thumb,
       ::scroll-track,
       ::before {
         color: red;
@@ -1277,7 +1366,7 @@ it('ignores common non-trailing pseudo-elements in selectors', () => {
     expect(result.css).toIncludeCss(css`
       .prose
         :where(ol li::before::scroll-thumb, ul
-          li::before::scroll-track):not(:where([class~='not-prose'] *)) {
+          li::before::scroll-track):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
         color: red;
       }
     `)
@@ -1286,8 +1375,8 @@ it('ignores common non-trailing pseudo-elements in selectors', () => {
     expect(result.css).toIncludeCss(css`
       .dark
         .dark\:prose
-        :where(ol li::scroll-thumb, ul li::scroll-track):not(:where([class~='not-prose']
-            *))::before,
+        :where(ol li::scroll-thumb, ul
+          li::scroll-track):not(:where([class~='not-prose'], [class~='not-prose'] *))::before,
       ::before {
         color: red;
       }
@@ -1307,11 +1396,11 @@ test('lead styles are inserted after paragraph styles', async () => {
           color: var(--tw-prose-body);
           max-width: 65ch;
         }
-        .prose :where(p):not(:where([class~='not-prose'] *)) {
+        .prose :where(p):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           margin-top: 1.25em;
           margin-bottom: 1.25em;
         }
-        .prose :where([class~='lead']):not(:where([class~='not-prose'] *)) {
+        .prose :where([class~='lead']):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
           color: var(--tw-prose-lead);
           font-size: 1.25em;
           line-height: 1.6;