Rule S4664: Selectors of lower specificity should come before overriding selectors of higher specificity

8 files changed, 117 insertions, 30 deletions

diff --git a/its/plugin/projects/issues-project/src/file1.css b/its/plugin/projects/issues-project/src/file1.css
index 7ed5eae..cac30a7 100644
--- a/its/plugin/projects/issues-project/src/file1.css
+++ b/its/plugin/projects/issues-project/src/file1.css
@@ -1,9 +1,20 @@
 @import "a.css";
 @import "a.css";                                              /* S1128 | no-duplicate-at-import-rules */
 
+b a {
+  color: pink;;                                               /* S1116 | no-extra-semicolons */
+}
+
+a {                                                           /* S4664 | no-descending-specificity */
+  color: red;
+}
+
+a::pseudo {                                                   /* S4660 | selector-pseudo-element-no-unknown */
+  color: red;
+}
+
 a:unknown {                                                   /* S4659 | selector-pseudo-class-no-unknown */
   background-color: #ffw;                                     /* S4647 | color-no-invalid-hex */
-  width: 100pixels;                                           /* S4653 | unit-no-unknown */
   /* */                                                       /* S4663 | comment-no-empty */
   content: "first
     second";                                                  /* S4652 | string-no-newline */
@@ -14,7 +25,7 @@ a:unknown {                                                   /* S4659 | selecto
   heigth: 100%;                                               /* S4654 | property-no-unknown */
   padding-left: 10px;
   padding: 20px;                                              /* S4657 | declaration-block-no-shorthand-property-overrides */
-  top: calc(1px+2px);                                         /* S4650 | function-calc-no-unspaced-operator */
+  top: calc(1px+2px);                                         /* S4650 | function-calc-no-unspaced-operator */ /* S4653 | unit-no-unknown */
 }
 
 // color: pink;                                               /* S4668 | no-invalid-double-slash-comments */
@@ -28,14 +39,6 @@ a:unknown {                                                   /* S4659 | selecto
   padding: 100px;
 }
 
-a {
-  color: pink;;                                               /* S1116 | no-extra-semicolons */
-}
-
-a::pseudo {                                                   /* S4660 | selector-pseudo-element-no-unknown */
-  color: red;
-}
-
 unknown {                                                     /* S4670 | selector-type-no-unknown */
   color: black;
 }
diff --git a/its/plugin/projects/issues-project/src/file2.less b/its/plugin/projects/issues-project/src/file2.less
index e86afd8..f1214ba 100644
--- a/its/plugin/projects/issues-project/src/file2.less
+++ b/its/plugin/projects/issues-project/src/file2.less
@@ -1,9 +1,20 @@
 @import "a.css";
 @import "a.css";                                              /* S1128 | no-duplicate-at-import-rules | Doesn't raise for LESS */
 
+b a {
+  color: pink;;                                               /* S1116 | no-extra-semicolons */
+}
+
+a {                                                           /* S4664 | no-descending-specificity */
+  color: red;
+}
+
+a::pseudo {                                                   /* S4660 | selector-pseudo-element-no-unknown */
+  color: red;
+}
+
 a:unknown {                                                   /* S4659 | selector-pseudo-class-no-unknown */
   background-color: #ffw;                                     /* S4647 | color-no-invalid-hex */
-  width: 100pixels;                                           /* S4653 | unit-no-unknown */
   /* */                                                       /* S4663 | comment-no-empty */
   content: "first
     second";                                                  /* S4652 | string-no-newline */
@@ -14,7 +25,7 @@ a:unknown {                                                   /* S4659 | selecto
   heigth: 100%;                                               /* S4654 | property-no-unknown */
   padding-left: 10px;
   padding: 20px;                                              /* S4657 | declaration-block-no-shorthand-property-overrides */
-  top: calc(1px+2px);                                         /* S4650 | function-calc-no-unspaced-operator */
+  top: calc(1px+2px);                                         /* S4650 | function-calc-no-unspaced-operator */ /* S4653 | unit-no-unknown */
 }
 
 // color: pink;                                               /* S4668 | no-invalid-double-slash-comments | Doesn't raise for LESS */
@@ -28,14 +39,6 @@ a:unknown {                                                   /* S4659 | selecto
   padding: 100px;
 }
 
-a {
-  color: pink;;                                               /* S1116 | no-extra-semicolons */
-}
-
-a::pseudo {                                                   /* S4660 | selector-pseudo-element-no-unknown */
-  color: red;
-}
-
 unknown {                                                     /* S4670 | selector-type-no-unknown */
   color: black;
 }
diff --git a/its/plugin/projects/issues-project/src/file3.scss b/its/plugin/projects/issues-project/src/file3.scss
index 4b68ede..de42fb3 100644
--- a/its/plugin/projects/issues-project/src/file3.scss
+++ b/its/plugin/projects/issues-project/src/file3.scss
@@ -1,9 +1,20 @@
 @import "a.css";
 @import "a.css";                                              /* S1128 | no-duplicate-at-import-rules */
 
+b a {
+  color: pink;;                                               /* S1116 | no-extra-semicolons */
+}
+
+a {                                                           /* S4664 | no-descending-specificity */
+  color: red;
+}
+
+a::pseudo {                                                   /* S4660 | selector-pseudo-element-no-unknown */
+  color: red;
+}
+
 a:unknown {                                                   /* S4659 | selector-pseudo-class-no-unknown */
   background-color: #ffw;                                     /* S4647 | color-no-invalid-hex */
-  width: 100pixels;                                           /* S4653 | unit-no-unknown */
   /* */                                                       /* S4663 | comment-no-empty */
   content: "first
     second";                                                  /* S4652 | string-no-newline */
@@ -14,7 +25,7 @@ a:unknown {                                                   /* S4659 | selecto
   heigth: 100%;                                               /* S4654 | property-no-unknown */
   padding-left: 10px;
   padding: 20px;                                              /* S4657 | declaration-block-no-shorthand-property-overrides */
-  top: calc(1px+2px);                                         /* S4650 | function-calc-no-unspaced-operator */
+  top: calc(1px+2px);                                         /* S4650 | function-calc-no-unspaced-operator */ /* S4653 | unit-no-unknown */
 }
 
 // color: pink;                                               /* S4668 | no-invalid-double-slash-comments | Doesn't raise for SCSS */
@@ -28,14 +39,6 @@ a:unknown {                                                   /* S4659 | selecto
   padding: 100px;
 }
 
-a {
-  color: pink;;                                               /* S1116 | no-extra-semicolons */
-}
-
-a::pseudo {                                                   /* S4660 | selector-pseudo-element-no-unknown */
-  color: red;
-}
-
 unknown {                                                     /* S4670 | selector-type-no-unknown */
   color: black;
 }
diff --git a/sonar-css-plugin/src/main/java/org/sonar/css/plugin/CssRules.java b/sonar-css-plugin/src/main/java/org/sonar/css/plugin/CssRules.java
index fe3088b..b2f8121 100644
--- a/sonar-css-plugin/src/main/java/org/sonar/css/plugin/CssRules.java
+++ b/sonar-css-plugin/src/main/java/org/sonar/css/plugin/CssRules.java
@@ -42,6 +42,7 @@ import org.sonar.css.plugin.rules.FunctionCalcNoUnspacedOperator;
 import org.sonar.css.plugin.rules.FunctionLinearGradientNoNonstandardDirection;
 import org.sonar.css.plugin.rules.KeyframeDeclarationNoImportant;
 import org.sonar.css.plugin.rules.MediaFeatureNameNoUnknown;
+import org.sonar.css.plugin.rules.NoDescendingSpecificity;
 import org.sonar.css.plugin.rules.NoDuplicateAtImportRules;
 import org.sonar.css.plugin.rules.NoDuplicateSelectors;
 import org.sonar.css.plugin.rules.NoEmptySource;
@@ -84,6 +85,7 @@ public class CssRules {
       FunctionLinearGradientNoNonstandardDirection.class,
       KeyframeDeclarationNoImportant.class,
       MediaFeatureNameNoUnknown.class,
+      NoDescendingSpecificity.class,
       NoDuplicateAtImportRules.class,
       NoDuplicateSelectors.class,
       NoEmptySource.class,
diff --git a/sonar-css-plugin/src/main/java/org/sonar/css/plugin/rules/NoDescendingSpecificity.java b/sonar-css-plugin/src/main/java/org/sonar/css/plugin/rules/NoDescendingSpecificity.java
new file mode 100644
index 0000000..72a31f6
--- /dev/null
+++ b/sonar-css-plugin/src/main/java/org/sonar/css/plugin/rules/NoDescendingSpecificity.java
@@ -0,0 +1,31 @@
+/*
+ * SonarCSS
+ * Copyright (C) 2018-2018 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+package org.sonar.css.plugin.rules;
+
+import org.sonar.check.Rule;
+
+@Rule(key = "S4664")
+public class NoDescendingSpecificity implements CssRule {
+
+  @Override
+  public String stylelintKey() {
+    return "no-descending-specificity";
+  }
+}
diff --git a/sonar-css-plugin/src/main/resources/org/sonar/l10n/css/rules/css/S4664.html b/sonar-css-plugin/src/main/resources/org/sonar/l10n/css/rules/css/S4664.html
new file mode 100644
index 0000000..6f501e2
--- /dev/null
+++ b/sonar-css-plugin/src/main/resources/org/sonar/l10n/css/rules/css/S4664.html
@@ -0,0 +1,28 @@
+<p>Order of instructions in CSS is important: instructions that occur last in the file take the priority. When a selector with high specificity (eg
+<code>#container a top: 10px; </code>) comes before the selector it overrides (eg: <code>a top: 0; </code>), the priority is given to the high
+specificity definition which violates the principle of the last instruction takes the priority. </p>
+<p>CSS are most legible when overriding selectors always come after the selectors they override. That way both mechanisms, source order and
+specificity, work together nicely.</p>
+<h2>Noncompliant Code Example</h2>
+<pre>
+b a {}
+a {}
+
+
+@media print {
+  #c a {}
+  a {}
+}
+</pre>
+<h2>Compliant Solution</h2>
+<pre>
+a {}
+b a {}
+
+
+@media print {
+  a {}
+  #c a {}
+}
+</pre>
+
diff --git a/sonar-css-plugin/src/main/resources/org/sonar/l10n/css/rules/css/S4664.json b/sonar-css-plugin/src/main/resources/org/sonar/l10n/css/rules/css/S4664.json
new file mode 100644
index 0000000..ebcea71
--- /dev/null
+++ b/sonar-css-plugin/src/main/resources/org/sonar/l10n/css/rules/css/S4664.json
@@ -0,0 +1,16 @@
+{
+  "title": "Selectors of lower specificity should come before overriding selectors of higher specificity",
+  "type": "BUG",
+  "status": "ready",
+  "remediation": {
+    "func": "Constant\/Issue",
+    "constantCost": "5min"
+  },
+  "tags": [
+    
+  ],
+  "defaultSeverity": "Critical",
+  "ruleSpecification": "RSPEC-4664",
+  "sqKey": "S4664",
+  "scope": "Main"
+}
diff --git a/sonar-css-plugin/src/main/resources/org/sonar/l10n/css/rules/css/Sonar_way_profile.json b/sonar-css-plugin/src/main/resources/org/sonar/l10n/css/rules/css/Sonar_way_profile.json
index adbe829..ce1c647 100644
--- a/sonar-css-plugin/src/main/resources/org/sonar/l10n/css/rules/css/Sonar_way_profile.json
+++ b/sonar-css-plugin/src/main/resources/org/sonar/l10n/css/rules/css/Sonar_way_profile.json
@@ -20,6 +20,7 @@
     "S4661",
     "S4662",
     "S4663",
+    "S4664",
     "S4666",
     "S4667",
     "S4668",