Updating and autofixing stylelint (#1765)

* Updating and autofixing stylelint * Moving config to primer/stylelint-config * Removing unused disables from css * Stylelint auto-fixes * @primer/stylelint-config@12.2.0 * Remove these from workfow * Use reusable release_canary workflow (#1811) * Use reusable release_canary workflow * Install with yarn Co-authored-by: Jon Rohan <yes@jonrohan.codes> * Use counter-border for LHC (#1792) * Use counter-border for LHC * Create orange-ties-sin.md * Remove fallback * UnderlineNav `:focus` styles (#1764) * add pseudo selectors * adjustments * add stories, cleanup * update mixin * fix mixin * lint * add back overflow styles * adjust focus for better overflow state, scrollsnap * post test adjustments, move hacks to primer css * Stylelint auto-fixes * hover state desktop only * document data-content hack * Create nice-days-jog.md Co-authored-by: Actions Auto Build <actions@github.com> Co-authored-by: simurai <simurai@github.com> * Add note about loading the "latest" Primer CSS version (#1784) * Add stashing * Stylelint auto-fixes Co-authored-by: Actions Auto Build <actions@github.com> Co-authored-by: Cole Bemis <colebemis@github.com> Co-authored-by: simurai <simurai@github.com> Co-authored-by: Katie Langerman <langermank@github.com>
primer · Dec 8, 2021 · e8d5402 · e8d5402
1 parent ef2f3f0
commit e8d5402
Show file tree

Hide file tree

Showing 39 changed files with 81 additions and 77 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -26,11 +26,13 @@ jobs:
           if [ $? -eq 0 ]
           then
               set -e
+              git stash
               git remote update
               git fetch
               git checkout --track origin/$GITHUB_HEAD_REF
               git config --local user.email "actions@github.com"
               git config --local user.name "Actions Auto Build"
+              git stash pop
               git add src
               git commit -m "Stylelint auto-fixes"
               git push

diff --git a/package.json b/package.json
@@ -42,7 +42,7 @@
     "@changesets/cli": "2.18.1",
     "@github/prettier-config": "0.0.4",
     "@koddsson/postcss-sass": "5.0.0",
-    "@primer/stylelint-config": "12.1.1",
+    "@primer/stylelint-config": "12.2.0",
     "autoprefixer": "10.4.0",
     "cssstats": "4.0.2",
     "eslint": "8.4.0",
@@ -64,7 +64,6 @@
     "prettier": "2.5.1",
     "semver": "7.3.5",
     "stylelint": "14.1.0",
-    "stylelint-scss": "4.0.0",
     "table": "6.7.5"
   },
   "jest": {

diff --git a/src/actionlist/action-list-item.scss b/src/actionlist/action-list-item.scss
@@ -204,7 +204,7 @@
       visibility: hidden;
       opacity: 0;
       transition:
- visibility 0 linear $actionList-item-checkmark-transition-timing,
+        visibility 0 linear $actionList-item-checkmark-transition-timing,
         opacity $actionList-item-checkmark-transition-timing;
     }
 

diff --git a/src/autocomplete/autocomplete.scss b/src/autocomplete/autocomplete.scss
@@ -44,7 +44,7 @@
   }
 
   &.selected,
-  &[aria-selected=true],
+  &[aria-selected='true'],
   &.navigation-focus {
     color: var(--color-fg-on-emphasis);
     text-decoration: none;

diff --git a/src/base/base.scss b/src/base/base.scss
@@ -46,6 +46,7 @@ hr,
   background: transparent;
   border: 0;
   border-bottom: $border-width $border-style var(--color-border-muted);
+
   @include clearfix();
 }
 

diff --git a/src/base/index.scss b/src/base/index.scss
@@ -1,5 +1,4 @@
 @import '../support/index.scss';
-
 @import './normalize.scss';
 @import './base.scss';
 @import './kbd.scss';

diff --git a/src/blankslate/index.scss b/src/blankslate/index.scss
@@ -1,3 +1,2 @@
 @import '../support/index.scss';
-
 @import './blankslate.scss';
diff --git a/src/breadcrumb/breadcrumb.scss b/src/breadcrumb/breadcrumb.scss
@@ -21,7 +21,7 @@
 }
 
 .breadcrumb-item-selected,
-.breadcrumb-item[aria-current]:not([aria-current=false]) {
+.breadcrumb-item[aria-current]:not([aria-current='false']) {
   &::after {
     content: none;
   }

diff --git a/src/buttons/button-group.scss b/src/buttons/button-group.scss
@@ -6,6 +6,7 @@
 .BtnGroup {
   display: inline-block;
   vertical-align: middle;
+
   @include clearfix();
 
   // Proper spacing for multiple button groups (a la, gollum editor)
@@ -33,7 +34,7 @@
   }
 
   &.selected,
-  &[aria-selected=true],
+  &[aria-selected='true'],
   &:focus,
   &:active,
   &:hover {
@@ -66,7 +67,7 @@
   }
 
   &.selected,
-  &[aria-selected=true],
+  &[aria-selected='true'],
   &:focus,
   &:active,
   &:hover {

diff --git a/src/buttons/button.scss b/src/buttons/button.scss
@@ -24,7 +24,7 @@
 
   &:disabled,
   &.disabled,
-  &[aria-disabled=true] {
+  &[aria-disabled='true'] {
     cursor: default;
   }
 
@@ -84,14 +84,14 @@
   }
 
   &.selected,
-  &[aria-selected=true] {
+  &[aria-selected='true'] {
     background-color: var(--color-btn-selected-bg);
     box-shadow: var(--color-primer-shadow-inset);
   }
 
   &:disabled,
   &.disabled,
-  &[aria-disabled=true] {
+  &[aria-disabled='true'] {
     color: var(--color-primer-fg-disabled);
     background-color: var(--color-btn-bg);
     border-color: var(--color-btn-border);
@@ -127,14 +127,14 @@
 
   &:active,
   &.selected,
-  &[aria-selected=true] {
+  &[aria-selected='true'] {
     background-color: var(--color-btn-primary-selected-bg);
     box-shadow: var(--color-btn-primary-selected-shadow);
   }
 
   &:disabled,
   &.disabled,
-  &[aria-disabled=true] {
+  &[aria-disabled='true'] {
     color: var(--color-btn-primary-disabled-text);
     background-color: var(--color-btn-primary-disabled-bg);
     border-color: var(--color-btn-primary-disabled-border);
@@ -184,7 +184,7 @@
 
   &:active,
   &.selected,
-  &[aria-selected=true] {
+  &[aria-selected='true'] {
     color: var(--color-btn-outline-selected-text);
     background-color: var(--color-btn-outline-selected-bg);
     border-color: var(--color-btn-outline-selected-border);
@@ -193,7 +193,7 @@
 
   &:disabled,
   &.disabled,
-  &[aria-disabled=true] {
+  &[aria-disabled='true'] {
     color: var(--color-btn-outline-disabled-text);
     background-color: var(--color-btn-outline-disabled-bg);
     border-color: var(--color-btn-border);
@@ -242,7 +242,7 @@
 
   &:active,
   &.selected,
-  &[aria-selected=true] {
+  &[aria-selected='true'] {
     color: var(--color-btn-danger-selected-text);
     background-color: var(--color-btn-danger-selected-bg);
     border-color: var(--color-btn-danger-selected-border);
@@ -251,7 +251,7 @@
 
   &:disabled,
   &.disabled,
-  &[aria-disabled=true] {
+  &[aria-disabled='true'] {
     color: var(--color-btn-danger-disabled-text);
     background-color: var(--color-btn-danger-disabled-bg);
     border-color: var(--color-btn-border);

diff --git a/src/buttons/misc.scss b/src/buttons/misc.scss
@@ -21,7 +21,7 @@
   }
 
   &:disabled,
-  &[aria-disabled=true] {
+  &[aria-disabled='true'] {
     &,
     &:hover {
       color: var(--color-primer-fg-disabled);
@@ -50,7 +50,7 @@
   &:active,
   &:focus,
   &.selected,
-  &[aria-selected=true],
+  &[aria-selected='true'],
   &.zeroclipboard-is-active {
     color: var(--color-accent-fg);
     background-color: none;
@@ -59,14 +59,13 @@
     box-shadow: var(--color-btn-focus-shadow);
   }
 
-  &:active
-  &.zeroclipboard-is-active {
+  &:active &.zeroclipboard-is-active {
     background-color: var(--color-btn-selected-bg);
   }
 
   &:disabled,
   &.disabled,
-  &[aria-disabled=true] {
+  &[aria-disabled='true'] {
     color: var(--color-primer-fg-disabled);
     background-color: transparent;
   }
@@ -93,7 +92,7 @@
   &:hover { color: var(--color-accent-fg); }
 
   &.disabled,
-  &[aria-disabled=true] {
+  &[aria-disabled='true'] {
     color: var(--color-primer-fg-disabled);
     cursor: default;
 

diff --git a/src/color-modes/native.scss b/src/color-modes/native.scss
@@ -2,6 +2,7 @@
 // Enables color modes for native elements
 
 @include color-mode(light) { color-scheme: light; }
+
 @include color-mode(dark) { color-scheme: dark; }
 
 [data-color-mode] {

diff --git a/src/color-modes/themes/dark.scss b/src/color-modes/themes/dark.scss
@@ -1,5 +1,4 @@
 @import '../../support/index.scss';
-
 @import '@primer/primitives/dist/scss/colors/_dark.scss';
 
 @include color-mode-theme(dark) {

diff --git a/src/color-modes/themes/dark_colorblind.scss b/src/color-modes/themes/dark_colorblind.scss
@@ -1,5 +1,4 @@
 @import '../../support/index.scss';
-
 @import '@primer/primitives/dist/scss/colors/_dark_colorblind.scss';
 
 @include color-mode-theme(dark_colorblind) {

diff --git a/src/color-modes/themes/dark_dimmed.scss b/src/color-modes/themes/dark_dimmed.scss
@@ -1,5 +1,4 @@
 @import '../../support/index.scss';
-
 @import '@primer/primitives/dist/scss/colors/_dark_dimmed.scss';
 
 @include color-mode-theme(dark_dimmed) {

diff --git a/src/color-modes/themes/dark_high_contrast.scss b/src/color-modes/themes/dark_high_contrast.scss
@@ -1,5 +1,4 @@
 @import '../../support/index.scss';
-
 @import '@primer/primitives/dist/scss/colors/_dark_high_contrast.scss';
 
 @include color-mode-theme(dark_high_contrast) {

diff --git a/src/color-modes/themes/light.scss b/src/color-modes/themes/light.scss
@@ -1,5 +1,4 @@
 @import '../../support/index.scss';
-
 @import '@primer/primitives/dist/scss/colors/_light.scss';
 
 @include color-mode-theme(light, true) {

diff --git a/src/color-modes/themes/light_colorblind.scss b/src/color-modes/themes/light_colorblind.scss
@@ -1,5 +1,4 @@
 @import '../../support/index.scss';
-
 @import '@primer/primitives/dist/scss/colors/_light_colorblind.scss';
 
 @include color-mode-theme(light_colorblind) {

diff --git a/src/color-modes/themes/light_high_contrast.scss b/src/color-modes/themes/light_high_contrast.scss
@@ -1,5 +1,4 @@
 @import '../../support/index.scss';
-
 @import '@primer/primitives/dist/scss/colors/_light_high_contrast.scss';
 
 @include color-mode-theme(light_high_contrast) {

diff --git a/src/forms/form-control.scss b/src/forms/form-control.scss
@@ -54,6 +54,7 @@ label {
   // Ensures inputs don't zoom on mobile iPhone but are body-font size on iPad
   @supports (-webkit-touch-callout: none) {
     font-size: $h4-size;
+
     @include breakpoint(md) {
       font-size: $body-font-size;
     }
@@ -181,6 +182,7 @@ textarea.form-control {
 .hfields {
   // stylelint-disable-next-line primer/spacing
   margin: 15px 0;
+
   @include clearfix;
 
   .form-group {

diff --git a/src/labels/index.scss b/src/labels/index.scss
@@ -1,6 +1,5 @@
 @import '../support/index.scss';
 @import './mixins.scss';
-
 @import './issue-labels.scss';
 @import './labels.scss';
 @import './states.scss';

diff --git a/src/labels/labels.scss b/src/labels/labels.scss
@@ -10,6 +10,7 @@
 .label, // TODO: Deprecte
 .Label {
   @include labels-base;
+
   border-color: var(--color-border-default);
 
   &:hover {

diff --git a/src/layout/index.scss b/src/layout/index.scss
@@ -1,6 +1,5 @@
 @import '../support/index.scss';
 @import './mixins.scss';
-
 @import './container.scss';
 @import './grid.scss';
 @import './grid-offset.scss';

diff --git a/src/layout/layout.scss b/src/layout/layout.scss
@@ -2,6 +2,7 @@
 
 .Layout {
   display: grid;
+
   --Layout-sidebar-width: #{map-get($sidebar-width, 'sm')};
   --Layout-gutter: 16px;
 
@@ -25,7 +26,6 @@
 
   grid-auto-flow: column;
   grid-template-columns: auto 0 1fr; // sidebar column, separator, main column
-  // stylelint-disable-next-line primer/no-undefined-vars
   grid-gap: var(--Layout-gutter);
 
   .Layout-sidebar {
@@ -146,7 +146,6 @@
 }
 
 .Layout-sidebar {
-  // stylelint-disable-next-line primer/no-undefined-vars
   width: var(--Layout-sidebar-width);
 }
 
@@ -169,17 +168,14 @@
   }
 
   .Layout-main-centered-md {
-    // stylelint-disable-next-line primer/no-undefined-vars
     max-width: calc(#{$container-md} + var(--Layout-sidebar-width) + var(--Layout-gutter));
   }
 
   .Layout-main-centered-lg {
-    // stylelint-disable-next-line primer/no-undefined-vars
     max-width: calc(#{$container-lg} + var(--Layout-sidebar-width) + var(--Layout-gutter));
   }
 
   .Layout-main-centered-xl {
-    // stylelint-disable-next-line primer/no-undefined-vars
     max-width: calc(#{$container-xl} + var(--Layout-sidebar-width) + var(--Layout-gutter));
   }
 }
diff --git a/src/layout/mixins.scss b/src/layout/mixins.scss
@@ -7,9 +7,9 @@
   .Layout-sidebar,
   .Layout-divider,
   .Layout-main {
-      width: 100% !important;
-      grid-column: 1 !important;
-    }
+    width: 100% !important;
+    grid-column: 1 !important;
+  }
 
   &.Layout--sidebarPosition-flowRow-start {
     .Layout-sidebar {

diff --git a/src/markdown/images.scss b/src/markdown/images.scss
@@ -10,12 +10,12 @@
     box-sizing: content-box;
     background-color: var(--color-canvas-default);
 
-    &[align=right] {
+    &[align='right'] {
       // stylelint-disable-next-line primer/spacing
       padding-left: 20px;
     }
 
-    &[align=left] {
+    &[align='left'] {
       // stylelint-disable-next-line primer/spacing
       padding-right: 20px;
     }