From f156647466aaf7334609037b905ded8f40943fa3 Mon Sep 17 00:00:00 2001 From: Jon Uhlmann Date: Thu, 2 Mar 2023 08:54:21 +0100 Subject: [PATCH 1/3] Ignore not-prose also on the element itself --- src/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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) { From 366beb9a28b35454a6d63169058939b58e96363f Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Wed, 30 Aug 2023 13:36:34 -0400 Subject: [PATCH 2/3] Update tests --- src/index.test.js | 323 +++++++++++++++++++++++++++++----------------- 1 file changed, 206 insertions(+), 117 deletions(-) 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; From b40f41a90f6dc2e709d1635057f2c91810e559ce Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Wed, 30 Aug 2023 13:41:43 -0400 Subject: [PATCH 3/3] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) 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