Add missing Stylelint properties and automatic grouping

packages/govuk-frontend-review/src/stylesheets/full-page-examples/campaign-page.scss

@@ -59,6 +59,7 @@
 
 .app-danger-box {
   padding: govuk-spacing(6) govuk-spacing(5);
+
   border-left: solid #fff500;
   border-width: 0 0 0 10px;
   border-image: repeating-linear-gradient(
@@ -70,6 +71,7 @@
       transparent 20px
     )
     25;
+
   color: govuk-colour("white");
   background-color: #272828;
 }

packages/govuk-frontend-review/src/stylesheets/partials/_code.scss

@@ -6,11 +6,15 @@
 
 .app-code__container {
   display: block;
+
   margin: 0;
   padding: govuk-spacing(4);
+
   overflow-x: auto;
+
   border: $govuk-focus-width solid transparent;
   outline: 1px solid transparent;
+
   background-color: govuk-colour("black", $variant: "tint-95");
   @include govuk-responsive-margin(4, "bottom");
 

packages/govuk-frontend/src/govuk/components/accordion/_index.scss

@@ -87,6 +87,7 @@
       background: none;
 
       cursor: pointer;
+
       -webkit-appearance: none;
 
       @media #{govuk-from-breakpoint(tablet)} {
@@ -143,6 +144,7 @@
     // Create Chevron icon aligned with text
     .govuk-accordion-nav__chevron {
       box-sizing: border-box;
+
       display: inline-block;
 
       position: relative;
@@ -159,7 +161,9 @@
       // Create inner chevron arrow
       &::after {
         content: "";
+
         box-sizing: border-box;
+
         display: block;
 
         position: absolute;
@@ -201,6 +205,7 @@
       text-align: left;
       // Section headers have a pointer cursor as an additional affordance
       cursor: pointer;
+
       -webkit-appearance: none;
 
       @media #{govuk-from-breakpoint(tablet)} {
@@ -356,7 +361,6 @@
     @media (hover: none) {
       .govuk-accordion__section-header:hover {
         border-top-color: govuk-functional-colour(border);
-
         box-shadow: inset 0 3px 0 0 govuk-functional-colour(link);
 
         .govuk-accordion__section-button {

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

@@ -19,7 +19,6 @@
 
     display: inline-block;
     position: relative;
-
     margin-top: govuk-spacing(3);
     margin-bottom: govuk-spacing(3);
 
@@ -30,6 +29,7 @@
   // Prepend left pointing chevron
   .govuk-back-link::before {
     content: "";
+
     display: block;
 
     // Vertically align with the parent element
@@ -64,6 +64,7 @@
 
   .govuk-back-link::after {
     content: "";
+
     position: absolute;
     top: -14px;
     right: 0;

packages/govuk-frontend/src/govuk/components/breadcrumbs/_index.scss

@@ -36,6 +36,7 @@
 
   .govuk-breadcrumbs__list-item {
     display: inline-block;
+
     position: relative;
 
     margin-bottom: govuk-spacing(1);
@@ -50,6 +51,7 @@
     // Create a chevron using a box with borders on two sides, rotated 45deg.
     &::before {
       content: "";
+
       display: block;
 
       position: absolute;

packages/govuk-frontend/src/govuk/components/button/_index.scss

@@ -63,23 +63,31 @@ $govuk-inverse-button-text-colour: govuk-functional-colour(brand) !default;
     @include govuk-font($size: 19, $line-height: 19px);
 
     box-sizing: border-box;
+
     display: inline-block;
+
     position: relative;
+
     width: 100%;
     margin-top: 0;
     margin-right: 0;
     margin-left: 0;
     @include govuk-responsive-margin(6, "bottom", $adjustment: $button-shadow-size); // s2
     padding: (govuk-spacing(2) - $govuk-border-width-form-element) govuk-spacing(2)
       (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2)); // s1
+
     border: $govuk-border-width-form-element solid transparent;
     border-radius: 0;
+
     color: $govuk-button-text-colour;
     background-color: $govuk-button-colour;
     box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
+
     text-align: center;
     vertical-align: top;
+
     cursor: pointer;
+
     -webkit-appearance: none;
 
     @media #{govuk-from-breakpoint(tablet)} {
@@ -127,6 +135,7 @@ $govuk-inverse-button-text-colour: govuk-functional-colour(brand) !default;
     // button's shadow as well, in case users try to click it.
     &::before {
       content: "";
+
       display: block;
 
       position: absolute;
@@ -236,22 +245,21 @@ $govuk-inverse-button-text-colour: govuk-functional-colour(brand) !default;
     @include govuk-font-size($size: 24, $line-height: 1);
 
     display: inline-flex;
-    min-height: auto;
-
     justify-content: center;
+    min-height: auto;
   }
 
   .govuk-button__start-icon {
-    margin-left: govuk-spacing(1);
-
-    @media #{govuk-from-breakpoint(desktop)} {
-      margin-left: govuk-spacing(2);
-    }
-    vertical-align: middle;
     flex-shrink: 0;
     align-self: center;
+    margin-left: govuk-spacing(1);
+    vertical-align: middle;
     // Work around SVGs not inheriting color from parent in forced color mode
     // (https://github.com/w3c/csswg-drafts/issues/6310)
     forced-color-adjust: auto;
+
+    @media #{govuk-from-breakpoint(desktop)} {
+      margin-left: govuk-spacing(2);
+    }
   }
 }

packages/govuk-frontend/src/govuk/components/checkboxes/_index.scss

@@ -13,8 +13,8 @@
 
   .govuk-checkboxes__item {
     display: flex;
-    flex-wrap: wrap;
     position: relative;
+    flex-wrap: wrap;
     margin-bottom: govuk-spacing(2);
   }
 
@@ -27,10 +27,13 @@
     // Allow the input to sit above the label, enabling its proper detection
     // when exploring by touch or using automation tools like Selenium
     z-index: 1;
+
     width: $govuk-touch-target-size;
     height: $govuk-touch-target-size;
     margin: 0;
+
     opacity: 0;
+
     cursor: pointer;
   }
 
@@ -44,6 +47,7 @@
     max-width: calc(100% - #{(($govuk-checkboxes-label-padding-left-right * 2) + $govuk-touch-target-size)});
     margin-bottom: 0;
     padding: (govuk-spacing(1) + $govuk-border-width-form-element) govuk-spacing(3);
+
     cursor: pointer;
     // remove 300ms pause on mobile
     touch-action: manipulation;
@@ -52,13 +56,18 @@
   // [ ] Check box
   .govuk-checkboxes__label::before {
     content: "";
+
     box-sizing: border-box;
+
     position: absolute;
     top: ($govuk-touch-target-gutter / 2);
     left: ($govuk-touch-target-gutter / 2);
+
     width: $govuk-checkboxes-size;
     height: $govuk-checkboxes-size;
+
     border: $govuk-border-width-form-element solid currentcolor;
+
     background: transparent;
   }
 
@@ -68,22 +77,29 @@
   // rotated 45 degrees
   .govuk-checkboxes__label::after {
     content: "";
+
     box-sizing: border-box;
+
     position: absolute;
 
     // Use "magic numbers" to define shape and position of check mark because
     // the complexity of the shape makes it difficult to calculate dynamically.
     top: 13px;
     left: $govuk-checkbox-check-horizontal-position;
+
     width: 23px;
     height: 12px;
+
     transform: rotate(-45deg);
+
     border: solid;
     border-width: 0 0 5px 5px;
     // Fix bug in IE11 caused by transform rotate (-45deg).
     // See: alphagov/govuk_elements/issues/518
     border-top-color: transparent;
+
     opacity: 0;
+
     background: transparent;
   }
 

packages/govuk-frontend/src/govuk/components/details/_index.scss

@@ -114,6 +114,7 @@
     // Append our own open / closed marker using a pseudo-element
     .govuk-details__summary::before {
       content: "";
+
       position: absolute;
 
       top: -1px;

packages/govuk-frontend/src/govuk/components/error-message/_index.scss

@@ -6,7 +6,6 @@
     margin-top: 0; // Reset any default browser margins for paragraphs
     margin-bottom: govuk-spacing(3);
     clear: both;
-
     color: govuk-functional-colour(error);
   }
 }

packages/govuk-frontend/src/govuk/components/exit-this-page/_index.scss

@@ -27,11 +27,15 @@
   .govuk-exit-this-page__indicator {
     @include govuk-responsive-padding(2);
     display: none;
+
     padding-bottom: 0;
+
+    pointer-events: none;
+
     color: inherit;
+
     line-height: 0; // removes extra negative space below the indicators
     text-align: center;
-    pointer-events: none;
   }
 
   .govuk-exit-this-page__indicator--visible {
@@ -40,10 +44,13 @@
 
   .govuk-exit-this-page__indicator-light {
     box-sizing: border-box;
+
     display: inline-block;
+
     width: $indicator-size;
     height: $indicator-size;
     margin: 0 0.125em;
+
     border-width: 2px;
     border-style: solid;
     border-radius: 50%;
@@ -67,6 +74,7 @@
     right: 0;
     bottom: 0;
     left: 0;
+
     background-color: govuk-colour("white");
   }
 

packages/govuk-frontend/src/govuk/components/fieldset/_index.scss

@@ -25,7 +25,9 @@
     // 1. IE9-11 & Edge 12-13
     // 2. IE8-11
     box-sizing: border-box; // 1
+
     display: table; // 2
+
     max-width: 100%; // 1
     margin-bottom: govuk-spacing(2);
     padding: 0;

packages/govuk-frontend/src/govuk/components/file-upload/_index.scss

@@ -41,7 +41,6 @@
     // when it's a selector.
     &:focus-within {
       outline: $govuk-focus-width solid govuk-functional-colour(focus);
-
       box-shadow: inset 0 0 0 4px govuk-functional-colour(input-border);
     }
 
@@ -66,10 +65,10 @@
   }
 
   .govuk-file-upload-button__pseudo-button {
+    flex-shrink: 0;
     width: auto;
     margin-right: govuk-spacing(2);
     margin-bottom: $govuk-border-width-form-element + 1;
-    flex-shrink: 0;
   }
 
   .govuk-file-upload-button__instruction {
@@ -80,10 +79,13 @@
 
   .govuk-file-upload-button__status {
     display: block;
+
     margin-bottom: govuk-spacing(2);
     padding: govuk-spacing(3) govuk-spacing(2);
+
     color: govuk-colour("white");
     background-color: govuk-colour("blue");
+
     text-align: left;
     @include govuk-text-break-word;
   }
@@ -93,8 +95,8 @@
   // so we need a container here
   .govuk-file-upload-button__pseudo-button-container {
     display: flex;
-    align-items: baseline;
     flex-wrap: wrap;
+    align-items: baseline;
   }
 
   .govuk-file-upload-button {
@@ -191,7 +193,6 @@
   .govuk-file-upload-button:disabled {
     pointer-events: none;
     opacity: 0.5;
-
     background-color: $empty-button-background-colour;
 
     .govuk-file-upload-button__pseudo-button {