stylelint-plugin-defensive-css 0.4.0 → 0.5.0

package/README.md

@@ -39,6 +39,75 @@ configuration.
 
 The plugin provides multiple rules that can be toggled on and off as needed.
 
+[Accidental Hover](#accidental-hover) -
+[Background-Repeat](#background-repeat) -
+[Custom Property Fallbacks](#custom-property-fallbacks) -
+[Flex Wrapping](#flex-wrapping) - [Scroll Chaining](#scroll-chaining) -
+[Vendor Prefix Grouping](#vendor-prefix-grouping)
+
+### Accidental Hover
+
+> [Read more about this pattern in Defensive CSS](https://defensivecss.dev/tip/hover-media/)
+
+We use hover effects to provide an indication to the user that an element is
+clickable or active. That is fine for devices that have a mouse or a trackpad.
+However, for mobile browsing hover effects can get confusing.
+
+Enable this rule in order to prevent unintentional hover effects on mobile
+devices.
+
+```json
+{
+  "rules": {
+    "plugin/use-defensive-css": [true, { "accidental-hover": true }]
+  }
+}
+```
+
+#### ✅ Passing Examples
+
+```css
+@media (hover: hover) {
+  .btn:hover {
+    color: black;
+  }
+}
+
+/* Will traverse nested media queries */
+@media (hover: hover) {
+  @media (min-width: 1px) {
+    .btn:hover {
+      color: black;
+    }
+  }
+}
+
+/* Will traverse nested media queries */
+@media (min-width: 1px) {
+  @media (hover: hover) {
+    @media (min-width: 100px) {
+      .btn:hover {
+        color: black;
+      }
+    }
+  }
+}
+```
+
+#### ❌ Failing Examples
+
+```css
+.fail-btn:hover {
+  color: black;
+}
+
+@media (min-width: 1px) {
+  .fail-btn:hover {
+    color: black;
+  }
+}
+```
+
 ### Background Repeat
 
 > [Read more about this pattern in Defensive CSS](https://defensivecss.dev/tip/bg-repeat/)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stylelint-plugin-defensive-css",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "A Stylelint plugin to enforce defensive CSS best practices.",
   "main": "src/index.js",
   "files": [

package/src/rules/use-defensive-css/base.js

@@ -5,6 +5,9 @@ const stylelint = require('stylelint');
 const ruleName = 'plugin/use-defensive-css';
 
 const ruleMessages = stylelint.utils.ruleMessages(ruleName, {
+  accidentalHover() {
+    return 'To prevent accidental hover states on mobile devices, wrap :hover selectors inside a @media (hover: hover) { ...your styles } query.';
+  },
   backgroundRepeat() {
     return 'Ensure a background-repeat property is defined when using a background image.';
   },

package/src/rules/use-defensive-css/index.js

@@ -30,6 +30,22 @@ let backgroundRepeatProps = { ...defaultBackgroundRepeatProps };
 let flexWrappingProps = { ...defaultFlexWrappingProps };
 let scrollChainingProps = { ...defaultScrollChainingProps };
 let isLastStyleDeclaration = false;
+let isWrappedInHoverAtRule = false;
+
+function traverseParentRules(parent) {
+  console.log({ parent });
+  if (parent.parent.type === 'root') {
+    return;
+  }
+
+  if (parent.parent.type === 'atrule') {
+    if (parent.parent.params.includes('hover: hover')) {
+      isWrappedInHoverAtRule = true;
+    } else {
+      traverseParentRules(parent.parent);
+    }
+  }
+}
 
 const ruleFunction = (_, options) => {
   return (root, result) => {
@@ -44,6 +60,27 @@ const ruleFunction = (_, options) => {
         JSON.stringify(decl) ===
         JSON.stringify(decl.parent.nodes[decl.parent.nodes.length - 1]);
 
+      /* ACCIDENTAL HOVER */
+      if (options?.['accidental-hover']) {
+        const parent = decl.parent;
+        const selector = parent.selector;
+        const isHoverSelector = selector.includes(':hover');
+        isWrappedInHoverAtRule = false;
+
+        if (isHoverSelector) {
+          traverseParentRules(parent);
+
+          if (!isWrappedInHoverAtRule) {
+            stylelint.utils.report({
+              message: ruleMessages.accidentalHover(),
+              node: decl.parent,
+              result,
+              ruleName,
+            });
+          }
+        }
+      }
+
       /* BACKGROUND REPEAT  */
       if (options?.['background-repeat']) {
         if (decl.prop === 'background' && decl.value.includes('url(')) {