Update unWrapSelectors function to prevent wrong warnings.

Author: i.romanova

lib/get-selectors.js

@@ -21,23 +21,10 @@ function hasOnlyExtends(node) {
   );
 }
 
-function getComponentRootRule(node) {
-  while (node.root() !== node.parent) {
-    node = node.parent;
-  }
-  return node;
-}
-
-function unWrapSelectors(parent, rule) {
+function unWrapSelectors(rule) {
   let selectors = [];
-  parent.walkRules(node => {
-    // Only unwrap as far as the current rule being linted
-    if (node.selector !== rule.selector) {
-      return;
-    }
-    node.selectors.forEach(selector => {
-      selectors = selectors.concat(resolveNestedSelector(selector, node));
-    });
+  rule.selectors.forEach(selector => {
+    selectors = selectors.concat(resolveNestedSelector(selector, rule));
   });
   return selectors;
 }
@@ -50,9 +37,7 @@ function getSelectors(rule) {
   }
 
   if (isNestedRule(rule)) {
-    const componentRootRule = getComponentRootRule(rule);
-    const nestedSelectors = unWrapSelectors(componentRootRule, rule);
-    return nestedSelectors;
+    return unWrapSelectors(rule);
   }
 
   return rule.selectors;

test/nesting.js

@@ -67,6 +67,20 @@ describe('getSelectors', () => {
       assert.deepEqual(getSelectors(rule), ['.Component.is-active']);
     });
 
+    it('should unwrap selector only once', () => {
+      const firstRule = postcss.rule({selector: '.Component-d'});
+      const secondRule = postcss.rule({selector: '&.is-active'});
+      const firstHover = postcss.rule({selector: '&:hover'});
+      const secondHover = postcss.rule({selector: '&:hover'});
+      firstRule.append(firstHover);
+      secondRule.append(secondHover);
+      componentRoot.append(firstRule);
+      componentRoot.append(secondRule);
+      assert.deepEqual(getSelectors(firstHover), [
+        '.Component .Component-d:hover',
+      ]);
+    });
+
     it('should unwrap multiple levels of nested rulesets and skip rules with no declarations', () => {
       const descendant = postcss.rule({selector: '.Component-d'});
       const hover = postcss.rule({selector: '&:hover'});