selector-no-union-class-name: fix false positives for id/attr/pseudo

stylelint-scss · Jul 9, 2019 · ffa8ce5 · ffa8ce5
1 parent 28b6acb
commit ffa8ce5
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 6 deletions.
diff --git a/src/rules/selector-no-union-class-name/__tests__/index.js b/src/rules/selector-no-union-class-name/__tests__/index.js
@@ -1,4 +1,4 @@
-import rule, { ruleName, messages } from "..";
+import rule, { messages, ruleName } from "..";
 
 testRule(rule, {
   ruleName,
@@ -28,7 +28,73 @@ testRule(rule, {
         & span {}
       }
     `,
-      description: "when an ampersand is chained with conbinator"
+      description: "when an ampersand is chained with combinator"
+    },
+    {
+      code: `
+      .class {
+        & + span {}
+      }
+    `,
+      description:
+        "when an ampersand is chained with the adjacent sibling combinator"
+    },
+    {
+      code: `
+      .class {
+        & ~ span {}
+      }
+    `,
+      description:
+        "when an ampersand is chained with the general sibling combinator"
+    },
+    {
+      code: `
+      .class {
+        & > span {}
+      }
+    `,
+      description: "when an ampersand is chained with the child combinator "
+    },
+    {
+      code: `
+      .class {
+        &:last-child {
+          margin-left: 0.75rem;
+        }
+      }
+      `,
+      description: "ignores an ampersand chained with a pseudo-class"
+    },
+    {
+      code: `
+      .class {
+        &::after {
+          margin-left: 0.75rem;
+        }
+      }
+      `,
+      description: "ignores an ampersand chained with a pseudo-element"
+    },
+    {
+      code: `
+      .class {
+        &#divID {
+          margin-left: 0.75rem;
+        }
+      }
+      `,
+      description: "ignores an ampersand chained with an ID"
+    },
+    {
+      code: `
+      .class {
+        &[title] {
+          margin-left: 0.75rem;
+        }
+      }
+      `,
+      description: "ignores an ampersand chained with an attribute"
     }
   ],
 

diff --git a/src/rules/selector-no-union-class-name/index.js b/src/rules/selector-no-union-class-name/index.js
@@ -1,13 +1,29 @@
+import {
+  isAttribute,
+  isClassName,
+  isCombinator,
+  isIdentifier,
+  isPseudoClass,
+  isPseudoElement
+} from "postcss-selector-parser";
 import { utils } from "stylelint";
 import { namespace, parseSelector } from "../../utils";
-import { isClassName, isCombinator } from "postcss-selector-parser";
 
 export const ruleName = namespace("selector-no-union-class-name");
 
 export const messages = utils.ruleMessages(ruleName, {
   rejected: "Unexpected union class name with the parent selector (&)"
 });
 
+const validNestingTypes = [
+  isClassName,
+  isCombinator,
+  isAttribute,
+  isIdentifier,
+  isPseudoClass,
+  isPseudoElement
+];
+
 export default function(actual) {
   return function(root, result) {
     const validOptions = utils.validateOptions(result, ruleName, { actual });
@@ -33,9 +49,7 @@ export default function(actual) {
 
           if (!next) return;
 
-          if (isCombinator(next)) return;
-
-          if (isClassName(next)) return;
+          if (validNestingTypes.some(isType => isType(next))) return;
 
           utils.report({
             ruleName,