fix: infinite loop relating to :not pseudo-classes

- ignore :hover pseudo-class selectors within :not pseudo-class selector lists

Closes #20

Author: saulhardman

index.js

@@ -4,17 +4,22 @@ const selectorProcessor = selectorParser(selectors => {
   let hoverSelectors = []
 
   selectors.walk(selector => {
-    if (selector.type === 'pseudo' && `${selector}` === ':hover') {
-      hoverSelectors.push(`${selector.parent}`)
+    if (
+      selector.type === 'pseudo' &&
+      selector.toString() === ':hover' &&
+      selector.parent.value !== ':not' &&
+      selector.parent.toString() !== ':hover'
+    ) {
+      hoverSelectors.push(selector.parent.toString())
     }
   })
 
   let nonHoverSelectors = selectors.reduce((acc, selector) => {
-    if (hoverSelectors.includes(`${selector}`)) {
+    if (hoverSelectors.includes(selector.toString())) {
       return acc
     }
 
-    return [...acc, `${selector}`]
+    return [...acc, selector.toString()]
   }, [])
 
   return { hoverSelectors, nonHoverSelectors }
@@ -69,6 +74,10 @@ module.exports = ({
         nonHoverSelectors = []
       } = selectorProcessor.transformSync(rule.selector, { lossless: false })
 
+      if (hoverSelectors.length === 0) {
+        return
+      }
+
       let mediaQuery = createMediaQuery(
         rule.clone({ selectors: hoverSelectors }),
         { AtRule }
@@ -93,7 +102,7 @@ module.exports = ({
         )
       }
 
-      if (nonHoverSelectors.length) {
+      if (nonHoverSelectors.length > 0) {
         rule.replaceWith(rule.clone({ selectors: nonHoverSelectors }))
 
         return

index.test.js

@@ -68,6 +68,13 @@ describe('basic usage', () => {
       '@media (hover: hover) {:is(button,[role="button"]):hover { background-color: transparent; } }'
     )
   })
+
+  it('ignores :hover pseudo-class selectors within :not pseudo-class selector lists', () => {
+    run(
+      '.list__item:not(:hover, .is-editing) .show-on-hover { visibility: hidden }',
+      '.list__item:not(:hover, .is-editing) .show-on-hover { visibility: hidden }'
+    )
+  })
 })
 
 describe('when `fallback: true`', () => {