Merge pull request #1589 from nhsuk/stylelint-order

Configure Stylelint with GOV.UK Frontend property order

Author: colinrotherham

.stylelintrc.js

@@ -13,15 +13,15 @@ We use the following rules when linting files:
 Bad:
 
 ```scss
-.selector {border: 0; padding: 0;}
+.selector { padding: 0; border: 0;}
 ```
 
 Good:
 
 ```scss
 .selector {
-  border: 0;
   padding: 0;
+  border: 0;
 }
 ```
 

docs/contributing/linting.md

@@ -23,8 +23,8 @@
 
   .nhsuk-action-link {
     display: inline-block; // [1]
-    padding-left: nhsuk-px-to-rem($_small-icon-size + $_small-icon-spacing); // [2]
     position: relative; // [3]
+    padding-left: nhsuk-px-to-rem($_small-icon-size + $_small-icon-spacing); // [2]
     text-decoration: none; // [4]
 
     &:not(:focus):hover {
@@ -42,20 +42,20 @@
     @include nhsuk-responsive-margin(6, "bottom");
 
     @include nhsuk-media-query($from: tablet) {
-      line-height: nhsuk-line-height($_large-icon-size, $font-size: 22);
       padding-left: nhsuk-px-to-rem($_large-icon-size + $_large-icon-spacing); // [2]
+      line-height: nhsuk-line-height($_large-icon-size, $font-size: 22);
     }
 
     .nhsuk-icon {
+      position: absolute;
+      left: nhsuk-px-to-rem(-$_small-icon-spacing);
       // stylelint-disable-next-line declaration-no-important
       fill: nhsuk-colour("green") !important;
-      left: nhsuk-px-to-rem(-$_small-icon-spacing);
-      position: absolute;
 
       @include nhsuk-media-query($from: tablet) {
-        height: nhsuk-px-to-rem($_large-icon-size);
-        width: nhsuk-px-to-rem($_large-icon-size);
         left: nhsuk-px-to-rem(-$_large-icon-spacing);
+        width: nhsuk-px-to-rem($_large-icon-size);
+        height: nhsuk-px-to-rem($_large-icon-size);
       }
     }
 

packages/nhsuk-frontend/src/nhsuk/components/action-link/_index.scss

@@ -14,13 +14,18 @@
   $_font-size: 16;
 
   .nhsuk-back-link {
-    background: none;
-    border: 0;
-    cursor: pointer;
     display: inline-block;
+
+    position: relative;
+
     padding: 0;
     padding-left: nhsuk-em($_font-size, $nhsuk-base-font-size);
-    position: relative;
+
+    border: 0;
+
+    background: none;
+
+    cursor: pointer;
 
     @include nhsuk-font($_font-size);
     @include nhsuk-link-style-default;
@@ -29,12 +34,14 @@
     @include nhsuk-print-hide; // [2]
 
     &::before {
-      bottom: 0;
       content: "";
-      left: 0;
-      margin: auto;
+
       position: absolute;
       top: 0;
+      bottom: 0;
+      left: 0;
+
+      margin: auto;
 
       @include nhsuk-shape-chevron(left, $colour: currentcolor, $font-size: 19);
     }

packages/nhsuk-frontend/src/nhsuk/components/back-link/_index.scss

@@ -34,9 +34,9 @@
   }
 
   .nhsuk-breadcrumb__list {
-    list-style: none;
     margin: 0;
     padding: 0;
+    list-style: none;
 
     @include nhsuk-clearfix;
     @include nhsuk-font($_font-size);
@@ -47,19 +47,21 @@
   }
 
   .nhsuk-breadcrumb__list-item {
-    float: left;
+    position: relative;
     margin-bottom: 0;
     margin-left: nhsuk-em(nhsuk-spacing(3), $_font-size); // [3]
     padding-left: nhsuk-em(nhsuk-spacing(3), $_font-size) + $_chevron-size; // [3]
-    position: relative;
+    float: left;
 
     &::before {
-      bottom: 0;
       content: "";
-      left: 0;
-      margin: auto;
+
       position: absolute;
       top: 0;
+      bottom: 0;
+      left: 0;
+
+      margin: auto;
 
       @include nhsuk-shape-chevron(right, $_chevron-colour);
     }