Ensure nested selectors using &:hover work

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+- Ensure nested selectors using `&:hover` work ([#246](https://github.com/tailwindlabs/tailwindcss-typography/pull/246))
+
 ## [0.5.1] - 2022-01-28
 
 ### Removed

jest/customMatchers.js

@@ -54,17 +54,16 @@ expect.extend({
     return { actual: received, message, pass }
   },
   toIncludeCss(received, argument) {
-    function stripped(str) {
-      return str.replace(/\s/g, '').replace(/;/g, '')
-    }
-
     const options = {
       comment: 'stripped(received).includes(stripped(argument))',
       isNot: this.isNot,
       promise: this.promise,
     }
 
-    const pass = stripped(received).includes(stripped(argument))
+    const actual = format(received)
+    const expected = format(argument)
+
+    const pass = actual.includes(expected)
 
     const message = pass
       ? () => {
@@ -76,9 +75,6 @@ expect.extend({
           )
         }
       : () => {
-          const actual = format(received)
-          const expected = format(argument)
-
           const diffString = diff(expected, actual, {
             expand: this.expand,
           })

src/index.js

@@ -56,7 +56,11 @@ function configToCss(config = {}, { target, className, prefix }) {
     if (isObject(v)) {
       let nested = Object.values(v).some(isObject)
       if (nested) {
-        return [k, Object.fromEntries(Object.entries(v).map(([k, v]) => updateSelector(k, v)))]
+        return [
+          inWhere(k, { className, prefix }),
+          v,
+          Object.fromEntries(Object.entries(v).map(([k, v]) => updateSelector(k, v))),
+        ]
       }
 
       return [inWhere(k, { className, prefix }), v]

src/index.test.js

@@ -5,7 +5,6 @@ const typographyPlugin = require('.')
 
 let html = String.raw
 let css = String.raw
-let javascript = String.raw
 
 function run(config, plugin = tailwind) {
   let { currentTestName } = expect.getState()
@@ -831,3 +830,54 @@ test('customizing defaults with multiple values does not result in invalid css',
     `)
   })
 })
+
+it('should be possible to use nested syntax (&) when extending the config', () => {
+  let config = {
+    plugins: [typographyPlugin()],
+    content: [
+      {
+        raw: html`<div class="prose"></div>`,
+      },
+    ],
+    theme: {
+      extend: {
+        typography: {
+          DEFAULT: {
+            css: {
+              color: '#000',
+              a: {
+                color: '#888',
+                '&:hover': {
+                  color: '#ff0000',
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  }
+
+  return run(config).then((result) => {
+    expect(result.css).toIncludeCss(css`
+      .prose {
+        color: #000;
+        max-width: 65ch;
+      }
+    `)
+
+    expect(result.css).toIncludeCss(css`
+      .prose :where(a):not(:where([class~='not-prose'] *)) {
+        color: #888;
+        text-decoration: underline;
+        font-weight: 500;
+      }
+    `)
+
+    expect(result.css).toIncludeCss(css`
+      .prose :where(a):not(:where([class~='not-prose'] *)):hover {
+        color: #ff0000;
+      }
+    `)
+  })
+})