Turn on selector-pseudo-element-colon-notation stylelint rule

This enforces that psuedo elements are defined with a single colon. In the config/.sass-lint.yml file the rule for pseudo-elements was disabled which meant this project has a mix of both single colon and double colon pseudo elements. The rule to use single colon rather than double was requested by GOV.UK frontend developers as a means to not purposely break IE8 despite a lack of a official support, see alphagov/stylelint-config-gds#1 for more information.
kevindew · Jul 21, 2020 · 45fc587 · 45fc587
1 parent f495470
commit 45fc587
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 30 deletions.
diff --git a/.stylelintrc.yml b/.stylelintrc.yml
@@ -1,5 +1,3 @@
 ---
 extends: stylelint-config-gds/scss
 ignoreFiles: src/govuk/vendor/**/*
-rules:
-  selector-pseudo-element-colon-notation: ~
diff --git a/src/govuk/components/button/_index.scss b/src/govuk/components/button/_index.scss
@@ -117,7 +117,7 @@
 
     // Use a pseudo element to expand the click target area to include the
     // button's shadow as well, in case users try to click it.
-    &::before {
+    &:before {
       content: "";
       display: block;
 
@@ -141,7 +141,7 @@
     // the click event is still fired.
     //
     // 🎉
-    &:active::before {
+    &:active:before {
       top: -($govuk-border-width-form-element + $button-shadow-size);
     }
   }

diff --git a/src/govuk/components/checkboxes/_index.scss b/src/govuk/components/checkboxes/_index.scss
@@ -73,7 +73,7 @@
   }
 
   // [ ] Check box
-  .govuk-checkboxes__label::before {
+  .govuk-checkboxes__label:before {
     content: "";
     box-sizing: border-box;
     position: absolute;
@@ -89,7 +89,7 @@
   //
   // The check mark is a box with a border on the left and bottom side (└──),
   // rotated 45 degrees
-  .govuk-checkboxes__label::after {
+  .govuk-checkboxes__label:after {
     content: "";
     box-sizing: border-box;
 
@@ -118,13 +118,13 @@
   }
 
   // Focused state
-  .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
+  .govuk-checkboxes__input:focus + .govuk-checkboxes__label:before {
     border-width: 4px;
     box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
   }
 
   // Selected state
-  .govuk-checkboxes__input:checked + .govuk-checkboxes__label::after {
+  .govuk-checkboxes__input:checked + .govuk-checkboxes__label:after {
     opacity: 1;
   }
 
@@ -222,7 +222,7 @@
     //
     // Reduce the size of the check box [1], vertically center it within the
     // touch target [2]
-    .govuk-checkboxes__label::before {
+    .govuk-checkboxes__label:before {
       top: $input-offset - $govuk-border-width-form-element; // 2
       width: $govuk-small-checkboxes-size; // 1
       height: $govuk-small-checkboxes-size; // 1
@@ -231,7 +231,7 @@
     // ✔ Check mark
     //
     // Reduce the size of the check mark and re-align within the checkbox
-    .govuk-checkboxes__label::after {
+    .govuk-checkboxes__label:after {
       top: 15px;
       left: 6px;
       width: 12px;
@@ -266,7 +266,7 @@
     // is so much larger than their visible size, and so we need to provide
     // feedback to the user as to which checkbox they will select when their
     // cursor is outside of the visible area.
-    .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before {
+    .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label:before {
       box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour;
     }
 
@@ -275,7 +275,7 @@
     //
     // We use two box shadows, one that restores the original focus state [1]
     // and another that then applies the hover state [2].
-    .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
+    .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label:before {
       // sass-lint:disable indentation
       box-shadow:
         0 0 0 $govuk-focus-width $govuk-focus-colour, // 1
@@ -289,11 +289,11 @@
     // state in browsers that don't support `@media (hover)` (like Internet
     // Explorer) – so we have to 'undo' the hover state instead.
     @media (hover: none), (pointer: coarse) {
-      .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before {
+      .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label:before {
         box-shadow: initial;
       }
 
-      .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
+      .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label:before {
         box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
       }
     }

diff --git a/src/govuk/components/header/_index.scss b/src/govuk/components/header/_index.scss
@@ -167,7 +167,7 @@
       @include govuk-focused-text;
     }
 
-    &::after {
+    &:after {
       @include govuk-shape-arrow($direction: down, $base: 10px, $display: inline-block);
       content: "";
       margin-left: govuk-spacing(1);
@@ -179,7 +179,7 @@
   }
 
   .govuk-header__menu-button--open {
-    &::after {
+    &:after {
       @include govuk-shape-arrow($direction: up, $base: 10px, $display: inline-block);
     }
   }

diff --git a/src/govuk/components/radios/_index.scss b/src/govuk/components/radios/_index.scss
@@ -76,7 +76,7 @@
   }
 
   // ( ) Radio ring
-  .govuk-radios__label::before {
+  .govuk-radios__label:before {
     content: "";
     box-sizing: border-box;
     position: absolute;
@@ -95,7 +95,7 @@
   //
   // We create the 'button' entirely out of 'border' so that they remain
   // 'filled' even when colours are overridden in the browser.
-  .govuk-radios__label::after {
+  .govuk-radios__label:after {
     content: "";
 
     position: absolute;
@@ -118,13 +118,13 @@
   }
 
   // Focused state
-  .govuk-radios__input:focus + .govuk-radios__label::before {
+  .govuk-radios__input:focus + .govuk-radios__label:before {
     border-width: 4px;
     box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
   }
 
   // Selected state
-  .govuk-radios__input:checked + .govuk-radios__label::after {
+  .govuk-radios__input:checked + .govuk-radios__label:after {
     opacity: 1;
   }
 
@@ -259,7 +259,7 @@
     //
     // Reduce the size of the control [1], vertically centering it within the
     // touch target [2]
-    .govuk-radios__label::before {
+    .govuk-radios__label:before {
       top: $input-offset - $govuk-border-width-form-element; // 2
       width: $govuk-small-radios-size; // 1
       height: $govuk-small-radios-size; // 1
@@ -268,7 +268,7 @@
     //  •  Radio button
     //
     // Reduce the size of the 'button' and center it within the ring
-    .govuk-radios__label::after {
+    .govuk-radios__label:after {
       top: 15px;
       left: 7px;
       border-width: 5px;
@@ -307,7 +307,7 @@
     // is so much larger than their visible size, and so we need to provide
     // feedback to the user as to which radio they will select when their
     // cursor is outside of the visible area.
-    .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before {
+    .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label:before {
       box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour;
     }
 
@@ -316,7 +316,7 @@
     //
     // We use two box shadows, one that restores the original focus state [1]
     // and another that then applies the hover state [2].
-    .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before {
+    .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label:before {
       // sass-lint:disable indentation
       box-shadow:
         0 0 0 $govuk-radios-focus-width $govuk-focus-colour, // 1
@@ -330,11 +330,11 @@
     // state in browsers that don't support `@media (hover)` (like Internet
     // Explorer) – so we have to 'undo' the hover state instead.
     @media (hover: none), (pointer: coarse) {
-      .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before {
+      .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label:before {
         box-shadow: initial;
       }
 
-      .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before {
+      .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label:before {
         box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
       }
     }

diff --git a/src/govuk/components/tabs/_index.scss b/src/govuk/components/tabs/_index.scss
@@ -21,7 +21,7 @@
     @include govuk-font($size: 19);
     margin-left: govuk-spacing(5);
 
-    &::before {
+    &:before {
       @include govuk-text-colour;
       content: "\2014 "; // "— "
       margin-left: - govuk-spacing(5);
@@ -72,7 +72,7 @@
         background-color: govuk-colour("light-grey", $legacy: "grey-4");
         text-align: center;
 
-        &::before {
+        &:before {
           content: none;
         }
       }
@@ -106,7 +106,7 @@
 
         margin-bottom: 0;
 
-        &::after {
+        &:after {
           content: "";
           position: absolute;
           top: 0;

diff --git a/src/govuk/helpers/_links.scss b/src/govuk/helpers/_links.scss
@@ -198,7 +198,7 @@
     &[href^="/"],
     &[href^="http://"],
     &[href^="https://"] {
-      &::after {
+      &:after {
         content: " (" attr(href) ")";
         font-size: 90%;