Adopt a small set of stylelint-config-wagtail changes

Where possible, adopt a subset of stylelint-config-wagtail changes.

- Formatting & ordering (auto applied), this includes the padding/inset shorthand changes
- Adopt a small set of no-union-classes changes as an example of changes to come in future PRs
- Ignore some areas where we are selecting against data* attributes that will not be practical to change
- Move some no-important ignore rules to specific lines
- Ignore max-combinators in modeladmin styles (legacy)
- Remove error messages forced-color-adjust setting to none

client/scss/components/_dismissible.scss

@@ -41,18 +41,18 @@
     border: 3px solid transparent;
     box-sizing: content-box;
   }
+}
 
-  &--count {
-    color: theme('colors.surface-menus');
-    text-align: center;
-    font-size: 0.625rem;
-    font-weight: theme('fontWeight.bold');
-    min-width: theme('spacing.[3.5]');
-    height: theme('spacing.[3.5]');
-    line-height: theme('lineHeight.tight');
+.w-dismissible-badge--count {
+  color: theme('colors.surface-menus');
+  text-align: center;
+  font-size: 0.625rem;
+  font-weight: theme('fontWeight.bold');
+  min-width: theme('spacing.[3.5]');
+  height: theme('spacing.[3.5]');
+  line-height: theme('lineHeight.tight');
 
-    @media (prefers-reduced-motion: no-preference) {
-      animation: pulse-warning 5s 5;
-    }
+  @media (prefers-reduced-motion: no-preference) {
+    animation: pulse-warning 5s 5;
   }
 }

client/scss/components/_filters.scss

@@ -3,23 +3,23 @@
   grid-template-columns: 1fr minmax(theme('spacing.48'), theme('spacing.64'));
   grid-column-gap: theme('spacing.12');
 
-  &__filters {
-    button[type='submit'] {
-      display: block;
-      margin-bottom: theme('spacing.6');
-    }
+  @include media-breakpoint-down(md) {
+    grid-template-columns: auto;
+  }
+}
 
-    input[type='checkbox'] {
-      display: block;
-      margin-bottom: theme('spacing.3');
-    }
+.filterable__filters {
+  button[type='submit'] {
+    display: block;
+    margin-bottom: theme('spacing.6');
+  }
+
+  input[type='checkbox'] {
+    display: block;
+    margin-bottom: theme('spacing.3');
   }
 
   @include media-breakpoint-down(md) {
-    grid-template-columns: auto;
-
-    &__filters {
-      grid-row: 1;
-    }
+    grid-row: 1;
   }
 }

client/scss/components/_footer.scss

@@ -105,6 +105,8 @@
   }
 
   @include media-breakpoint-down(xs) {
+    margin-top: $mobile-nice-padding;
+
     .actions,
     .preview,
     &__container,
@@ -112,8 +114,6 @@
       width: 100%;
     }
 
-    margin-top: $mobile-nice-padding;
-
     .meta {
       p {
         white-space: normal;

client/scss/components/_listing.scss

@@ -1,3 +1,4 @@
+/* stylelint-disable selector-max-combinators */
 // General listings, like for pages, images or snippets
 ul.listing {
   @include unlist();

client/scss/components/_preview-panel.scss

@@ -1,8 +1,4 @@
 .preview-panel {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-
   --w-preview-background-color: var(--w-color-white);
   --preview-width-ratio: min(
     1,
@@ -10,6 +6,10 @@
   );
   --preview-iframe-width: calc(1px * var(--preview-device-width, 375));
 
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
   &__area {
     height: 100%;
     display: flex;

client/scss/components/_tabs.scss

@@ -65,6 +65,7 @@
   }
 
   // Optional animate attr for tabs to animate in
+  /* stylelint-disable-next-line selector-attribute-name-disallowed-list */
   &[data-tabs-animate] &__panel {
     @apply motion-reduce:w-transition-none w-transition w-duration-150 w-translate-y-1 w-opacity-0;
 

client/scss/components/forms/_error-message.scss

@@ -7,10 +7,6 @@
   font-weight: bold;
   color: theme('colors.text-error');
 
-  @media (forced-colors: active) {
-    forced-color-adjust: none;
-  }
-
   &::before {
     content: '';
     display: inline-block;

client/scss/layouts/_report.scss

@@ -1,9 +1,8 @@
 .report {
+  @include nice-margin();
   display: grid;
   grid-column-gap: theme('spacing.12');
 
-  @include nice-margin();
-
   &__results {
     &--text {
       margin: 0 theme('spacing.[1.5]') theme('spacing.[1.5]') 0;

client/scss/overrides/_vendor.datetimepicker.scss

@@ -159,7 +159,6 @@
         padding-inline-start: 0.6em;
         padding-inline-end: 0.6em;
 
-        // stylelint-disable-next-line max-nesting-depth
         &:first-child {
           border-top-width: 0;
         }
@@ -208,7 +207,6 @@
       > div > .xdsoft_option:hover {
         background: theme('colors.text-highlight');
 
-        // stylelint-disable-next-line max-nesting-depth
         @media (forced-colors: active) {
           background: SelectedItem;
         }
@@ -280,20 +278,20 @@
   .xdsoft_calendar td.xdsoft_other_month,
   .xdsoft_calendar td.xdsoft_disabled,
   .xdsoft_time_box > div > div.xdsoft_disabled {
-    opacity: 0.5;
+    opacity: 50%;
     background: theme('colors.border-furniture');
 
     @media (forced-colors: active) {
-      opacity: 1;
+      opacity: 100%;
       color: GrayText;
     }
   }
 
   .xdsoft_calendar td.xdsoft_other_month.xdsoft_disabled {
-    opacity: 0.2;
+    opacity: 20%;
 
     @media (forced-colors: active) {
-      opacity: 1;
+      opacity: 100%;
       color: GrayText;
     }
   }

client/src/components/CommentApp/components/CommentHeader/style.scss

@@ -40,12 +40,7 @@
 
     > button,
     > details > summary {
-      // Hides triangle on Firefox
-      list-style-type: none;
-      // Hides triangle on Chrome
-      &::-webkit-details-marker {
-        display: none;
-      }
+      list-style-type: none; // Hides triangle on Firefox
       width: 30px;
       height: 30px;
       position: relative;
@@ -53,6 +48,10 @@
       border: unset;
       padding: 0;
 
+      &::-webkit-details-marker {
+        display: none; // Hides triangle on Chrome
+      }
+
       svg {
         position: absolute;
         top: 7.5px;

client/src/components/Draftail/Draftail.scss

@@ -77,10 +77,10 @@ $draftail-editor-font-family: $font-sans;
 }
 
 .Draftail-Editor {
-  @include input-base();
   // Number used inside a `calc` function, which doesn’t support unitless zero.
   // stylelint-disable-next-line length-zero-no-unit
   --draftail-offset-inline-start: 0px;
+  @include input-base();
 
   &--focus {
     outline: $focus-outline-width solid theme('colors.focus');

client/src/components/PageExplorer/PageExplorer.scss

@@ -85,8 +85,8 @@ $explorer-header-horizontal-padding: 10px;
 }
 
 .c-page-explorer__header__select {
-  @apply w-text-text-label-menus-default w-bg-surface-menus;
   $margin: 10px;
+  @apply w-text-text-label-menus-default w-bg-surface-menus;
   margin-inline-end: $margin;
 
   > select {

client/src/components/Sidebar/SidebarPanel.scss

@@ -1,7 +1,7 @@
 .sidebar-panel {
-  @apply w-transition-sidebar;
   // With CSS variable allows panels with different widths to animate properly
   --width: #{$menu-width};
+  @apply w-transition-sidebar;
 
   visibility: hidden;
   transform: translateX(calc(var(--w-direction-factor) * -100%));

client/src/components/Sidebar/menu/SubMenuItem.scss

@@ -1,16 +1,16 @@
 .sidebar-sub-menu-trigger-icon {
   $root: &;
-  display: block;
-  width: 1rem;
-  height: 1rem;
-  inset-inline-end: 15px;
-  margin-inline-start: auto;
 
   @include transition(
     transform $menu-transition-duration ease,
     width $menu-transition-duration ease,
     height $menu-transition-duration ease
   );
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  inset-inline-end: 15px;
+  margin-inline-start: auto;
 
   &--open {
     transform-origin: 50% 50%;
@@ -40,9 +40,8 @@
   }
 
   ul > li {
-    position: relative;
-
     @include transition(border-color $menu-transition-duration ease);
+    position: relative;
   }
 
   > ul {

client/src/components/Sidebar/modules/MainMenu.scss

@@ -1,4 +1,3 @@
-// stylelint-disable declaration-no-important
 .sidebar-main-menu {
   overflow: auto;
   overflow-x: hidden;
@@ -23,16 +22,18 @@
 
   > ul > li > a {
     // Need !important to override body.ready class
+    // stylelint-disable-next-line declaration-no-important
     transition: padding $menu-transition-duration ease !important;
+  }
 
-    .menuitem-label {
-      transition: opacity $menu-transition-duration ease;
-    }
+  .menuitem-label {
+    transition: opacity $menu-transition-duration ease;
   }
 }
 
 .sidebar-footer {
   @apply w-bg-surface-menus w-mt-auto;
+  // stylelint-disable-next-line declaration-no-important
   transition: width $menu-transition-duration ease !important; // Override body.ready
 
   > ul,

client/src/components/Sidebar/modules/WagtailBranding.scss

@@ -1,4 +1,5 @@
-// stylelint-disable declaration-no-important
+/* stylelint-disable declaration-no-important, selector-attribute-name-disallowed-list */
+
 $logo-size: 110px;
 
 // Wagging animation

wagtail/contrib/typed_table_block/static_src/typed_table_block/scss/typed_table_block.scss

@@ -2,12 +2,6 @@
 @import '../../../../../../client/scss/tools';
 
 .typed-table-block {
-  &__wrapper {
-    overflow-x: auto;
-    // Reserve space for the add column menu.
-    min-height: 20rem;
-  }
-
   // Layout is handled by the table markup.
   .w-field__wrapper {
     margin-bottom: 0;
@@ -105,3 +99,9 @@
     padding-inline-start: theme('spacing.9');
   }
 }
+
+.typed-table-block__wrapper {
+  overflow-x: auto;
+  // Reserve space for the add column menu.
+  min-height: 20rem;
+}