Allow lint rule that contains @media (#134)

lib/get-selectors.js

@@ -14,11 +14,23 @@ function hasNoDeclarations(node) {
   return hasChildNodes(node) && node.every(child => child.type !== 'decl');
 }
 
-function hasOnlyExtends(node) {
-  return (
-    hasChildNodes(node) &&
-    node.every(child => child.type === 'atrule' && child.name === 'extend')
-  );
+function hasOnlyAllowedAtRules(node) {
+  let containsAllowed = false;
+  let containsNotAllowed = false;
+
+  if (hasChildNodes(node)) {
+    node.each(child => {
+      if (
+        child.type === 'atrule' &&
+        (child.name === 'extend' || child.name === 'media')
+      ) {
+        containsAllowed = true;
+      } else if (child.type !== 'comment') {
+        containsNotAllowed = true;
+      }
+    });
+  }
+  return containsAllowed && !containsNotAllowed;
 }
 
 function getComponentRootRule(node) {
@@ -44,8 +56,8 @@ function unWrapSelectors(parent, rule) {
 
 function getSelectors(rule) {
   // Skip validation on rules with no declarations
-  // as these don't exist after rules have been unwrapped (unless the selector contains only a @extend)
-  if (hasNoDeclarations(rule) && !hasOnlyExtends(rule)) {
+  // as these don't exist after rules have been unwrapped (unless the selector contains only a @extend or @media)
+  if (hasNoDeclarations(rule) && !hasOnlyAllowedAtRules(rule)) {
     return [];
   }
 

test/nesting.js

@@ -152,7 +152,7 @@ describe('getSelectors', () => {
       componentRoot.append(media);
 
       assert.deepEqual(getSelectors(rule), ['.Component .Component-d']);
-      assert.deepEqual(getSelectors(componentRoot), []);
+      assert.deepEqual(getSelectors(componentRoot), ['.Component']);
     });
 
     it('should return a selector for a ruleset with declarations and nested media query', () => {
@@ -165,5 +165,25 @@ describe('getSelectors', () => {
       assert.deepEqual(getSelectors(rule), ['.Component .Component-d']);
       assert.deepEqual(getSelectors(componentRoot), ['.Component']);
     });
+
+    it('should return selector if selector contains @media without other declarations', () => {
+      const rule = postcss.rule({selector: '.Component-d'});
+      const media = postcss.atRule({name: 'media'});
+      rule.append(media);
+      componentRoot.append(rule);
+
+      assert.deepEqual(getSelectors(rule), ['.Component .Component-d']);
+    });
+
+    it('should return selector if selector contains @media and comment', () => {
+      const rule = postcss.rule({selector: '.Component-d'});
+      const comment = postcss.comment({text: 'comment'});
+      const media = postcss.atRule({name: 'media'});
+      rule.append(comment);
+      rule.append(media);
+      componentRoot.append(rule);
+
+      assert.deepEqual(getSelectors(rule), ['.Component .Component-d']);
+    });
   });
 });