Fix issue with css guards not hiding inner classes

lib/less/join-selector-visitor.js

@@ -21,6 +21,10 @@
             this.contexts.push(paths);
 
             if (! rulesetNode.root) {
+                rulesetNode.selectors = rulesetNode.selectors.filter(function(selector) { return selector.getIsOutput(); });
+                if (rulesetNode.selectors.length === 0) {
+                    rulesetNode.rules.length = 0;
+                }
                 rulesetNode.joinSelectors(paths, context, rulesetNode.selectors);
                 rulesetNode.paths = paths;
             }

lib/less/tree/directive.js

@@ -10,6 +10,7 @@ tree.Directive = function (name, value, index, currentFileInfo) {
         this.value = value;
     }
     this.currentFileInfo = currentFileInfo;
+
 };
 tree.Directive.prototype = {
     type: "Directive",

test/css/css-guards.css

@@ -10,3 +10,9 @@
 .multiple-conditions-1 {
   color: red;
 }
+.inheritance .test {
+  color: black;
+}
+.inheritance:hover {
+  color: pink;
+}

test/less/css-guards.less

@@ -28,4 +28,37 @@
 
 @b: 2;
 @c: 3;
-@d: 3;
+@d: 3;
+
+.inheritance when (@b = 2) {
+  .test {
+    color: black;
+  }
+  &:hover {
+    color: pink;
+  }
+  .hideme when (@b = 1) {
+    color: green;
+  }
+  & when (@b = 1) {
+    hideme: green;
+  }
+}
+
+.hideme when (@b = 1) {
+  .test {
+    color: black;
+  }
+  &:hover {
+    color: pink;
+  }
+  .hideme when (@b = 1) {
+    color: green;
+  }
+}
+
+& when (@b = 1) {
+  .hideme {
+    color: red;
+  }
+}