Fix selector when using a non-default class (e.g. prose-sm)

src/index.js

@@ -9,9 +9,11 @@ const computed = {
   // bulletColor: (color) => ({ 'ul > li::before': { backgroundColor: color } }),
 }
 
-function inWhere(selector, { className, prefix }) {
+function inWhere(selector, { className, modifier, prefix }) {
   let prefixedNot = prefix(`.not-${className}`).slice(1)
-  let selectorPrefix = selector.startsWith('>') ? `.${className} ` : ''
+  let selectorPrefix = selector.startsWith('>')
+    ? `${modifier === 'DEFAULT' ? `.${className}` : `.${className}-${modifier}`} `
+    : ''
 
   // Parse the selector, if every component ends in the same pseudo element(s) then move it to the end
   let [trailingPseudo, rebuiltSelector] = commonTrailingPseudos(selector)
@@ -27,7 +29,7 @@ function isObject(value) {
   return typeof value === 'object' && value !== null
 }
 
-function configToCss(config = {}, { target, className, prefix }) {
+function configToCss(config = {}, { target, className, modifier, prefix }) {
   function updateSelector(k, v) {
     if (target === 'legacy') {
       return [k, v]
@@ -41,13 +43,13 @@ function configToCss(config = {}, { target, className, prefix }) {
       let nested = Object.values(v).some(isObject)
       if (nested) {
         return [
-          inWhere(k, { className, prefix }),
+          inWhere(k, { className, modifier, prefix }),
           v,
           Object.fromEntries(Object.entries(v).map(([k, v]) => updateSelector(k, v))),
         ]
       }
 
-      return [inWhere(k, { className, prefix }), v]
+      return [inWhere(k, { className, modifier, prefix }), v]
     }
 
     return [k, v]
@@ -121,6 +123,7 @@ module.exports = plugin.withOptions(
             {
               target,
               className,
+              modifier,
               prefix,
             }
           ),

src/index.test.js

@@ -181,6 +181,89 @@ test('specificity is reduced with :where', async () => {
   })
 })
 
+test('variants', async () => {
+  let config = {
+    content: [{ raw: html`<div class="sm:prose hover:prose-lg lg:prose-lg"></div>` }],
+    theme: {
+      typography: {
+        DEFAULT: {
+          css: [
+            {
+              color: 'red',
+              p: {
+                color: 'lime',
+              },
+              '> ul > li': {
+                color: 'purple',
+              },
+            },
+          ],
+        },
+        lg: {
+          css: {
+            color: 'green',
+            p: {
+              color: 'tomato',
+            },
+            '> ul > li': {
+              color: 'blue',
+            },
+          },
+        },
+        xl: {
+          css: {
+            color: 'yellow',
+            '> ul > li': {
+              color: 'hotpink',
+            },
+          },
+        },
+      },
+    },
+  }
+
+  return run(config).then((result) => {
+    expect(result.css).toMatchFormattedCss(
+      css`
+        ${defaults}
+
+        .hover\:prose-lg:hover {
+          color: green;
+        }
+        .hover\:prose-lg:hover :where(p):not(:where([class~='not-prose'] *)) {
+          color: tomato;
+        }
+        .hover\:prose-lg:hover
+          :where(.hover\:prose-lg:hover > ul > li):not(:where([class~='not-prose'] *)) {
+          color: blue;
+        }
+        @media (min-width: 640px) {
+          .sm\:prose {
+            color: red;
+          }
+          .sm\:prose :where(p):not(:where([class~='not-prose'] *)) {
+            color: lime;
+          }
+          .sm\:prose :where(.sm\:prose > ul > li):not(:where([class~='not-prose'] *)) {
+            color: purple;
+          }
+        }
+        @media (min-width: 1024px) {
+          .lg\:prose-lg {
+            color: green;
+          }
+          .lg\:prose-lg :where(p):not(:where([class~='not-prose'] *)) {
+            color: tomato;
+          }
+          .lg\:prose-lg :where(.lg\:prose-lg > ul > li):not(:where([class~='not-prose'] *)) {
+            color: blue;
+          }
+        }
+      `
+    )
+  })
+})
+
 test('modifiers', async () => {
   let config = {
     content: [{ raw: html`<div class="prose prose-lg"></div>` }],
@@ -242,6 +325,9 @@ test('modifiers', async () => {
                 marginTop: '40px',
                 marginBottom: '40px',
               },
+              '> ul > li': {
+                paddingLeft: '12px',
+              },
               h1: {
                 fontSize: '48px',
                 marginTop: '0',
@@ -320,6 +406,9 @@ test('modifiers', async () => {
           margin-top: 40px;
           margin-bottom: 40px;
         }
+        .prose-lg :where(.prose-lg > ul > li):not(:where([class~='not-prose'] *)) {
+          padding-left: 12px;
+        }
         .prose-lg :where(h1):not(:where([class~='not-prose'] *)) {
           font-size: 48px;
           margin-top: 0;