From b47e429b26acd2dc49e68a2fa79b406ce4682d7a Mon Sep 17 00:00:00 2001
From: Jarek Radosz <jradosz@gmail.com>
Date: Tue, 18 Feb 2025 20:04:51 +0100
Subject: [PATCH] DEV: Fix `mixed-decls` sass deprecations in plugins (#31356)

A follow-up to #31343.

```
WARNING: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls
```
---
 plugins/chat/assets/stylesheets/common/base-common.scss  | 3 ++-
 .../assets/stylesheets/common/chat-channel-name.scss     | 8 +++++---
 .../assets/stylesheets/common/chat-composer-button.scss  | 7 ++++---
 .../chat/assets/stylesheets/common/chat-composer.scss    | 4 ++--
 plugins/chat/assets/stylesheets/common/chat-drawer.scss  | 3 ++-
 plugins/chat/assets/stylesheets/common/chat-index.scss   | 5 +----
 .../assets/stylesheets/common/chat-message-creator.scss  | 7 ++++---
 .../stylesheets/common/chat-messages-scroller.scss       | 6 ++++--
 .../stylesheets/common/chat-selection-manager.scss       | 7 ++++---
 .../chat/assets/stylesheets/common/chat-skeleton.scss    | 3 ++-
 .../stylesheets/common/chat-thread-unread-indicator.scss | 9 +++++----
 .../assets/stylesheets/common/chat-threads-list.scss     | 3 ++-
 .../assets/stylesheets/common/chat-unread-indicator.scss | 2 ++
 .../chat/assets/stylesheets/mixins/chat-scrollbar.scss   | 2 ++
 14 files changed, 41 insertions(+), 28 deletions(-)

diff --git a/plugins/chat/assets/stylesheets/common/base-common.scss b/plugins/chat/assets/stylesheets/common/base-common.scss
index 76bb6098a66..1ef735d5dbd 100644
--- a/plugins/chat/assets/stylesheets/common/base-common.scss
+++ b/plugins/chat/assets/stylesheets/common/base-common.scss
@@ -75,12 +75,13 @@ html.ios-device.keyboard-visible body #main-outlet .full-page-chat {
 
 .header-dropdown-toggle.chat-header-icon .icon {
   .chat-channel-unread-indicator {
-    @include chat-unread-indicator;
     border: 2px solid var(--header_background);
     position: absolute;
     top: 0;
     right: 2px;
 
+    @include chat-unread-indicator;
+
     &.-urgent {
       display: flex;
       align-items: center;
diff --git a/plugins/chat/assets/stylesheets/common/chat-channel-name.scss b/plugins/chat/assets/stylesheets/common/chat-channel-name.scss
index a564ad9c791..2849887882a 100644
--- a/plugins/chat/assets/stylesheets/common/chat-channel-name.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-channel-name.scss
@@ -23,14 +23,16 @@
   }
 
   .chat-channel-unread-indicator {
-    @include chat-unread-indicator;
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 8px;
-    height: 8px;
     flex-shrink: 0;
 
+    @include chat-unread-indicator {
+      width: 8px;
+      height: 8px;
+    }
+
     &.-urgent {
       width: auto;
       height: auto;
diff --git a/plugins/chat/assets/stylesheets/common/chat-composer-button.scss b/plugins/chat/assets/stylesheets/common/chat-composer-button.scss
index cd329728f45..50852d9240a 100644
--- a/plugins/chat/assets/stylesheets/common/chat-composer-button.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-composer-button.scss
@@ -1,13 +1,14 @@
 .chat-composer-button {
-  @include breakpoint(mobile-large) {
-    width: 50px;
-  }
   box-sizing: border-box;
   border: 0;
   height: 50px;
   background: none;
   padding-inline: 0.75rem;
 
+  @include breakpoint(mobile-large) {
+    width: 50px;
+  }
+
   .is-disabled & {
     cursor: not-allowed;
   }
diff --git a/plugins/chat/assets/stylesheets/common/chat-composer.scss b/plugins/chat/assets/stylesheets/common/chat-composer.scss
index b8840d7d986..6ce24c75152 100644
--- a/plugins/chat/assets/stylesheets/common/chat-composer.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-composer.scss
@@ -86,10 +86,11 @@
     margin: 5px 0;
     text-overflow: ellipsis;
     cursor: inherit;
-    @include chat-scrollbar;
     white-space: pre-wrap !important;
     min-width: 20px;
 
+    @include chat-scrollbar;
+
     &[disabled] {
       background: none;
 
@@ -103,7 +104,6 @@
       outline: none;
     }
 
-    &:placeholder-shown,
     &::placeholder {
       overflow: hidden;
       text-overflow: ellipsis;
diff --git a/plugins/chat/assets/stylesheets/common/chat-drawer.scss b/plugins/chat/assets/stylesheets/common/chat-drawer.scss
index 9d3e682d47f..2d611512d79 100644
--- a/plugins/chat/assets/stylesheets/common/chat-drawer.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-drawer.scss
@@ -94,7 +94,6 @@ html.rtl {
 }
 
 .chat-drawer-content {
-  @include chat-scrollbar;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
@@ -104,6 +103,8 @@ html.rtl {
   overflow-y: auto;
   overscroll-behavior: contain;
 
+  @include chat-scrollbar;
+
   .c-channel-settings {
     flex-grow: 1;
 
diff --git a/plugins/chat/assets/stylesheets/common/chat-index.scss b/plugins/chat/assets/stylesheets/common/chat-index.scss
index b3a8f935064..67144649d42 100644
--- a/plugins/chat/assets/stylesheets/common/chat-index.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-index.scss
@@ -29,13 +29,10 @@
 .channels-list,
 .channels-list-container {
   position: relative;
-  @include chat-scrollbar;
   height: 100%;
   padding-bottom: 1rem;
 
-  @include breakpoint(mobile-large) {
-    @include chat-scrollbar;
-  }
+  @include chat-scrollbar;
 
   .open-browse-page-btn,
   .open-draft-channel-page-btn,
diff --git a/plugins/chat/assets/stylesheets/common/chat-message-creator.scss b/plugins/chat/assets/stylesheets/common/chat-message-creator.scss
index e46531f4ae4..4e48fdf69d1 100644
--- a/plugins/chat/assets/stylesheets/common/chat-message-creator.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-message-creator.scss
@@ -47,14 +47,15 @@
   }
 
   &__member {
-    @media (prefers-reduced-motion: no-preference) {
-      animation: popIn 0.1s ease-out;
-    }
     padding: 0 0.25rem;
     border-radius: var(--border-radius);
     background: var(--primary-very-low);
     gap: 0.25rem;
 
+    @media (prefers-reduced-motion: no-preference) {
+      animation: popIn 0.1s ease-out;
+    }
+
     &:hover {
       .discourse-no-touch & {
         background: var(--primary-very-low);
diff --git a/plugins/chat/assets/stylesheets/common/chat-messages-scroller.scss b/plugins/chat/assets/stylesheets/common/chat-messages-scroller.scss
index ed2378bab00..7f05ee58fef 100644
--- a/plugins/chat/assets/stylesheets/common/chat-messages-scroller.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-messages-scroller.scss
@@ -7,8 +7,10 @@
   z-index: 1;
   margin: 0 1px 0 0;
   will-change: transform;
-  @include chat-scrollbar;
   min-height: 1px;
   box-sizing: border-box;
-  transition: padding-top 0.2s ease-in-out;
+
+  @include chat-scrollbar {
+    transition: scrollbar-color 0.25s ease-in-out, padding-top 0.2s ease-in-out;
+  }
 }
diff --git a/plugins/chat/assets/stylesheets/common/chat-selection-manager.scss b/plugins/chat/assets/stylesheets/common/chat-selection-manager.scss
index 032b08ea751..464e97a3f0a 100644
--- a/plugins/chat/assets/stylesheets/common/chat-selection-manager.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-selection-manager.scss
@@ -21,15 +21,16 @@
 
   &__copy-success {
     animation: chat-quote-message-background-fade-highlight 2s ease-out 3s;
-    @media (prefers-reduced-motion) {
-      animation-duration: 0s;
-    }
     animation-fill-mode: forwards;
     background-color: var(--success-low);
     color: var(--primary);
     flex: 1;
     line-height: normal;
     padding: 0.5rem 0.65rem;
+
+    @media (prefers-reduced-motion) {
+      animation-duration: 0s;
+    }
   }
 
   @keyframes chat-quote-message-background-fade-highlight {
diff --git a/plugins/chat/assets/stylesheets/common/chat-skeleton.scss b/plugins/chat/assets/stylesheets/common/chat-skeleton.scss
index 89797a3c68e..5354ec4b9c5 100644
--- a/plugins/chat/assets/stylesheets/common/chat-skeleton.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-skeleton.scss
@@ -128,10 +128,11 @@
         rgba(var(--chat-skeleton-animation-rgb), 0.3) 50%,
         rgba(var(--chat-skeleton-animation-rgb), 0.5) 100%
       );
+      content: "";
+
       @media (prefers-reduced-motion: no-preference) {
         animation: shimmer 1.25s infinite;
       }
-      content: "";
     }
 
     @keyframes shimmer {
diff --git a/plugins/chat/assets/stylesheets/common/chat-thread-unread-indicator.scss b/plugins/chat/assets/stylesheets/common/chat-thread-unread-indicator.scss
index b46064a0565..e24d8a4fa8a 100644
--- a/plugins/chat/assets/stylesheets/common/chat-thread-unread-indicator.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-thread-unread-indicator.scss
@@ -1,13 +1,14 @@
 .chat-thread-header-unread-indicator,
 .chat-thread-list-item-unread-indicator {
-  @include chat-unread-indicator;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: auto;
-  height: auto;
   padding: 0.21em 0.42em;
-  border-radius: 1em;
   min-width: 0.6em;
   align-self: center;
+
+  @include chat-unread-indicator {
+    width: auto;
+    height: auto;
+  }
 }
diff --git a/plugins/chat/assets/stylesheets/common/chat-threads-list.scss b/plugins/chat/assets/stylesheets/common/chat-threads-list.scss
index 9e8a9cea335..8f72154f2f1 100644
--- a/plugins/chat/assets/stylesheets/common/chat-threads-list.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-threads-list.scss
@@ -8,12 +8,13 @@
 
   &__items {
     overflow-y: scroll;
-    @include chat-scrollbar;
     box-sizing: border-box;
     flex-grow: 1;
     overscroll-behavior: contain;
     display: flex;
     flex-direction: column;
+
+    @include chat-scrollbar;
   }
 
   &__no-threads {
diff --git a/plugins/chat/assets/stylesheets/common/chat-unread-indicator.scss b/plugins/chat/assets/stylesheets/common/chat-unread-indicator.scss
index a59e62a0c6b..352b1e25bea 100644
--- a/plugins/chat/assets/stylesheets/common/chat-unread-indicator.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-unread-indicator.scss
@@ -11,6 +11,8 @@
   text-align: center;
   transition: border-color linear 0.15s;
 
+  @content;
+
   &.-urgent {
     background: var(--success);
     color: var(--secondary);
diff --git a/plugins/chat/assets/stylesheets/mixins/chat-scrollbar.scss b/plugins/chat/assets/stylesheets/mixins/chat-scrollbar.scss
index 461dc18680f..fbe90b2a03c 100644
--- a/plugins/chat/assets/stylesheets/mixins/chat-scrollbar.scss
+++ b/plugins/chat/assets/stylesheets/mixins/chat-scrollbar.scss
@@ -5,6 +5,8 @@
   scrollbar-color: transparent var(--scrollbarBg);
   transition: scrollbar-color 0.25s ease-in-out;
 
+  @content;
+
   // chrome, safari
   &::-webkit-scrollbar-thumb {
     background-color: var(--scrollbarThumbBg);