Enforce double-colon notation for CSS pseudo-elements

These changes are part of https://phabricator.services.mozilla.com/D170496, and thanks to a Stylelint rule we can both enforce and fix this automatically; see also https://stylelint.io/user-guide/rules/selector-pseudo-element-colon-notation/
asyncjs · Apr 18, 2023 · 529dbf9 · 529dbf9
1 parent 88e2d04
commit 529dbf9
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 21 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -14,6 +14,7 @@
     "length-zero-no-unit": [true, {
       ignore: ["custom-properties"]
     }],
+    "selector-pseudo-element-colon-notation": "double",
     "shorthand-property-no-redundant-values": true,
   },
 }
diff --git a/web/annotation_layer_builder.css b/web/annotation_layer_builder.css
@@ -192,31 +192,31 @@
   outline: var(--input-focus-outline);
 }
 
-.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,
-.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after,
-.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before {
+.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,
+.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after,
+.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before {
   background-color: CanvasText;
   content: "";
   display: block;
   position: absolute;
 }
 
-.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,
-.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after {
+.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,
+.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after {
   height: 80%;
   left: 45%;
   width: 1px;
 }
 
-.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before {
+.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before {
   transform: rotate(45deg);
 }
 
-.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after {
+.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after {
   transform: rotate(-45deg);
 }
 
-.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before {
+.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before {
   border-radius: 50%;
   height: 50%;
   left: 30%;

diff --git a/web/pdf_viewer.css b/web/pdf_viewer.css
@@ -167,7 +167,7 @@
   height: 100%;
 }
 
-.pdfViewer .page.loadingIcon:after {
+.pdfViewer .page.loadingIcon::after {
   position: absolute;
   top: 0;
   left: 0;
@@ -184,11 +184,11 @@
   contain: strict;
 }
 
-.pdfViewer .page.loading:after {
+.pdfViewer .page.loading::after {
   display: block;
 }
 
-.pdfViewer .page:not(.loading):after {
+.pdfViewer .page:not(.loading)::after {
   transition-property: none;
   display: none;
 }

diff --git a/web/viewer.css b/web/viewer.css
@@ -600,10 +600,10 @@ body {
     0 0 0 1px var(--doorhanger-border-color);
   border: var(--doorhanger-border-color-whcm);
 }
-.doorHanger:after,
-.doorHanger:before,
-.doorHangerRight:after,
-.doorHangerRight:before {
+.doorHanger::after,
+.doorHanger::before,
+.doorHangerRight::after,
+.doorHangerRight::before {
   bottom: 100%;
   border: 8px solid rgba(0, 0, 0, 0);
   content: " ";
@@ -613,26 +613,26 @@ body {
   pointer-events: none;
   opacity: var(--doorhanger-triangle-opacity-whcm);
 }
-.doorHanger:after {
+.doorHanger::after {
   inset-inline-start: 10px;
   margin-inline-start: -8px;
   border-bottom-color: var(--toolbar-bg-color);
 }
-.doorHangerRight:after {
+.doorHangerRight::after {
   inset-inline-end: 10px;
   margin-inline-end: -8px;
   border-bottom-color: var(--doorhanger-bg-color);
 }
-.doorHanger:before,
-.doorHangerRight:before {
+.doorHanger::before,
+.doorHangerRight::before {
   border-bottom-color: var(--doorhanger-border-color);
   border-width: 9px;
 }
-.doorHanger:before {
+.doorHanger::before {
   inset-inline-start: 10px;
   margin-inline-start: -9px;
 }
-.doorHangerRight:before {
+.doorHangerRight::before {
   inset-inline-end: 10px;
   margin-inline-end: -9px;
 }