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>

.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

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": {

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;
     }
 

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;

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();
 }
 

src/base/index.scss

@@ -1,5 +1,4 @@
 @import '../support/index.scss';
-
 @import './normalize.scss';
 @import './base.scss';
 @import './kbd.scss';

src/blankslate/index.scss

@@ -1,3 +1,2 @@
 @import '../support/index.scss';
-
 @import './blankslate.scss';

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;
   }

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 {

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);

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
+  &:active &.zeroclipboard-is-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;
 

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] {

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) {

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) {

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) {

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) {

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) {

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) {

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) {

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 {

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';

src/labels/labels.scss

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

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';

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));
   }
 }

src/layout/mixins.scss

@@ -7,9 +7,9 @@
   .Layout-sidebar,
   .Layout-divider,
   .Layout-main {
-      width: 100% !important;
+    width: 100% !important;
-      grid-column: 1 !important;
+    grid-column: 1 !important;
-    }
+  }
 
   &.Layout--sidebarPosition-flowRow-start {
     .Layout-sidebar {

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;
     }

src/marketing/type/typography.scss

@@ -21,6 +21,7 @@
 
     font-size: map-get($pairing, 'size') !important;
     line-height: map-get($pairing, 'lh') !important;
+
     @if (map-get($pairing, 'size') >= $mktg-header-weight-threshold) { font-weight: $mktg-header-weight-large !important; }
 
     @if (nth($sizes, 1) != nth($sizes, 2)) {
@@ -75,7 +76,9 @@
 
     font-size: map-get($pairing, 'size') !important;
     line-height: map-get($pairing, 'lh') !important;
+
     @if (map-get($pairing, 'size') >= $mktg-body-spacing-threshold) { letter-spacing: $mktg-body-spacing-large !important; }
+
     @if (map-get($pairing, 'size') >= $mktg-body-weight-threshold) { font-weight: $font-weight-semibold; }
 
     @if (nth($sizes, 1) != nth($sizes, 2)) {

src/navigation/filter-list.scss

@@ -41,8 +41,8 @@
   }
 
   &.selected,
-  &[aria-selected=true],
+  &[aria-selected='true'],
-  &[aria-current]:not([aria-current=false]) {
+  &[aria-current]:not([aria-current='false']) {
     color: var(--color-fg-on-emphasis);
     background-color: var(--color-accent-emphasis);
   }

src/navigation/menu.scss

@@ -49,8 +49,8 @@
   }
 
   &.selected,
-  &[aria-selected=true],
+  &[aria-selected='true'],
-  &[aria-current]:not([aria-current=false]) {
+  &[aria-current]:not([aria-current='false']) {
     cursor: default;
     background-color: var(--color-menu-bg-active);
 

src/navigation/sidenav.scss

@@ -59,7 +59,7 @@
   background-color: var(--color-canvas-subtle);
 }
 
-.SideNav-item[aria-current]:not([aria-current=false]),
+.SideNav-item[aria-current]:not([aria-current='false']),
 .SideNav-item[aria-selected='true'] {
   background-color: var(--color-sidenav-selected-bg);
 
@@ -101,7 +101,7 @@
   outline: none;
 }
 
-.SideNav-subItem[aria-current]:not([aria-current=false]),
+.SideNav-subItem[aria-current]:not([aria-current='false']),
 .SideNav-subItem[aria-selected='true'] {
   font-weight: $font-weight-semibold;
   color: var(--color-fg-default);

src/navigation/subnav.scss

@@ -40,8 +40,8 @@
   }
 
   &.selected,
-  &[aria-selected=true],
+  &[aria-selected='true'],
-  &[aria-current]:not([aria-current=false]) {
+  &[aria-current]:not([aria-current='false']) {
     z-index: 2;
     color: var(--color-fg-on-emphasis);
     background-color: var(--color-accent-emphasis);

src/navigation/tabnav.scss

@@ -28,8 +28,8 @@
   transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
 
   &.selected,
-  &[aria-selected=true],
+  &[aria-selected='true'],
-  &[aria-current]:not([aria-current=false]) {
+  &[aria-current]:not([aria-current='false']) {
     color: var(--color-fg-default);
     background-color: var(--color-canvas-default); // cover bottom border
     border-color: var(--color-border-default);

src/navigation/underline-nav.scss

@@ -83,6 +83,7 @@ $nav-height: $spacer-3 * 3 !default; // 48px
   &.focus,
   &:focus {
     @include focusOutline;
+
     outline-offset: -2px;
   }
 

src/pagination/pagination.scss

@@ -42,7 +42,7 @@
 
   .current,
   .current:hover,
-  [aria-current]:not([aria-current=false]) {
+  [aria-current]:not([aria-current='false']) {
     color: var(--color-fg-on-emphasis);
     background-color: var(--color-accent-emphasis);
     border-color: transparent;
@@ -50,10 +50,10 @@
 
   .gap,
   .disabled,
-  [aria-disabled=true],
+  [aria-disabled='true'],
   .gap:hover,
   .disabled:hover,
-  [aria-disabled=true]:hover {
+  [aria-disabled='true']:hover {
     color: var(--color-primer-fg-disabled);
     cursor: default;
     border-color: transparent;

src/select-menu/select-menu.scss

@@ -386,7 +386,7 @@ $SelectMenu-max-height: 480px !default;
 //
 // Visible when a user clicks/taps on a list item
 
-.SelectMenu-item[aria-checked=true] {
+.SelectMenu-item[aria-checked='true'] {
   font-weight: $font-weight-semibold;
   color: var(--color-fg-default);
 
@@ -402,7 +402,7 @@ $SelectMenu-max-height: 480px !default;
 // Prevent list items to be selected
 
 .SelectMenu-item:disabled,
-.SelectMenu-item[aria-disabled=true] {
+.SelectMenu-item[aria-disabled='true'] {
   color: var(--color-primer-fg-disabled);
   pointer-events: none;
 }

src/support/mixins/color-modes.scss

@@ -8,6 +8,7 @@
       /*! */ // This is a fix for a cssstats bug see https://github.com/cssstats/cssstats/issues/331
     }
   }
+
   @else {
     [data-color-mode="light"][data-light-theme="#{$theme-name}"],
     [data-color-mode="dark"][data-dark-theme="#{$theme-name}"] {
@@ -36,6 +37,7 @@
       @content;
     }
   }
+
   @else {
     [data-color-mode="light"][data-light-theme*="#{$mode}"],
     [data-color-mode="dark"][data-dark-theme*="#{$mode}"] {
@@ -84,6 +86,7 @@
       @if $type == dark {
         $dark-colors: append($dark-colors, (--color-#{$name}, #{$color}));
       }
+
       @else {
         $light-colors: append($light-colors, (--color-#{$name}, #{$color}));
       }

src/support/mixins/typography.scss

@@ -47,7 +47,6 @@
 
   // 32px on desktop
   @include breakpoint(md) { font-size: $h1-size; }
-
 }
 
 @mixin f2-responsive {
@@ -62,7 +61,6 @@
 
   // 20px on desktop
   @include breakpoint(md) { font-size: $h3-size; }
-
 }
 
 // These use the mixins from above for responsive heading sizes.
@@ -70,15 +68,18 @@
 // couple the responsive font-size with the font-weight.
 @mixin h1-responsive {
   @include f1-responsive;
+
   font-weight: $font-weight-bold;
 }
 
 @mixin h2-responsive {
   @include f2-responsive;
+
   font-weight: $font-weight-bold;
 }
 
 @mixin h3-responsive {
   @include f3-responsive;
+
   font-weight: $font-weight-bold;
 }

stylelint.config.cjs

@@ -1,16 +1,7 @@
 module.exports = {
   extends: ['@primer/stylelint-config'],
-  plugins: ['stylelint-scss'],
+  ignoreFiles: ['**/*.js', '**/*.cjs'],
-  customSyntax: require('postcss-scss'),
-  ignoreFiles: ['src/fonts/**/*'],
   rules: {
-    'scss/dollar-variable-default': [true, {ignore: 'local'}],
+    'primer/no-override': false
-    'primer/no-override': false,
-    'primer/colors': true,
-    'primer/borders': true,
-    'primer/spacing': true,
-    'primer/typography': true,
-    'primer/box-shadow': true,
-    'primer/no-undefined-vars': [true, {files: 'node_modules/@primer/primitives/dist/scss/colors*/*.scss'}]
   }
 }

yarn.lock

@@ -970,16 +970,18 @@
   resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-7.2.0.tgz#049fc6d2fef20ea7fa517e583671aa0a8a26e9e9"
   integrity sha512-7HkPAn7gnCcKPfDrqJc9OCUttPwBcoJRj2JR78obUbCkSfRV4I7cZiMS8tf9rYJ9HV69u+km8ab2Jrf4eOnVBg==
 
-"@primer/stylelint-config@12.1.1":
+"@primer/stylelint-config@12.2.0":
-  version "12.1.1"
+  version "12.2.0"
-  resolved "https://registry.yarnpkg.com/@primer/stylelint-config/-/stylelint-config-12.1.1.tgz#d4508c1e8db259482d45b88c54ecd261168ed087"
+  resolved "https://registry.yarnpkg.com/@primer/stylelint-config/-/stylelint-config-12.2.0.tgz#361e60e09838b088a3f012edf260b52f3cdda90b"
-  integrity sha512-GJjN0YV8WZFNFdB4NwJwW1Jv71m4KEFhMGzLXn8jeTVcjIXwoME1U17t5Ibo2WS6Ot2B1+7aKQwAWD/LB7at2w==
+  integrity sha512-TzQR+8UNS39jqao2tCQOrjSiGSjWTaLyc4omEZpHhvSbVvYO1M+EmEQvK/1uoDK8IUSQpIRKvuDiQsHObpgD4Q==
   dependencies:
     anymatch "^3.1.1"
     globby "^11.0.1"
     lodash.kebabcase "^4.1.1"
+    postcss-scss "^4.0.2"
     postcss-value-parser "^4.0.2"
     string.prototype.matchall "^4.0.2"
+    stylelint-config-standard "24.0.0"
     stylelint-no-unsupported-browser-features "^5.0.1"
     stylelint-order "^5.0.0"
     stylelint-scss "^4.0.0"
@@ -4574,7 +4576,7 @@ postcss-safe-parser@^6.0.0:
   resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz#bb4c29894171a94bc5c996b9a30317ef402adaa1"
   integrity sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==
 
-postcss-scss@4.0.2:
+postcss-scss@4.0.2, postcss-scss@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-4.0.2.tgz#39ddcc0ab32f155d5ab328ee91353d67a52d537b"
   integrity sha512-xfdkU128CkKKKVAwkyt0M8OdnelJ3MRcIRAPPQkRpoPeuzWY3RIeg7piRCpZ79MK7Q16diLXMMAD9dN5mauPlQ==
@@ -5241,6 +5243,18 @@ style-search@^0.1.0:
   resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"
   integrity sha1-eVjHk+R+MuB9K1yv5cC/jhLneQI=
 
+stylelint-config-recommended@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-6.0.0.tgz#fd2523a322836005ad9bf473d3e5534719c09f9d"
+  integrity sha512-ZorSSdyMcxWpROYUvLEMm0vSZud2uB7tX1hzBZwvVY9SV/uly4AvvJPPhCcymZL3fcQhEQG5AELmrxWqtmzacw==
+
+stylelint-config-standard@24.0.0:
+  version "24.0.0"
+  resolved "https://registry.yarnpkg.com/stylelint-config-standard/-/stylelint-config-standard-24.0.0.tgz#6823f207ab997ae0b641f9a636d007cc44d77541"
+  integrity sha512-+RtU7fbNT+VlNbdXJvnjc3USNPZRiRVp/d2DxOF/vBDDTi0kH5RX2Ny6errdtZJH3boO+bmqIYEllEmok4jiuw==
+  dependencies:
+    stylelint-config-recommended "^6.0.0"
+
 stylelint-no-unsupported-browser-features@^5.0.1:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/stylelint-no-unsupported-browser-features/-/stylelint-no-unsupported-browser-features-5.0.2.tgz#f253d5a9258cfd1a62f7751396e274dc6e4b29e3"
@@ -5258,7 +5272,7 @@ stylelint-order@^5.0.0:
     postcss "^8.3.11"
     postcss-sorting "^7.0.1"
 
-stylelint-scss@4.0.0, stylelint-scss@^4.0.0:
+stylelint-scss@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-4.0.0.tgz#4901ced92b9c68e37649799a39defbd5f2ac5bcd"
   integrity sha512-lIRhPqtI6I065EJ6aI4mWKsmQt8Krnu6aF9XSL9s8Nd2f/cDKImST0T9TfjnUul3ReKYWozkG9dlpNTZH2FB9w==