Use modern :not() syntax (#42268)

diff --git a/scss/_card.scss b/scss/_card.scss
index a2747509c694ca0bd9d09b3df755615c2a9b97e7..11f5729766620a0e91c7c4cc49678d36691a5e0b 100644 (file)
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -88,7 +88,7 @@ $card-tokens: defaults(
       border-bottom-width: var(--card-border-width);
     }
 
-    &:not(:first-child):not(:last-child) {
+    &:not(:first-child, :last-child) {
       border-block-end-width: var(--card-border-width);
     }
   }
@@ -217,7 +217,7 @@ $card-tokens: defaults(
         border-inline-end-width: var(--card-border-width);
       }
 
-      &:not(:first-child):not(:last-child) {
+      &:not(:first-child, :last-child) {
         border-inline-end-width: var(--card-border-width);
       }
     }

diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 95859f8be097aa690e0e9287e5302951a90c3a2f..7dc0012c4ba57d9d3f499ffcd83b22d897adbb59 100644 (file)
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -274,7 +274,7 @@ $navbar-nav-tokens: defaults(
   // intentional show/hide actions animate.
   // stylelint-disable-next-line no-duplicate-selectors
   .navbar {
-    [class*="drawer"]:not([open]):not(.hiding) {
+    [class*="drawer"]:not([open], .hiding) {
       @include transition(none !important);
     }
   }

diff --git a/scss/buttons/_button-group.scss b/scss/buttons/_button-group.scss
index 285bc6114edf80605a3284cc5cacdd378f993943..7f3da8fdb76ae11b2cc8afe6e8323eee9a3dd936 100644 (file)
--- a/scss/buttons/_button-group.scss
+++ b/scss/buttons/_button-group.scss
@@ -51,7 +51,7 @@
     }
 
     // Reset rounded corners
-    > [class*="btn-"]:not(:last-child):not(:has(+ .menu)),
+    > [class*="btn-"]:not(:last-child, :has(+ .menu)),
     > .btn-group:not(:last-child) > [class*="btn-"] {
       @include border-end-radius(0);
     }
@@ -83,7 +83,7 @@
     }
 
     // Reset rounded corners
-    > [class*="btn-"]:not(:last-child):not(:has(+ .menu)),
+    > [class*="btn-"]:not(:last-child, :has(+ .menu)),
     > .btn-group:not(:last-child) > [class*="btn-"] {
       @include border-bottom-radius(0);
     }

diff --git a/scss/content/_prose.scss b/scss/content/_prose.scss
index 6ad179fb2aab7b3a14ebae6e73c93f92870d64d6..7e2eaab30d1da5445052dd3e20f59d7238525f6c 100644 (file)
--- a/scss/content/_prose.scss
+++ b/scss/content/_prose.scss
@@ -39,7 +39,7 @@ $prose-tokens: defaults(
       margin-block: 0;
     }
 
-    :where(ul, ol):not([class]):not(:where(.not-prose, .not-prose *)) li:not(:last-child) {
+    :where(ul, ol):not([class], :where(.not-prose, .not-prose *)) li:not(:last-child) {
       margin-bottom: calc(var(--content-gap) / 4);
     }
 
@@ -53,7 +53,7 @@ $prose-tokens: defaults(
       border-block-start: var(--border-width) solid var(--hr-border-color);
     }
 
-    :where(h1, h2, h3, h4, h5, h6):not([class]):not(:where(.not-prose, .not-prose *)) {
+    :where(h1, h2, h3, h4, h5, h6):not([class], :where(.not-prose, .not-prose *)) {
       margin-top: 0;
       margin-bottom: calc(var(--content-gap) / -2);
       font-weight: 500;
@@ -65,11 +65,11 @@ $prose-tokens: defaults(
       }
     }
 
-    :where(h1, h2):not(:first-child):not(:where(.not-prose, .not-prose *)) {
+    :where(h1, h2):not(:first-child, :where(.not-prose, .not-prose *)) {
       margin-top: calc(var(--content-gap) * .75);
     }
 
-    :where(h3, h4, h5, h6):not(:first-child):not(:where(.not-prose, .not-prose *)) {
+    :where(h3, h4, h5, h6):not(:first-child, :where(.not-prose, .not-prose *)) {
       margin-top: calc(var(--content-gap) * .5);
     }
 

diff --git a/scss/content/_reboot.scss b/scss/content/_reboot.scss
index e70f50dfca4dd067206634b1de59f57b95b6ea8a..01ee4545fbdc61de889ec396dea4268f8c109447 100644 (file)
--- a/scss/content/_reboot.scss
+++ b/scss/content/_reboot.scss
@@ -284,7 +284,7 @@ $reboot-mark-tokens: defaults(
   // causes specificity issues in many other styles that are too complex to fix.
   // See https://github.com/twbs/bootstrap/issues/19402
 
-  a:not([href]):not([class]) {
+  a:not([href], [class]) {
     &,
     &:hover {
       color: inherit;
@@ -461,7 +461,7 @@ $reboot-mark-tokens: defaults(
   // Remove the dropdown arrow only from text type inputs built with datalists in Chrome.
   // See https://stackoverflow.com/a/54997118
 
-  [list]:not([type="date"]):not([type="datetime-local"]):not([type="month"]):not([type="week"]):not([type="time"])::-webkit-calendar-picker-indicator {
+  [list]:not([type="date"], [type="datetime-local"], [type="month"], [type="week"], [type="time"])::-webkit-calendar-picker-indicator {
     display: none !important;
   }
 

diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
index 17a2bdf6fb13d0ddec31c6175c8815f3d3f54aac..0cbe910ce88f7b7d58140e82a91efafe96859f97 100644 (file)
--- a/scss/forms/_form-control.scss
+++ b/scss/forms/_form-control.scss
@@ -137,7 +137,7 @@ $form-control-sizes: defaults(
     &[type="file"] {
       overflow: hidden; // prevent pseudo element button overlap
 
-      &:not(:disabled):not([readonly]) {
+      &:not(:disabled, [readonly]) {
         cursor: pointer;
       }
     }
@@ -157,7 +157,7 @@ $form-control-sizes: defaults(
       @include transition(var(--control-transition));
     }
 
-    &:hover:not(:disabled):not([readonly])::file-selector-button {
+    &:hover:not(:disabled, [readonly])::file-selector-button {
       background-color: var(--control-action-hover-bg);
     }
   }
@@ -231,7 +231,7 @@ $form-control-sizes: defaults(
     width: var(--control-min-height);
     padding: var(--control-padding-y);
 
-    &:not(:disabled):not([readonly]) {
+    &:not(:disabled, [readonly]) {
       cursor: pointer;
     }
 

diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss
index 4e0c201bf371a12aad205dd1c03777fbc0f4aaf5..49f83aee00d644954c25cdee03fbcda152c94fd1 100644 (file)
--- a/scss/forms/_input-group.scss
+++ b/scss/forms/_input-group.scss
@@ -118,7 +118,7 @@ $input-group-sizes: defaults(
 
     $validation-messages: "";
     &:not(.has-validation) {
-      > :not(:last-child):not(.menu-toggle-split):not(.menu):not(.form-floating),
+      > :not(:last-child, .menu-toggle-split, .menu, .form-floating),
       > .menu-toggle-split:nth-last-child(n + 3),
       > .form-floating:not(:last-child) > .form-control,
       > .form-floating:not(:last-child) > .form-select {
@@ -127,7 +127,7 @@ $input-group-sizes: defaults(
     }
 
     &.has-validation {
-      > :nth-last-child(n + 3):not(.menu-toggle-split):not(.menu):not(.form-floating),
+      > :nth-last-child(n + 3):not(.menu-toggle-split, .menu, .form-floating),
       > .menu-toggle-split:nth-last-child(n + 4),
       > .form-floating:nth-last-child(n + 3) > .form-control,
       > .form-floating:nth-last-child(n + 3) > .form-select {
@@ -135,7 +135,7 @@ $input-group-sizes: defaults(
       }
     }
 
-    > :not(:first-child):not(.menu)#{$validation-messages} {
+    > :not(:first-child, .menu)#{$validation-messages} {
       margin-inline-start: calc(-1 * var(--border-width));
       @include border-start-radius(0);
     }

diff --git a/scss/helpers/_visually-hidden.scss b/scss/helpers/_visually-hidden.scss
index 262d035fce0a5c9e1fa107e309dd25f131d1aca0..327dc0cbb230275ea900acd3722e59ac58d76b75 100644 (file)
--- a/scss/helpers/_visually-hidden.scss
+++ b/scss/helpers/_visually-hidden.scss
@@ -2,7 +2,7 @@
 
 @layer helpers {
   .visually-hidden,
-  .visually-hidden-focusable:not(:focus):not(:focus-within) {
+  .visually-hidden-focusable:not(:focus, :focus-within) {
     @include visually-hidden();
   }
 }

diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index f50b359a90ee14a31e035ad73f77eede6523f250..d07accc47258c2712e106f384e1e28c9c7e9d7d9 100644 (file)
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -94,7 +94,7 @@
       border-color: $border-color;
 
       @if $enable-validation-icons {
-        &:not([multiple]):not([size]),
+        &:not([multiple], [size]),
         &:not([multiple])[size="1"] {
           --form-select-bg-icon: #{escape-svg($icon)};
           padding-inline-end: $form-select-feedback-icon-padding-end;

diff --git a/scss/mixins/_visually-hidden.scss b/scss/mixins/_visually-hidden.scss
index 9dd0ad33bf8286cdf7f4074d90ada31f7c1041e4..4836b8175a4b3d54d14f9b6fc343d1b0ebbfeb23 100644 (file)
--- a/scss/mixins/_visually-hidden.scss
+++ b/scss/mixins/_visually-hidden.scss
@@ -32,7 +32,7 @@
 // Useful for "Skip to main content" links; see https://www.w3.org/WAI/WCAG22/Techniques/general/G1.html
 
 @mixin visually-hidden-focusable() {
-  &:not(:focus):not(:focus-within) {
+  &:not(:focus, :focus-within) {
     @include visually-hidden();
   }
 }

diff --git a/stylelint.config.mjs b/stylelint.config.mjs
index 7aa3e04e30e552ec437958513d088911d523d9d0..e71a36d2afe49ba5a7a6ec1b885a90e82acd2657 100644 (file)
--- a/stylelint.config.mjs
+++ b/stylelint.config.mjs
@@ -9,6 +9,7 @@ export default {
   reportInvalidScopeDisables: true,
   reportNeedlessDisables: true,
   rules: {
+    'selector-not-notation': 'complex',
     'selector-class-pattern': [
       '^([a-z][a-z0-9]*(-[a-z0-9]+)*:)?([a-z][a-z0-9]*)(-[a-z0-9]+)*$',
       { message: 'Expected class selector "%s" to be kebab-case (with optional breakpoint prefix)' }