diff --git a/src/index.js b/src/index.js index 04830b9..2ca40a1 100644 --- a/src/index.js +++ b/src/index.js @@ -11,18 +11,22 @@ const computed = { function inWhere(selector, { className, modifier, prefix }) { let prefixedNot = prefix(`.not-${className}`).slice(1) - let selectorPrefix = selector.startsWith('>') - ? `${modifier === 'DEFAULT' ? `.${className}` : `.${className}-${modifier}`} ` - : '' + let combinator = '' + + // Make sure leading '>' is pulled out of the `:where` pseudo we generate, because it's invalid in that context + if (selector.startsWith('>')) { + selector = selector.slice(1) + combinator = '>' + } // Parse the selector, if every component ends in the same pseudo element(s) then move it to the end let [trailingPseudo, rebuiltSelector] = commonTrailingPseudos(selector) if (trailingPseudo) { - return `:where(${selectorPrefix}${rebuiltSelector}):not(:where([class~="${prefixedNot}"],[class~="${prefixedNot}"] *))${trailingPseudo}` + return `${combinator}:where(${rebuiltSelector}):not(:where([class~="${prefixedNot}"],[class~="${prefixedNot}"] *))${trailingPseudo}` } - return `:where(${selectorPrefix}${selector}):not(:where([class~="${prefixedNot}"],[class~="${prefixedNot}"] *))` + return `${combinator}:where(${selector}):not(:where([class~="${prefixedNot}"],[class~="${prefixedNot}"] *))` } function isObject(value) { diff --git a/src/index.test.js b/src/index.test.js index 8db6c6c..709198e 100644 --- a/src/index.test.js +++ b/src/index.test.js @@ -170,8 +170,7 @@ test('specificity is reduced with :where', async () => { font-weight: 400; color: var(--tw-prose-counters); } - .prose - :where(.prose > ul > li p):not(:where([class~='not-prose'], [class~='not-prose'] *)) { + .prose > :where(ul > li p):not(:where([class~='not-prose'], [class~='not-prose'] *)) { margin-top: 16px; margin-bottom: 16px; } @@ -239,9 +238,7 @@ test('variants', async () => { color: tomato; } .hover\:prose-lg:hover - :where(.hover\:prose-lg:hover - > ul - > li):not(:where([class~='not-prose'], [class~='not-prose'] *)) { + > :where(ul > li):not(:where([class~='not-prose'], [class~='not-prose'] *)) { color: blue; } @media (min-width: 640px) { @@ -251,8 +248,7 @@ test('variants', async () => { .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'], [class~='not-prose'] *)) { + .sm\:prose > :where(ul > li):not(:where([class~='not-prose'], [class~='not-prose'] *)) { color: purple; } } @@ -264,8 +260,7 @@ test('variants', async () => { color: tomato; } .lg\:prose-lg - :where(.lg\:prose-lg > ul > li):not(:where([class~='not-prose'], [class~='not-prose'] - *)) { + > :where(ul > li):not(:where([class~='not-prose'], [class~='not-prose'] *)) { color: blue; } } @@ -421,8 +416,7 @@ test('modifiers', async () => { margin-top: 40px; margin-bottom: 40px; } - .prose-lg - :where(.prose-lg > ul > li):not(:where([class~='not-prose'], [class~='not-prose'] *)) { + .prose-lg > :where(ul > li):not(:where([class~='not-prose'], [class~='not-prose'] *)) { padding-left: 12px; } .prose-lg :where(h1):not(:where([class~='not-prose'], [class~='not-prose'] *)) {