Merge pull request #96 from robintown/hover-lint

Add a lint rule for accidental hover states
element-hq · Oct 2, 2023 · dd82418 · dd82418
2 parents af199c6 + c950679
commit dd82418
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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"