Upgrade @primer/stylelint-config to latest version 13.0.1 (primer#3101)

Co-authored-by: Katie Langerman <18661030+langermank@users.noreply.github.com>

Author: jonrohan

.devcontainer/devcontainer.json

@@ -13,25 +13,29 @@
   },
   "onCreateCommand": ".devcontainer/on-create-command.sh",
   "postCreateCommand": ".devcontainer/post-create-command.sh",
-  "settings": {
-    "files.watcherExclude": {
-      "**/vendor": true,
-      "**/.git": true,
-      "**/tmp": true,
-      "**/node_modules": true
-    }
+  "customizations": {
+    "settings": {
+      "files.watcherExclude": {
+        "**/vendor": true,
+        "**/.git": true,
+        "**/tmp": true,
+        "**/node_modules": true
+      }
+    },
+    "extensions": [
+      "castwide.solargraph",
+      "kaiwood.endwise",
+      "manuelpuyol.erb-linter",
+      "misogi.ruby-rubocop",
+      "rebornix.ruby",
+      "wingrunr21.vscode-ruby",
+      "mutantdino.resourcemonitor",
+      "vunguyentuan.vscode-postcss",
+      "DavidAnson.vscode-markdownlint",
+      "stylelint.vscode-stylelint",
+      "hex-ci.stylelint-plus"
+    ]
   },
-  "extensions": [
-    "castwide.solargraph",
-    "kaiwood.endwise",
-    "manuelpuyol.erb-linter",
-    "misogi.ruby-rubocop",
-    "rebornix.ruby",
-    "wingrunr21.vscode-ruby",
-    "mutantdino.resourcemonitor",
-    "vunguyentuan.vscode-postcss",
-    "DavidAnson.vscode-markdownlint"
-  ],
   "forwardPorts": [4000],
   "appPort": [4000],
   "portsAttributes": {

.github/workflows/lint.yml

@@ -25,7 +25,6 @@ jobs:
     - uses: actions/setup-node@v4
       if: steps.changed-files.outputs.any_changed == 'true'
       with:
-        node-version: 16
         cache: 'npm'
     - name: Lint with Markdownlint
       if: steps.changed-files.outputs.any_changed == 'true'
@@ -83,7 +82,6 @@ jobs:
     - uses: actions/setup-node@v4
       if: steps.changed-files.outputs.any_changed == 'true'
       with:
-        node-version: 16
         cache: 'npm'
     - name: Lint with ESLint
       if: steps.changed-files.outputs.any_changed == 'true'
@@ -105,10 +103,9 @@ jobs:
     - uses: actions/setup-node@v4
       if: steps.changed-files.outputs.any_changed == 'true'
       with:
-        node-version: 16
         cache: 'npm'
     - name: Lint with Stylelint
       if: steps.changed-files.outputs.any_changed == 'true'
       run: |
         npm ci
-        npx stylelint ${{ steps.changed-files.outputs.all_changed_files }} -f "github"
+        npx stylelint ${{ steps.changed-files.outputs.all_changed_files }} --custom-formatter=stylelint-actions-formatters

.stylelintrc.json

@@ -1,6 +1,5 @@
 {
-  "extends": ["stylelint-config-standard"],
-  "plugins": ["@primer/stylelint-config/plugins/no-deprecated-colors"],
+  "extends": ["@primer/stylelint-config"],
   "ignoreFiles": ["app/**/*.css", "**/*.js", "**/*.ts"],
   "rules": {
     "media-feature-range-notation": null,
@@ -17,7 +16,6 @@
       {
         "ignoreAtRules": ["mixin", "define-mixin"]
       }
-    ],
-    "primer/no-deprecated-colors": true
+    ]
   }
 }

.vscode/extensions.json

@@ -0,0 +1,6 @@
+{
+  "recommendations": [
+    "stylelint.vscode-stylelint",
+    "hex-ci.stylelint-plus"
+  ]
+}

.vscode/settings.json

@@ -1,5 +1,11 @@
 {
   "explorer.fileNesting.patterns": {
     "*.rb": "${basename}.rb, ${basename}.html.erb, ${basename}.ts, ${basename}_element.ts, ${basename}.pcss, ${basename}.css*"
-  }
+  },
+  "stylelint.reportNeedlessDisables": true,
+  "stylelint.validate": [
+    "css",
+    "postcss",
+    "pcss"
+  ]
 }

app/components/primer/alpha/action_bar.pcss

@@ -12,9 +12,9 @@
 }
 
 .ActionBar-item-container {
+  height: var(--control-medium-size);
   box-sizing: content-box;
   overflow: hidden;
-  height: var(--control-medium-size);
 }
 
 .ActionBar-item {
@@ -37,19 +37,22 @@
 /* Divider */
 
 .ActionBar-divider {
+  top: 50%;
+  bottom: 50%;
+  float: left;
   height: calc(var(--control-medium-size) / 2);
+  /* stylelint-disable-next-line primer/spacing */
   margin: 0 var(--controlStack-medium-gap-condensed);
   border-left: var(--borderWidth-thin) solid var(--borderColor-muted);
-  float: left;
-  top: 50%;
-  bottom: 50%;
   transform: translateY(-50%);
 }
 
 .ActionBar--small .ActionBar-divider {
+  /* stylelint-disable-next-line primer/spacing */
   margin: 0 var(--controlStack-small-gap-condensed);
 }
 
 .ActionBar--large .ActionBar-divider {
+  /* stylelint-disable-next-line primer/spacing */
   margin: 0 var(--controlStack-large-gap-condensed);
 }

app/components/primer/alpha/action_bar_element.ts

@@ -22,11 +22,8 @@ const resizeObserver = new ResizeObserver(entries => {
 
 // These are definitely used, but eslint is dumb apparently
 
-// eslint-disable-next-line no-unused-vars
 enum ItemType {
-  // eslint-disable-next-line no-unused-vars
   Item,
-  // eslint-disable-next-line no-unused-vars
   Divider,
 }
 
@@ -164,7 +161,6 @@ class ActionBarElement extends HTMLElement {
     return this.moreMenu.querySelectorAll('[role="menu"] > li')
   }
 
-  // eslint-disable-next-line no-unused-vars
   #eachItem(callback: (item: HTMLElement, index: number, type: ItemType) => boolean): void {
     for (let i = 0; i < this.items.length; i++) {
       const item = this.items[i]

app/components/primer/alpha/action_list.pcss

@@ -1,20 +1,25 @@
+/* stylelint-disable selector-max-compound-selectors */
+/* stylelint-disable selector-max-specificity */
+/* stylelint-disable max-nesting-depth */
 :root {
   --actionListContent-paddingBlock: var(--control-medium-paddingBlock);
 }
 
 /* ActionList */
 
+/* stylelint-disable-next-line selector-max-type */
 action-list {
   display: block;
 }
 
+/* stylelint-disable-next-line selector-max-type */
 nav-list {
   display: block;
 }
 
 .ActionListHeader {
-  margin-left: var(--base-size-8);
   margin-bottom: var(--base-size-16);
+  margin-left: var(--base-size-8);
 }
 
 /* <ul> */
@@ -32,6 +37,7 @@ nav-list {
 .ActionListWrap--divided {
   & .ActionListItem-label::before {
     position: absolute;
+    /* stylelint-disable-next-line primer/spacing */
     top: calc(-1 * var(--actionListContent-paddingBlock));
     display: block;
     width: 100%;
@@ -44,6 +50,7 @@ nav-list {
   & .ActionListItem-descriptionWrap--inline {
     &::before {
       position: absolute;
+      /* stylelint-disable-next-line primer/spacing */
       top: calc(-1 * var(--actionListContent-paddingBlock));
       display: block;
       width: 100%;
@@ -290,7 +297,9 @@ nav-list {
   position: relative;
   display: grid;
   width: 100%;
+  /* stylelint-disable-next-line primer/spacing */
   padding-block: var(--actionListContent-paddingBlock);
+  /* stylelint-disable-next-line primer/spacing */
   padding-inline: var(--control-medium-paddingInline-condensed);
   color: var(--control-fgColor-rest);
   text-align: left;
@@ -308,6 +317,7 @@ nav-list {
 
   /* column-gap persists with empty grid-areas, margin applies only when children exist */
   & > :not(:last-child) {
+    /* stylelint-disable-next-line primer/spacing */
     margin-right: var(--control-medium-gap);
   }
 
@@ -492,7 +502,7 @@ nav-list {
 
     & .ActionListItem-multiSelectIconRect {
       fill: var(--bgColor-default);
-      border: var(--borderWidth-thin, 1px) solid var(--control-borderColor-rest);
+      border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
     }
   }
 
@@ -539,6 +549,7 @@ nav-list {
 
 /* have leading visual svg filled with chosen color */
 
+/* stylelint-disable-next-line selector-max-type */
 .ActionListItem-visual--leading svg {
   fill: currentcolor;
 }
@@ -642,20 +653,22 @@ nav-list {
   /* with children */
   &:not(:empty) {
     display: flex;
-    padding-inline: var(--actionListContent-paddingBlock);
-    padding-block: var(--base-size-8);
     font-size: var(--text-body-size-small);
-    line-height: var(--text-body-lineHeight-small);
     font-weight: var(--base-text-weight-semibold);
+    line-height: var(--text-body-lineHeight-small);
     color: var(--fgColor-muted);
     flex-direction: column;
+    /* stylelint-disable-next-line primer/spacing */
+    padding-inline: var(--actionListContent-paddingBlock);
+    padding-block: var(--base-size-8);
   }
 
   /* no children */
   &:empty {
     display: block;
     height: var(--borderWidth-thin);
     padding: 0;
+    /* stylelint-disable-next-line primer/spacing */
     margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));
     margin-block-end: var(--base-size-8);
     margin-inline: calc(-1 * var(--base-size-8));
@@ -673,6 +686,7 @@ nav-list {
 }
 
 .ActionList-sectionDivider--filled {
+  /* stylelint-disable-next-line primer/spacing */
   margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));
   margin-block-end: var(--base-size-8);
   margin-inline: calc(-1 * var(--base-size-8));

app/components/primer/alpha/auto_complete.pcss

@@ -6,20 +6,20 @@
 /* Stacked label (default) */
 .autocomplete-label-stacked {
   display: block;
-  margin-bottom: 6px;
+  margin-bottom: var(--base-size-6);
 }
 
 /* Inline label (non-default) */
 .autocomplete-label-inline {
   display: inline;
-  margin-right: 6px;
+  margin-right: var(--base-size-6);
 }
 
 /* Switch to stacked at smaller viewport */
 @media (max-width: 543.98px) {
   .autocomplete-label-inline {
     display: block;
-    margin-bottom: 6px;
+    margin-bottom: var(--base-size-6);
   }
 }
 
@@ -32,7 +32,7 @@
 /* Wrapper and conditional styles for when an icon is added */
 .autocomplete-embedded-icon-wrap {
   display: inline-flex;
-  padding: 4px 8px;
+  padding: var(--base-size-4) var(--base-size-8);
   align-items: center;
 
   &:focus-within {
@@ -43,7 +43,7 @@
 
   & .form-control {
     padding: 0;
-    margin-left: 8px;
+    margin-left: var(--base-size-8);
     border: none;
     box-shadow: none;
 
@@ -66,7 +66,7 @@
   min-width: 100%;
   max-height: 20em;
   overflow-y: auto;
-  font-size: 13px;
+  font-size: var(--text-codeBlock-size);
   list-style: none;
   background: var(--overlay-bgColor);
   border: var(--borderWidth-thin) solid var(--borderColor-default);
@@ -80,7 +80,7 @@
 .autocomplete-item {
   display: block;
   width: 100%;
-  padding: 4px 8px;
+  padding: var(--base-size-4) var(--base-size-8);
   overflow: hidden;
   font-weight: var(--base-text-weight-semibold);
   color: var(--fgColor-default);

app/components/primer/alpha/banner.pcss

@@ -30,7 +30,7 @@
 
   & .Banner-visual {
     display: grid;
-    padding: 0.375rem var(--base-size-8);
+    padding: var(--base-size-6) var(--base-size-8);
     grid-area: visual;
     align-self: start;
 
@@ -44,10 +44,11 @@
   }
 
   & .Banner-message {
-    padding: 0.375rem var(--base-size-8);
+    padding: var(--base-size-6) var(--base-size-8);
     grid-area: message;
     align-self: center;
 
+    /* stylelint-disable-next-line selector-max-type */
     & p:last-child {
       margin-bottom: 0;
     }
@@ -69,6 +70,7 @@
   /* is this used anywhere? could not find any use, but unsure */
   & .Banner-close {
     grid-area: close;
+    /* stylelint-disable-next-line primer/spacing */
     margin-left: var(--controlStack-medium-gap-condensed);
   }
 
@@ -109,6 +111,7 @@
   /* Full-width */
 
   &.Banner--full {
+    /* stylelint-disable-next-line primer/spacing */
     margin-top: calc(var(--borderWidth-thin) * -1);
     border-right: 0;
     border-left: 0;
@@ -117,6 +120,7 @@
 
   @media (max-width: 767.98px) {
     &.Banner--full-whenNarrow {
+      /* stylelint-disable-next-line primer/spacing */
       margin-top: calc(var(--borderWidth-thin) * -1);
       border-right: 0;
       border-left: 0;