From c950679fb2f40af53865ebfd3759bf705f4f2f28 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Fri, 29 Sep 2023 10:28:47 -0400
Subject: [PATCH] Add a lint rule for accidental hover states

I wasn't able to find a PostCSS plugin to automatically do this, but a lint rule is just as good IMO (and it has the advantage that we can bypass it if necessary).
---
 .stylelintrc.json                       |  8 ++++++--
 package.json                            |  1 +
 src/components/Search/Search.module.css | 12 ++++++++----
 yarn.lock                               |  5 +++++
 4 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/.stylelintrc.json b/.stylelintrc.json
index 7d168c45..bc130ee6 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -1,6 +1,9 @@
 {
   "extends": "stylelint-config-standard",
-  "plugins": ["stylelint-value-no-unknown-custom-properties"],
+  "plugins": [
+    "stylelint-value-no-unknown-custom-properties",
+    "stylelint-plugin-defensive-css"
+  ],
   "rules": {
     "csstools/value-no-unknown-custom-properties": [
       true,
@@ -11,7 +14,8 @@
           "./node_modules/@vector-im/compound-design-tokens/assets/web/css/cpd-light-mq.css"
         ]
       }
-    ]
+    ],
+    "plugin/use-defensive-css": [true, { "accidental-hover": true }]
   },
   "ignoreFiles": ["dist/**/*.css"]
 }
diff --git a/package.json b/package.json
index af496ea2..b102f9cd 100644
--- a/package.json
+++ b/package.json
@@ -92,6 +92,7 @@
     "storybook": "^7.4.2",
     "stylelint": "^15.10.3",
     "stylelint-config-standard": "^34.0.0",
+    "stylelint-plugin-defensive-css": "^0.9.1",
     "stylelint-value-no-unknown-custom-properties": "^4.0.0",
     "typescript": "^5.2.2",
     "vite": "^4.4.9",
diff --git a/src/components/Search/Search.module.css b/src/components/Search/Search.module.css
index 1282bd97..8662c2d6 100644
--- a/src/components/Search/Search.module.css
+++ b/src/components/Search/Search.module.css
@@ -33,6 +33,10 @@ limitations under the License.
   }
 }
 
+.search:active {
+  border-color: var(--cpd-color-border-interactive-hovered);
+}
+
 .search:focus-within {
   border-color: currentcolor;
 }
@@ -42,16 +46,16 @@ limitations under the License.
   flex-shrink: 0;
 }
 
-.search:hover .icon {
-  color: var(--cpd-color-icon-primary);
-}
-
 @media (hover) {
   .search:hover .icon {
     color: var(--cpd-color-icon-primary);
   }
 }
 
+.search:active .icon {
+  color: var(--cpd-color-icon-primary);
+}
+
 .input {
   border: 0;
   background: inherit;
diff --git a/yarn.lock b/yarn.lock
index 61a8c6d8..0c673216 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8957,6 +8957,11 @@ stylelint-config-standard@^34.0.0:
   dependencies:
     stylelint-config-recommended "^13.0.0"
 
+stylelint-plugin-defensive-css@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/stylelint-plugin-defensive-css/-/stylelint-plugin-defensive-css-0.9.1.tgz#e9ac226ed234c52776b025a6a8551334f59067a2"
+  integrity sha512-zVucZ1pVTpRX/7MCWp3MEMJ2K5hzhP/FlCptPPvspaoG+cwnofMR9TZBAbk7LT96oQyLCpqVunTP0qltfRl7fg==
+
 stylelint-value-no-unknown-custom-properties@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/stylelint-value-no-unknown-custom-properties/-/stylelint-value-no-unknown-custom-properties-4.0.0.tgz#9255e3b09e4da3d88244d4cf03042feb5bb1f4a3"