Update stylelint and stylelint-config-twbs-bootstrap (#35438)

.stylelintrc

@@ -1,6 +1,6 @@
 {
   "extends": [
-    "stylelint-config-twbs-bootstrap/scss"
+    "stylelint-config-twbs-bootstrap"
   ],
   "rules": {
     "declaration-property-value-disallowed-list": {

package.json

@@ -64,7 +64,7 @@
     "docs-serve": "hugo server --port 9001 --disableFastRender",
     "docs-serve-only": "npx sirv-cli _site --port 9001",
     "lockfile-lint": "lockfile-lint --allowed-hosts npm --allowed-schemes https: --empty-hostname false --type npm --path package-lock.json",
-    "update-deps": "ncu -u -x globby,karma-browserstack-launcher,stylelint && echo Manually update site/assets/js/vendor",
+    "update-deps": "ncu -u -x globby,karma-browserstack-launcher && echo Manually update site/assets/js/vendor",
     "release": "npm-run-all dist release-sri docs-build release-zip*",
     "release-sri": "node build/generate-sri.js",
     "release-version": "node build/change-version.js",
@@ -144,8 +144,8 @@
     "rtlcss": "^3.5.0",
     "sass": "^1.45.0",
     "shelljs": "^0.8.4",
-    "stylelint": "^13.13.1",
-    "stylelint-config-twbs-bootstrap": "^2.2.4",
+    "stylelint": "^14.1.0",
+    "stylelint-config-twbs-bootstrap": "^3.0.0-beta1",
     "terser": "^5.10.0",
     "vnu-jar": "21.10.12"
   },

scss/_modal.scss

@@ -124,8 +124,8 @@
 // Footer (for actions)
 .modal-footer {
   display: flex;
-  flex-wrap: wrap;
   flex-shrink: 0;
+  flex-wrap: wrap;
   align-items: center; // vertically center
   justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
   padding: $modal-inner-padding - $modal-footer-margin-between * .5;

scss/_nav.scss

@@ -49,9 +49,9 @@
 
     &:hover,
     &:focus {
-      border-color: $nav-tabs-link-hover-border-color;
       // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
       isolation: isolate;
+      border-color: $nav-tabs-link-hover-border-color;
     }
 
     &.disabled {

scss/_utilities.scss

@@ -1,5 +1,3 @@
-// stylelint-disable indentation
-
 // Utilities
 
 $utilities: () !default;

scss/forms/_form-select.scss

@@ -7,7 +7,6 @@
   display: block;
   width: 100%;
   padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
-  // stylelint-disable-next-line property-no-vendor-prefix
   -moz-padding-start: subtract($form-select-padding-x, 3px); // See https://github.com/twbs/bootstrap/issues/32636
   font-family: $form-select-font-family;
   @include font-size($form-select-font-size);

scss/mixins/_reset-text.scss

@@ -11,7 +11,7 @@
   text-transform: none;
   letter-spacing: normal;
   word-break: normal;
-  word-spacing: normal;
   white-space: normal;
+  word-spacing: normal;
   line-break: auto;
 }

site/assets/scss/_algolia.scss

@@ -1,5 +1,7 @@
 // Docsearch theming
 
+// stylelint-disable selector-class-pattern
+
 .algolia-autocomplete {
   width: 100%;
 }
@@ -24,7 +26,6 @@
   font-weight: 600;
   color: $bd-purple-bright;
 
-  // stylelint-disable-next-line selector-class-pattern
   :not(.algolia-docsearch-suggestion__main) > & {
     display: none;
   }

site/assets/scss/_layout.scss

@@ -4,9 +4,9 @@
 
   @include media-breakpoint-up(md) {
     display: grid;
-    gap: $grid-gutter-width;
     grid-template-areas: "sidebar main";
     grid-template-columns: 1fr 3fr;
+    gap: $grid-gutter-width;
   }
 
   @include media-breakpoint-up(lg) {
@@ -23,20 +23,20 @@
 
   @include media-breakpoint-up(md) {
     display: grid;
-    gap: inherit;
     grid-template-areas:
       "intro"
       "toc"
       "content";
     grid-template-rows: auto auto 1fr;
+    gap: inherit;
   }
 
   @include media-breakpoint-up(lg) {
     grid-template-areas:
       "intro   toc"
       "content toc";
-    grid-template-columns: 4fr 1fr;
     grid-template-rows: auto 1fr;
+    grid-template-columns: 4fr 1fr;
   }
 }
 

site/assets/scss/_placeholder-img.scss

@@ -6,8 +6,8 @@
 
 .bd-placeholder-img {
   @include font-size(1.125rem);
-  text-anchor: middle;
   user-select: none;
+  text-anchor: middle;
 }
 
 .bd-placeholder-img-lg {

site/assets/scss/_syntax.scss

@@ -1,4 +1,4 @@
-// stylelint-disable comment-empty-line-before, declaration-block-single-line-max-declarations, selector-class-pattern
+// stylelint-disable comment-empty-line-before, declaration-block-single-line-max-declarations
 
 /* Background .chroma { background-color: #f0f0f0; } */
 /* Other .chroma .x { } */

site/content/docs/5.1/examples/.stylelintrc

@@ -1,12 +1,12 @@
 {
   "extends": [
-    "stylelint-config-twbs-bootstrap/css"
+    "stylelint-config-twbs-bootstrap"
   ],
   "rules": {
     "at-rule-no-vendor-prefix": null,
     "comment-empty-line-before": null,
     "media-feature-name-no-vendor-prefix": null,
-    "property-blacklist": null,
+    "property-disallowed-list": null,
     "property-no-vendor-prefix": null,
     "selector-no-qualifying-type": null,
     "selector-no-vendor-prefix": null,

site/content/docs/5.1/examples/cheatsheet/cheatsheet.css

@@ -99,9 +99,9 @@ body {
 @media (min-width: 1200px) {
   body {
     display: grid;
-    gap: 1rem;
-    grid-template-columns: 1fr 4fr 1fr;
     grid-template-rows: auto;
+    grid-template-columns: 1fr 4fr 1fr;
+    gap: 1rem;
   }
 
   .bd-header {
@@ -127,10 +127,10 @@ body {
   .bd-cheatsheet section,
   .bd-cheatsheet article {
     display: inherit; /* 1 */
-    gap: inherit; /* 1 */
+    grid-template-rows: auto;
     grid-template-columns: 1fr 4fr;
     grid-column: 1 / span 2;
-    grid-template-rows: auto;
+    gap: inherit; /* 1 */
   }
 
   .bd-aside {

site/content/docs/5.1/examples/cheatsheet/cheatsheet.rtl.css

@@ -96,9 +96,9 @@ body {
 @media (min-width: 1200px) {
   body {
     display: grid;
-    gap: 1rem;
-    grid-template-columns: 1fr 4fr 1fr;
     grid-template-rows: auto;
+    grid-template-columns: 1fr 4fr 1fr;
+    gap: 1rem;
   }
 
   .bd-header {
@@ -122,10 +122,10 @@ body {
   .bd-cheatsheet section,
   .bd-cheatsheet article {
     display: inherit; /* 1 */
-    gap: inherit; /* 1 */
+    grid-template-rows: auto;
     grid-template-columns: 1fr 4fr;
     grid-column: 1 / span 2;
-    grid-template-rows: auto;
+    gap: inherit; /* 1 */
   }
 
   .bd-aside {

site/content/docs/5.1/examples/features/features.css

@@ -30,8 +30,8 @@
 .icon-link > .bi {
   margin-top: .125rem;
   margin-left: .125rem;
-  transition: transform .25s ease-in-out;
   fill: currentColor;
+  transition: transform .25s ease-in-out;
 }
 .icon-link:hover > .bi {
   transform: translate(.25rem);