Upgrade stylelint to latest version (#3154)

primer · Oct 15, 2024 · 20ff94e · 20ff94e
1 parent 9e301d3
commit 20ff94e
Show file tree

Hide file tree

Showing 17 changed files with 1,114 additions and 945 deletions.
diff --git a/.github/workflows/lint.yml b/.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
diff --git a/.stylelintrc.json b/.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
+        }
+      }
     ]
   }
 }
diff --git a/app/components/primer/alpha/action_list.pcss b/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;
   }
 

diff --git a/app/components/primer/alpha/button_marketing.pcss b/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;

diff --git a/app/components/primer/alpha/dialog.pcss b/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;
 }

diff --git a/app/components/primer/alpha/dropdown.pcss b/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;

diff --git a/app/components/primer/alpha/layout.pcss b/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);
     }
 

diff --git a/app/components/primer/alpha/menu.pcss b/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);
     }
   }

diff --git a/app/components/primer/alpha/segmented_control.pcss b/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);

diff --git a/app/components/primer/alpha/text_field.pcss b/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;
   }

diff --git a/app/components/primer/alpha/underline_nav.pcss b/app/components/primer/alpha/underline_nav.pcss
@@ -97,6 +97,7 @@
       width: 100%;
       height: 2px;
       content: '';
+      /* stylelint-disable-next-line primer/colors */
       background: var(--underlineNav-borderColor-active);
       border-radius: var(--borderRadius-medium);
       transform: translate(50%, -50%);

diff --git a/app/components/primer/beta/avatar_stack.pcss b/app/components/primer/beta/avatar_stack.pcss
@@ -37,6 +37,7 @@
     /* stylelint-disable-next-line primer/spacing */
     margin-right: -11px;
     background-color: var(--bgColor-default);
+    /* stylelint-disable-next-line primer/colors */
     border-right: var(--borderWidth-thin) solid var(--bgColor-default);
     border-radius: var(--borderRadius-small);
     box-shadow: none;
@@ -141,6 +142,7 @@
     /* stylelint-disable-next-line primer/spacing */
     margin-left: -11px;
     border-right: 0;
+    /* stylelint-disable-next-line primer/colors */
     border-left: var(--borderWidth-thin) solid var(--bgColor-default);
   }
 }
diff --git a/app/components/primer/beta/blankslate.pcss b/app/components/primer/beta/blankslate.pcss
@@ -119,7 +119,6 @@
 
 /* At the time these styles were written,
    `34rem` was our "small" breakpoint width */
-/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 @container (max-width: 34rem) {
   .blankslate {
     --blankslate-outer-padding-block: var(--base-size-20);

diff --git a/app/components/primer/beta/popover.pcss b/app/components/primer/beta/popover.pcss
@@ -41,6 +41,7 @@
     margin-left: -8px;
     /* stylelint-disable-next-line primer/borders */
     border: 7px solid transparent;
+    /* stylelint-disable-next-line primer/colors */
     border-bottom-color: var(--overlay-bgColor);
   }
 }
@@ -70,6 +71,7 @@
 
   &::after {
     bottom: -14px;
+    /* stylelint-disable-next-line primer/colors */
     border-top-color: var(--overlay-bgColor);
   }
 }
@@ -147,6 +149,7 @@
 
   &::after {
     right: -14px;
+    /* stylelint-disable-next-line primer/colors */
     border-left-color: var(--overlay-bgColor);
   }
 }
@@ -162,6 +165,7 @@
 
   &::after {
     left: -14px;
+    /* stylelint-disable-next-line primer/colors */
     border-right-color: var(--overlay-bgColor);
   }
 }

diff --git a/app/components/primer/beta/timeline_item.pcss b/app/components/primer/beta/timeline_item.pcss
@@ -17,6 +17,7 @@
     display: block;
     width: var(--borderWidth-thick);
     content: '';
+    /* stylelint-disable-next-line primer/colors */
     background-color: var(--borderColor-muted);
   }
 
@@ -40,6 +41,7 @@
   color: var(--fgColor-muted);
   align-items: center;
   background-color: var(--timelineBadge-bgColor);
+  /* stylelint-disable-next-line primer/colors */
   border: var(--borderWidth-thick) solid var(--bgColor-default);
   border-radius: 50%;
   justify-content: center;