Upgrade stylelint to latest version (#3154)

Author: jonrohan

.github/workflows/lint.yml

@@ -108,4 +108,4 @@ jobs:
       if: steps.changed-files.outputs.any_changed == 'true'
       run: |
         npm ci
-        npx stylelint ${{ steps.changed-files.outputs.all_changed_files }} --custom-formatter=stylelint-actions-formatters
+        npx stylelint --rd -q ${{ steps.changed-files.outputs.all_changed_files }} --custom-formatter=stylelint-actions-formatters

.stylelintrc.json

@@ -16,6 +16,18 @@
       {
         "ignoreAtRules": ["mixin", "define-mixin"]
       }
+    ],
+    "plugin/browser-compat": [
+      true,
+      {
+        "severity": "warning",
+        "allow": {
+          "features": ["properties.scrollbar-width"],
+          "flagged": false,
+          "partialImplementation": true,
+          "prefix": true
+        }
+      }
     ]
   }
 }

app/components/primer/alpha/action_list.pcss

@@ -43,7 +43,8 @@ nav-list {
     width: 100%;
     height: 1px;
     content: '';
-    background: var(--borderColor-muted, var(--color-action-list-item-inline-divider));
+    /* stylelint-disable-next-line primer/colors */
+    background: var(--borderColor-muted);
   }
 
   /* if descriptionWrap--inline exists, move pseudo divider to wrapper */
@@ -56,7 +57,8 @@ nav-list {
       width: 100%;
       height: var(--borderWidth-thin);
       content: '';
-      background: var(--borderColor-muted, var(--color-action-list-item-inline-divider));
+      /* stylelint-disable-next-line primer/colors */
+      background: var(--borderColor-muted);
     }
 
     /* unset the default label pseudo */
@@ -673,7 +675,8 @@ nav-list {
     margin-block-end: var(--base-size-8);
     margin-inline: calc(-1 * var(--base-size-8));
     list-style: none;
-    background: var(--borderColor-muted, var(--color-action-list-item-inline-divider));
+    /* stylelint-disable-next-line primer/colors */
+    background: var(--borderColor-muted);
     border: 0;
   }
 

app/components/primer/alpha/button_marketing.pcss

@@ -17,6 +17,7 @@
   white-space: nowrap;
   vertical-align: middle;
   user-select: none;
+  /* stylelint-disable-next-line primer/colors */
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%),
     var(--color-mktg-btn-bg) !important;
   border: 0;

app/components/primer/alpha/dialog.pcss

@@ -23,7 +23,6 @@
 
 /* TODO: One day this can be :has(:modal), when it is better supported */
 body.has-modal {
-  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
   padding-right: var(--dialog-scrollgutter) !important;
   overflow: hidden !important;
 }

app/components/primer/alpha/dropdown.pcss

@@ -56,6 +56,7 @@
   &::after {
     /* stylelint-disable-next-line primer/borders */
     border: 7px solid transparent;
+    /* stylelint-disable-next-line primer/colors */
     border-bottom-color: var(--overlay-bgColor);
   }
 
@@ -167,6 +168,7 @@
     right: -14px;
     left: auto;
     border-color: transparent;
+    /* stylelint-disable-next-line primer/colors */
     border-left-color: var(--overlay-bgColor);
   }
 }
@@ -192,6 +194,7 @@
     /* stylelint-disable-next-line primer/spacing */
     left: -14px;
     border-color: transparent;
+    /* stylelint-disable-next-line primer/colors */
     border-right-color: var(--overlay-bgColor);
   }
 }
@@ -226,7 +229,7 @@
     bottom: -7px;
     /* stylelint-disable-next-line primer/spacing */
     left: 10px;
-    /* stylelint-disable-next-line primer/borders */
+    /* stylelint-disable-next-line primer/borders, primer/colors */
     border-top: 7px solid var(--overlay-bgColor);
     /* stylelint-disable-next-line primer/borders */
     border-right: 7px solid transparent;

app/components/primer/alpha/layout.pcss

@@ -208,6 +208,7 @@
       width: 1px;
       /* stylelint-disable-next-line primer/spacing */
       margin-right: -1px;
+      /* stylelint-disable-next-line primer/colors */
       background: var(--borderColor-default);
     }
 

app/components/primer/alpha/menu.pcss

@@ -61,6 +61,7 @@
       left: 0;
       width: 2px;
       content: '';
+      /* stylelint-disable-next-line primer/colors */
       background-color: var(--underlineNav-borderColor-active);
     }
   }

app/components/primer/alpha/segmented_control.pcss

@@ -132,7 +132,6 @@
     /* stylelint-disable-next-line primer/spacing */
     padding-inline: calc(var(--control-medium-paddingInline-normal) - var(--segmentedControl-item-padding));
 
-    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
     &:focus-visible {
       /* stylelint-disable-next-line primer/borders */
       border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 1);

app/components/primer/alpha/text_field.pcss

@@ -301,6 +301,7 @@
         width: var(--borderWidth-thin);
         height: var(--base-size-16);
         content: '';
+        /* stylelint-disable-next-line primer/colors */
         background: var(--borderColor-default);
       }
     }
@@ -598,6 +599,7 @@ input[type='checkbox'].FormControl-checkbox {
     height: var(--base-size-16);
     visibility: hidden;
     content: '';
+    /* stylelint-disable-next-line primer/colors */
     background-color: var(--control-checked-fgColor-rest);
     transition: visibility 0s linear 230ms;
     clip-path: inset(var(--base-size-16) 0 0 0);
@@ -643,18 +645,20 @@ input[type='checkbox'].FormControl-checkbox {
 
     &:disabled {
       cursor: not-allowed;
+      /* stylelint-disable-next-line primer/colors */
       background-color: var(--control-fgColor-disabled);
+      /* stylelint-disable-next-line primer/colors */
       border-color: var(--control-fgColor-disabled);
       opacity: 1;
 
       &::before {
+        /* stylelint-disable-next-line primer/colors */
         background-color: var(--control-checked-fgColor-rest);
       }
     }
 
     /* Windows High Contrast mode */
     @media (forced-colors: active) {
-      /* stylelint-disable-next-line primer/colors */
       background-color: canvastext;
       border-color: canvastext;
     }
@@ -706,6 +710,7 @@ input[type='radio'].FormControl-radio {
 
     &[disabled], &:disabled {
       cursor: not-allowed;
+      /* stylelint-disable-next-line primer/colors */
       border-color: var(--control-fgColor-disabled);
 
       & ~ .FormControl-radio-labelWrap {
@@ -723,7 +728,6 @@ input[type='radio'].FormControl-radio {
 
   /* Windows High Contrast mode */
   @media (forced-colors: active) {
-    /* stylelint-disable-next-line primer/colors */
     background-color: canvastext;
     border-color: canvastext;
   }