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

@@ -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"]
 }

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",

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;

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"