Upgrading @primer/stylelint-config@12.3.0 (#1906)

jonrohan · simurai · web-flow · commit f02d9a3e4e86 · 2022-02-02T03:00:32.000Z
* Upgrading @primer/stylelint-config@12.3.0

* Fixing issues and removing needless disables

* Create gentle-lizards-switch.md

Co-authored-by: simurai &lt;simurai@github.com&gt;
diff --git a/.changeset/gentle-lizards-switch.md b/.changeset/gentle-lizards-switch.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Upgrading @primer/stylelint-config@12.3.0 and fixing violations
diff --git a/package.json b/package.json
@@ -43,7 +43,7 @@
     "@changesets/cli": "2.20.0",
     "@github/prettier-config": "0.0.4",
     "@koddsson/postcss-sass": "5.0.1",
-    "@primer/stylelint-config": "12.2.0",
+    "@primer/stylelint-config": "^12.3.0",
     "autoprefixer": "10.4.2",
     "chokidar-cli": "3.0.0",
     "cssstats": "4.0.2",
diff --git a/src/actionlist/action-list-item-divider.scss b/src/actionlist/action-list-item-divider.scss
@@ -4,7 +4,6 @@
   // has children
   &:not(:empty) {
     display: flex;
-    // stylelint-disable-next-line primer/spacing
     padding: ($spacer-1 * 1.5) $spacer-2;
     font-size: $font-size-small;
     font-weight: $font-weight-bold;
@@ -16,7 +15,6 @@
   &:empty {
     height: 1px;
     padding: 0;
-    // stylelint-disable-next-line primer/spacing
     margin: ($spacer-2 - 1px) ($spacer-2 * -1) $spacer-2;
     list-style: none;
     background: var(--color-action-list-item-inline-divider);
diff --git a/src/actionlist/action-list-item.scss b/src/actionlist/action-list-item.scss
@@ -389,7 +389,6 @@
 
   // if nested list exists, remove default padding
   .ActionList {
-    // stylelint-disable-next-line primer/spacing
     padding: unset;
   }
 }
@@ -398,7 +397,6 @@
 .ActionList-content {
   position: relative;
   display: grid;
-  // stylelint-disable-next-line primer/spacing
   padding: $actionList-item-padding-vertical $actionList-item-padding-horizontal;
   font-size: $body-font-size;
   font-weight: $font-weight-normal;
@@ -425,13 +423,11 @@
 
   &.ActionList-content--sizeMedium {
     // 44px total height
-    // stylelint-disable-next-line primer/spacing
     padding: $actionList-item-padding-vertical-md $actionList-item-padding-horizontal;
   }
 
   &.ActionList-content--sizeLarge {
     // 48px total height
-    // stylelint-disable-next-line primer/spacing
     padding: $actionList-item-padding-vertical-lg $actionList-item-padding-horizontal;
   }
 
@@ -441,7 +437,6 @@
 
   // On pointer:coarse (mobile), all list items are large
   @media (pointer: coarse) {
-    // stylelint-disable-next-line primer/spacing
     padding: $actionList-item-padding-vertical-lg $actionList-item-padding-horizontal;
   }
 
@@ -498,7 +493,6 @@
   align-items: baseline;
 
   .ActionList-item-description {
-    // stylelint-disable-next-line primer/spacing
     margin-left: $actionList-item-padding-horizontal;
   }
 }
diff --git a/src/actionlist/action-list-tree.scss b/src/actionlist/action-list-tree.scss
@@ -30,7 +30,6 @@
         // --ActionList-tree-depth is defined as an inline style referencing the aria-level of each item ie: aria-level="2"
         // stylelint-disable-next-line selector-max-specificity, max-nesting-depth, selector-max-compound-selectors
         .ActionList-content {
-          // stylelint-disable-next-line primer/spacing
           padding-left: calc(#{$spacer-2} * var(--ActionList-tree-depth));
         }
       }
diff --git a/src/base/kbd.scss b/src/base/kbd.scss
@@ -3,7 +3,6 @@
 
 kbd {
   display: inline-block;
-  // stylelint-disable-next-line primer/spacing
   padding: ($spacer-1 - 1) ($spacer-1 + 1);
   font: 11px $mono-font;
   // stylelint-disable-next-line primer/typography
diff --git a/src/blankslate/blankslate.scss b/src/blankslate/blankslate.scss
@@ -55,7 +55,6 @@
 }
 
 .blankslate-spacious {
-  // stylelint-disable-next-line primer/spacing
   padding: ($spacer-6 * 2) $spacer-6;
 }
 
diff --git a/src/box/box.scss b/src/box/box.scss
@@ -28,7 +28,6 @@
   .Box-btn-octicon {
     &.btn-octicon {
       padding: $spacer-2 $spacer-3;
-      // stylelint-disable-next-line primer/spacing
       margin: (-$spacer-2) (-$spacer-3);
       line-height: $lh-condensed;
     }
@@ -60,7 +59,6 @@
   .Box-btn-octicon {
     &.btn-octicon {
       padding: $spacer-4;
-      // stylelint-disable-next-line primer/spacing
       margin: (-$spacer-4) (-$spacer-4);
     }
   }
@@ -285,7 +283,6 @@
   // Increase specificity when btn-octicon is used because comes after .Box in the cascade
   &.btn-octicon {
     padding: $spacer-3 $spacer-3;
-    // stylelint-disable-next-line primer/spacing
     margin: (-$spacer-3) (-$spacer-3);
     line-height: $lh-default; // override btn-octicon line-height
   }
diff --git a/src/buttons/button.scss b/src/buttons/button.scss
@@ -294,6 +294,7 @@
 
 // Large button adds more padding around text. Use font-size utils to increase font-size.. e.g, <p class="text-gamma"><button class="btn btn-large btn-primary" type="button">Big green button</button></p>
 .btn-large {
+  // stylelint-disable-next-line primer/spacing
   padding: $em-spacer-6 1.5em;
   font-size: inherit;
   line-height: $lh-default;
diff --git a/src/forms/form-control.scss b/src/forms/form-control.scss
@@ -243,6 +243,7 @@ input::-webkit-inner-spin-button {
 }
 
 .form-warning {
+  // stylelint-disable-next-line primer/spacing
   padding: $spacer-2 10px;
   // stylelint-disable-next-line primer/spacing
   margin: 10px 0;
diff --git a/src/forms/form-group.scss b/src/forms/form-group.scss
@@ -240,6 +240,7 @@
 // tooltip
 .note {
   min-height: 17px;
+  // stylelint-disable-next-line primer/spacing
   margin: $spacer-1 0 2px;
   font-size: $font-size-small;
   color: var(--color-fg-muted);
diff --git a/src/forms/radio-group.scss b/src/forms/radio-group.scss
@@ -6,9 +6,7 @@
 
 .radio-label {
   float: left;
-  // stylelint-disable-next-line primer/spacing
   padding: 6px $spacer-3 6px ($spacer-3 + 12px + $spacer-2); // 12px is the size of the radio-input
-  // stylelint-disable-next-line primer/spacing
   margin-left: -1px;
   font-size: $body-font-size;
   // stylelint-disable-next-line primer/typography
@@ -43,7 +41,6 @@
 .radio-input {
   z-index: 3;
   float: left;
-  // stylelint-disable-next-line primer/spacing
   margin: 10px (-$spacer-5) 0 $spacer-3;
 
   &:disabled {
diff --git a/src/labels/mixins.scss b/src/labels/mixins.scss
@@ -6,6 +6,7 @@
 
 @mixin labels-base {
   display: inline-block;
+  // stylelint-disable-next-line primer/spacing
   padding: 0 7px;
   font-size: $font-size-small;
   font-weight: $font-weight-semibold;
@@ -15,7 +16,9 @@
 }
 
 @mixin labels-large {
+  // stylelint-disable-next-line primer/spacing
   padding-right: 10px;
+  // stylelint-disable-next-line primer/spacing
   padding-left: 10px;
   line-height: 22px;
 }
@@ -27,6 +30,7 @@
 
 @mixin labels--inline {
   display: inline;
-  padding: 0.12em 0.5em;
+  // stylelint-disable-next-line primer/spacing
+  padding: 0.12em $em-spacer-5;
   font-size: 85%;
 }
diff --git a/src/layout/grid-offset.scss b/src/layout/grid-offset.scss
@@ -2,6 +2,7 @@
 
 // Offset Columns
 
+// stylelint-disable primer/spacing
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
     .offset#{$variant}-1 { margin-left: (1 * 0.0833333333 * 100%) !important; }
diff --git a/src/layout/grid.scss b/src/layout/grid.scss
@@ -33,6 +33,7 @@
 
 // Gutters
 // Apply padding and a negative margin to the outside of the container
+// stylelint-disable primer/spacing
 @mixin gutters ($gutter-width: $spacer-3) {
   margin-right: -$gutter-width;
   margin-left: -$gutter-width;
diff --git a/src/layout/page-layout.scss b/src/layout/page-layout.scss
@@ -245,7 +245,6 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
 
     .PageLayout-region--dividerNarrow-filled-before {
       position: relative;
-      // stylelint-disable-next-line primer/spacing
       margin-top: calc(#{$spacer-2} + var(--Layout-row-gap));
 
       &::after {
@@ -257,7 +256,6 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
 
     .PageLayout-region--dividerNarrow-filled-after {
       position: relative;
-      // stylelint-disable-next-line primer/spacing
       margin-bottom: calc(#{$spacer-2} + var(--Layout-row-gap));
 
       &::before {
@@ -363,15 +361,12 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
 .PageLayout-content,
 .PageLayout-pane,
 .PageLayout-footer {
-  // stylelint-disable-next-line primer/spacing
   padding: var(--Layout-inner-spacing-min);
 }
 
 .PageLayout-content {
-  // stylelint-disable primer/spacing
   padding-right: var(--Layout-inner-spacing-max);
   padding-left: var(--Layout-inner-spacing-max);
-  // stylelint-enable primer/spacing
   grid-area: content;
 }
 
diff --git a/src/marketing/type/typography.scss b/src/marketing/type/typography.scss
@@ -122,6 +122,7 @@
 @mixin pullquote {
   padding-top: 0;
   padding-bottom: 0;
+  // stylelint-disable-next-line primer/spacing
   padding-left: $spacer;
   margin-bottom: $spacer-4;
   font-family: $mono-font;
@@ -131,8 +132,10 @@
   border-left: 3px solid var(--color-border-default);
 
   @include breakpoint(md) {
+    // stylelint-disable-next-line primer/spacing
     padding-left: $spacer * 1.5;
     margin-bottom: $spacer-5;
+    // stylelint-disable-next-line primer/spacing
     margin-left: (-$spacer * 1.5) - 3px;
     font-size: 18px;
     line-height: $lh-default;
diff --git a/src/popover/popover.scss b/src/popover/popover.scss
@@ -122,7 +122,6 @@
   }
 
   &::before {
-    // stylelint-disable-next-line primer/spacing
     margin-top: -($spacer-2 + 1);
   }
 
diff --git a/src/support/mixins/misc.scss b/src/support/mixins/misc.scss
@@ -15,6 +15,7 @@
   }
 
   &::after {
+    // stylelint-disable-next-line primer/spacing
     margin-left: 1px;
     background-color: var(--color-canvas-default);
     background-image: linear-gradient($background, $background);
diff --git a/src/timeline/timeline-item.scss b/src/timeline/timeline-item.scss
@@ -67,7 +67,6 @@
   height: $spacer-4;
   margin: 0;
   margin-bottom: -$spacer-3;
-  // stylelint-disable-next-line primer/spacing
   margin-left: -($spacer-6 + $spacer-3);
   background-color: var(--color-canvas-default);
   border: 0;
diff --git a/src/utilities/margin.scss b/src/utilities/margin.scss
@@ -1,5 +1,8 @@
 // Margin spacer utilities
-// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, comment-empty-line-before
+// stylelint-disable block-opening-brace-space-before
+// stylelint-disable declaration-colon-space-before
+// stylelint-disable comment-empty-line-before
+// stylelint-disable primer/spacing
 
 // Loop through the breakpoint values
 @each $breakpoint, $variant in $responsive-variants {
diff --git a/src/utilities/padding.scss b/src/utilities/padding.scss
@@ -1,5 +1,7 @@
 // Padding spacer utilities
-// stylelint-disable block-opening-brace-space-before, comment-empty-line-before
+// stylelint-disable block-opening-brace-space-before
+// stylelint-disable comment-empty-line-before
+// stylelint-disable primer/spacing
 
 // Responsive padding spacer utilities
 @each $breakpoint, $variant in $responsive-variants {
diff --git a/yarn.lock b/yarn.lock
@@ -1153,10 +1153,10 @@
   resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-7.4.0.tgz#75df54a80233a432b687c0e3010e4be6bd60a82d"
   integrity sha512-gD6yHXN7YKox/bdUNgxhoSS/WXZVaORK1r4dOAyTrdoPrLV/ucIfRInPyVcTF+Mqr0zcTFJtiMtuA5Y8CSyOEg==
 
-"@primer/stylelint-config@12.2.0":
-  version "12.2.0"
-  resolved "https://registry.yarnpkg.com/@primer/stylelint-config/-/stylelint-config-12.2.0.tgz#361e60e09838b088a3f012edf260b52f3cdda90b"
-  integrity sha512-TzQR+8UNS39jqao2tCQOrjSiGSjWTaLyc4omEZpHhvSbVvYO1M+EmEQvK/1uoDK8IUSQpIRKvuDiQsHObpgD4Q==
+"@primer/stylelint-config@^12.3.0":
+  version "12.3.0"
+  resolved "https://registry.yarnpkg.com/@primer/stylelint-config/-/stylelint-config-12.3.0.tgz#de45e16f21f245f31a634ab76a5fcdef796495ac"
+  integrity sha512-BZG1ARFaWLQP8avLObAtpSj88z/CLAvhSND+Ts2H1KEYnKNmwkgqwc6CW5OVpLD5BUKqDwun+8OVa37+ueeSQA==
   dependencies:
     anymatch "^3.1.1"
     globby "^11.0.1"

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@primer/css": patch
 +---
++
 +Upgrading @primer/stylelint-config@12.3.0 and fixing violations
Original file line number	Diff line number	Diff line change
`@@ -389,7 +389,6 @@`
`389`	`389`
`390`	`390`	`// if nested list exists, remove default padding`
`391`	`391`	`.ActionList {`
`392`		`- // stylelint-disable-next-line primer/spacing`
`393`	`392`	`padding: unset;`
`394`	`393`	`}`
`395`	`394`	`}`
`@@ -398,7 +397,6 @@`
`398`	`397`	`.ActionList-content {`
`399`	`398`	`position: relative;`
`400`	`399`	`display: grid;`
`401`		`- // stylelint-disable-next-line primer/spacing`
`402`	`400`	`padding: $actionList-item-padding-vertical $actionList-item-padding-horizontal;`
`403`	`401`	`font-size: $body-font-size;`
`404`	`402`	`font-weight: $font-weight-normal;`
`@@ -425,13 +423,11 @@`
`425`	`423`
`426`	`424`	`&.ActionList-content--sizeMedium {`
`427`	`425`	`// 44px total height`
`428`		`- // stylelint-disable-next-line primer/spacing`
`429`	`426`	`padding: $actionList-item-padding-vertical-md $actionList-item-padding-horizontal;`
`430`	`427`	`}`
`431`	`428`
`432`	`429`	`&.ActionList-content--sizeLarge {`
`433`	`430`	`// 48px total height`
`434`		`- // stylelint-disable-next-line primer/spacing`
`435`	`431`	`padding: $actionList-item-padding-vertical-lg $actionList-item-padding-horizontal;`
`436`	`432`	`}`
`437`	`433`
`@@ -441,7 +437,6 @@`
`441`	`437`
`442`	`438`	`// On pointer:coarse (mobile), all list items are large`
`443`	`439`	`@media (pointer: coarse) {`
`444`		`- // stylelint-disable-next-line primer/spacing`
`445`	`440`	`padding: $actionList-item-padding-vertical-lg $actionList-item-padding-horizontal;`
`446`	`441`	`}`
`447`	`442`
`@@ -498,7 +493,6 @@`
`498`	`493`	`align-items: baseline;`
`499`	`494`
`500`	`495`	`.ActionList-item-description {`
`501`		`- // stylelint-disable-next-line primer/spacing`
`502`	`496`	`margin-left: $actionList-item-padding-horizontal;`
`503`	`497`	`}`
`504`	`498`	`}`
Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,6 @@`
`30`	`30`	`// --ActionList-tree-depth is defined as an inline style referencing the aria-level of each item ie: aria-level="2"`
`31`	`31`	`// stylelint-disable-next-line selector-max-specificity, max-nesting-depth, selector-max-compound-selectors`
`32`	`32`	`.ActionList-content {`
`33`		`- // stylelint-disable-next-line primer/spacing`
`34`	`33`	`padding-left: calc(#{$spacer-2} * var(--ActionList-tree-depth));`
`35`	`34`	`}`
`36`	`35`	`}`
Original file line number	Diff line number	Diff line change
`@@ -55,7 +55,6 @@`
`55`	`55`	`}`
`56`	`56`
`57`	`57`	`.blankslate-spacious {`
`58`		`- // stylelint-disable-next-line primer/spacing`
`59`	`58`	`padding: ($spacer-6 * 2) $spacer-6;`
`60`	`59`	`}`
`61`	`60`
Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,6 @@`
`28`	`28`	`.Box-btn-octicon {`
`29`	`29`	`&.btn-octicon {`
`30`	`30`	`padding: $spacer-2 $spacer-3;`
`31`		`- // stylelint-disable-next-line primer/spacing`
`32`	`31`	`margin: (-$spacer-2) (-$spacer-3);`
`33`	`32`	`line-height: $lh-condensed;`
`34`	`33`	`}`
`@@ -60,7 +59,6 @@`
`60`	`59`	`.Box-btn-octicon {`
`61`	`60`	`&.btn-octicon {`
`62`	`61`	`padding: $spacer-4;`
`63`		`- // stylelint-disable-next-line primer/spacing`
`64`	`62`	`margin: (-$spacer-4) (-$spacer-4);`
`65`	`63`	`}`
`66`	`64`	`}`
`@@ -285,7 +283,6 @@`
`285`	`283`	`// Increase specificity when btn-octicon is used because comes after .Box in the cascade`
`286`	`284`	`&.btn-octicon {`
`287`	`285`	`padding: $spacer-3 $spacer-3;`
`288`		`- // stylelint-disable-next-line primer/spacing`
`289`	`286`	`margin: (-$spacer-3) (-$spacer-3);`
`290`	`287`	`line-height: $lh-default; // override btn-octicon line-height`
`291`	`288`	`}`
Original file line number	Diff line number	Diff line change
`@@ -243,6 +243,7 @@ input::-webkit-inner-spin-button {`
`243`	`243`	`}`
`244`	`244`
`245`	`245`	`.form-warning {`
	`246`	`+ // stylelint-disable-next-line primer/spacing`
`246`	`247`	`padding: $spacer-2 10px;`
`247`	`248`	`// stylelint-disable-next-line primer/spacing`
`248`	`249`	`margin: 10px 0;`