From 80872ef15c5bec9fa363f335acd57a2f856ce3cd Mon Sep 17 00:00:00 2001
From: Jamie Kyle <113370520+jamiebuilds-signal@users.noreply.github.com>
Date: Sun, 4 May 2025 19:57:44 -0700
Subject: [PATCH] Fix sass deprecation warnings and make them fatal

---
 package.json                                  |  2 +-
 stylesheets/_modules.scss                     | 23 +++++++++----------
 .../CriticalIdlePrimaryDeviceModal.scss       |  4 ++--
 .../LowDiskSpaceBackupImportModal.scss        |  4 ++--
 stylesheets/components/PlaybackButton.scss    |  3 +--
 .../SignalConversationMuteToggle.scss         | 18 +++++++--------
 6 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/package.json b/package.json
index 279c1481f1..600c176ff9 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "mark-unusued-strings-deleted": "ts-node ./ts/scripts/mark-unused-strings-deleted.ts",
     "get-expire-time": "node ts/scripts/get-expire-time.js",
     "copy-components": "node ts/scripts/copy.js",
-    "sass": "sass stylesheets/manifest.scss:stylesheets/manifest.css stylesheets/manifest_bridge.scss:stylesheets/manifest_bridge.css",
+    "sass": "sass stylesheets/manifest.scss:stylesheets/manifest.css stylesheets/manifest_bridge.scss:stylesheets/manifest_bridge.css --fatal-deprecation=1.80.7",
     "build-module-protobuf": "pbjs --root='signal-desktop' --target static-module --force-long --no-typeurl --no-verify --no-create --no-convert --wrap commonjs --out ts/protobuf/compiled.js protos/*.proto && pbts --no-comments --out ts/protobuf/compiled.d.ts ts/protobuf/compiled.js",
     "clean-module-protobuf": "rm -f ts/protobuf/compiled.d.ts ts/protobuf/compiled.js",
     "build-protobuf": "pnpm run build-module-protobuf",
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 74686820d9..94ad491f4c 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -932,19 +932,18 @@ $message-padding-horizontal: 12px;
   @include mixins.button-reset;
   & {
     @include mixins.font-body-1;
-    @include mixins.light-theme {
-      border-block-start-color: variables.$color-black-alpha-10;
-    }
-    @include mixins.dark-theme {
-      border-block-start-color: variables.$color-white-alpha-10;
-    }
-
     width: calc(100% + 24px);
     margin-block-start: 9px;
     margin-inline: -12px;
     padding-block-start: 9px;
     padding-inline: 12px;
     border-block-start: 0.5px solid;
+    @include mixins.light-theme {
+      border-block-start-color: variables.$color-black-alpha-10;
+    }
+    @include mixins.dark-theme {
+      border-block-start-color: variables.$color-white-alpha-10;
+    }
   }
 }
 
@@ -4781,11 +4780,6 @@ button.module-image__border-overlay:focus {
     opacity: 0;
     transition: all 0.5s variables.$ease-out-local-preview;
 
-    &--visible {
-      opacity: 1;
-      bottom: 4px;
-    }
-
     display: flex;
     align-items: center;
     flex-direction: row;
@@ -4794,6 +4788,11 @@ button.module-image__border-overlay:focus {
     justify-content: space-around;
     background-color: variables.$color-gray-78;
 
+    &--visible {
+      opacity: 1;
+      bottom: 4px;
+    }
+
     &__spacer {
       flex-grow: 1;
       flex-shrink: 1;
diff --git a/stylesheets/components/CriticalIdlePrimaryDeviceModal.scss b/stylesheets/components/CriticalIdlePrimaryDeviceModal.scss
index 2ef782ecc2..9dd49602c8 100644
--- a/stylesheets/components/CriticalIdlePrimaryDeviceModal.scss
+++ b/stylesheets/components/CriticalIdlePrimaryDeviceModal.scss
@@ -18,12 +18,12 @@
   &::after {
     content: '';
     display: block;
+    width: 52px;
+    height: 52px;
     @include mixins.color-svg(
       '../images/icons/v3/error/error-circle.svg',
       variables.$color-orange
     );
-    width: 52px;
-    height: 52px;
   }
 }
 
diff --git a/stylesheets/components/LowDiskSpaceBackupImportModal.scss b/stylesheets/components/LowDiskSpaceBackupImportModal.scss
index b38260ab21..86b0281a3b 100644
--- a/stylesheets/components/LowDiskSpaceBackupImportModal.scss
+++ b/stylesheets/components/LowDiskSpaceBackupImportModal.scss
@@ -21,12 +21,12 @@
   &::after {
     content: '';
     display: block;
+    width: 32px;
+    height: 32px;
     @include mixins.color-svg(
       '../images/icons/v3/backup/backup-warning.svg',
       variables.$color-black
     );
-    width: 32px;
-    height: 32px;
   }
 }
 
diff --git a/stylesheets/components/PlaybackButton.scss b/stylesheets/components/PlaybackButton.scss
index 262fa6514d..13f6915b41 100644
--- a/stylesheets/components/PlaybackButton.scss
+++ b/stylesheets/components/PlaybackButton.scss
@@ -7,9 +7,8 @@
 
 .PlaybackButton {
   @include mixins.button-reset;
-  position: relative;
-
   & {
+    position: relative;
     flex-shrink: 0;
     margin-inline-end: MessageAudio.$audio-attachment-button-margin-big;
 
diff --git a/stylesheets/components/SignalConversationMuteToggle.scss b/stylesheets/components/SignalConversationMuteToggle.scss
index e3c11e518b..dcf5774397 100644
--- a/stylesheets/components/SignalConversationMuteToggle.scss
+++ b/stylesheets/components/SignalConversationMuteToggle.scss
@@ -5,6 +5,15 @@
 @use '../variables';
 
 .SignalConversationMuteToggle {
+  height: variables.$header-height;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  font-size: 14px;
+  color: variables.$color-ultramarine-light;
+
   @include mixins.light-theme() {
     background-color: variables.$color-white;
     border-top: 0.5px solid variables.$color-black-alpha-16;
@@ -15,15 +24,6 @@
     border-top: 0.5px solid variables.$color-gray-65;
   }
 
-  height: variables.$header-height;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  font-size: 14px;
-  color: variables.$color-ultramarine-light;
-
   &__text {
     @include mixins.button-reset;
   }