stylelint-plugin-defensive-css 0.4.0 → 0.6.0

package/README.md

@@ -23,21 +23,84 @@ npm i stylelint-plugin-defensive-css --save-dev
 yarn add stylelint-plugin-defensive-css --dev
 ```
 
-With the plugin installed, the rule(s) can be added to the project's Stylelint
-configuration.
+With the plugin installed, the individual rule(s) can be added to the project's
+Stylelint configuration.
+
+## Rules / Options
+
+The plugin provides multiple rules that can be toggled on and off as needed.
+
+1. [Accidental Hover](#accidental-hover)
+2. [Background-Repeat](#background-repeat)
+3. [Custom Property Fallbacks](#custom-property-fallbacks)
+4. [Flex Wrapping](#flex-wrapping)
+5. [Scroll Chaining](#scroll-chaining)
+6. [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
 {
-  "plugins": ["stylelint-plugin-defensive-css"],
   "rules": {
-    "plugin/use-defensive-css": [true, { "severity": "warning" }]
+    "plugin/use-defensive-css": [true, { "accidental-hover": true }]
   }
 }
 ```
 
-## Rules / Options
+#### ✅ Passing Examples
 
-The plugin provides multiple rules that can be toggled on and off as needed.
+```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
 
@@ -152,8 +215,8 @@ div {
 CSS flexbox is one of the most useful CSS layout features nowadays. It’s
 tempting to add `display: flex` to a wrapper and have the child items ordered
 next to each other. The thing is when there is not enough space, those child
-items won’t wrap into a new line by default. We need to change that behavior
-with `flex-wrap: wrap`.
+items won’t wrap into a new line by default. We need to either change that
+behavior with `flex-wrap: wrap` or explicitly define `nowrap` on the container.
 
 Enable this rule in order to require all flex rows to have a flex-wrap value.
 
@@ -172,6 +235,10 @@ div {
   display: flex;
   flex-wrap: wrap;
 }
+div {
+  display: flex;
+  flex-wrap: nowrap;
+}
 div {
   display: flex;
   flex-direction: row-reverse;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stylelint-plugin-defensive-css",
-  "version": "0.4.0",
+  "version": "0.6.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.';
   },
@@ -12,7 +15,7 @@ const ruleMessages = stylelint.utils.ruleMessages(ruleName, {
     return 'Ensure that any custom properties have a fallback value.';
   },
   flexWrapping() {
-    return 'Flex rows must have a `flex-wrap: wrap;` or `flex-wrap: wrap-reverse` declaration.';
+    return 'Flex rows must have a `flex-wrap` value defined.`';
   },
   scrollChaining() {
     return `Containers with an auto or scroll 'overflow' must also have an 'overscroll-behavior' property defined.`;

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(')) {
@@ -122,7 +159,7 @@ const ruleFunction = (_, options) => {
           flexWrappingProps.isFlexRow = false;
         }
 
-        if (decl.prop === 'flex-wrap' && decl.value.startsWith('wrap')) {
+        if (decl.prop === 'flex-wrap') {
           flexWrappingProps.isMissingFlexWrap = false;
         }