Fix Accidental Hover False Positive Within :not() Selectors (#31)

yuschick · Jan 11, 2024 · 63b5b8d · 63b5b8d
1 parent 31fde35
commit 63b5b8d
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 4 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "stylelint-plugin-defensive-css",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A Stylelint plugin to enforce defensive CSS best practices.",
   "main": "src/index.js",
   "type": "module",

diff --git a/src/rules/use-defensive-css/index.js b/src/rules/use-defensive-css/index.js
@@ -76,6 +76,11 @@ const ruleFunction = (_, options) => {
         const isHoverSelector = selector?.includes(':hover');
         isWrappedInHoverAtRule = false;
 
+        // If the :hover selector is inside a :not() selector, ignore it
+        if (/:not\(([^)]*:hover[^)]*)\)/g.test(selector)) {
+          return;
+        }
+
         if (isHoverSelector) {
           traverseParentRules(parent);
 

diff --git a/src/rules/use-defensive-css/index.test.js b/src/rules/use-defensive-css/index.test.js
@@ -38,6 +38,14 @@ testRule({
       description:
         'Use nested media queries with hover in the middle for button hover state.',
     },
+    {
+      code: `div:not(:hover) { color: red; }`,
+      description: 'Use :hover selector inside of :not() selector.',
+    },
+    {
+      code: `div:not(:focus-visible, :hover) { color: red; }`,
+      description: 'Use :hover selector inside of a grouped :not() selector.',
+    },
   ],
 
   reject: [