From 6b2cde6955926e7b0033146e470f870fc6d31deb Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Fri, 6 Sep 2024 15:20:46 +0000
Subject: [PATCH] chore(deps-dev): bump sass from 1.77.6 to 1.78.0 (#11736)

---
 .stylelintrc.json                             |  2 +-
 client/src/advertising/with_us/index.scss     |  2 +-
 client/src/community/index.scss               |  2 +-
 client/src/curriculum/landing.scss            | 16 ++++++++++------
 client/src/document/index.scss                | 10 +++++-----
 .../src/homepage/featured-articles/index.scss |  6 +++---
 client/src/plus/collections/index.scss        |  6 +++---
 client/src/ui/atoms/loading/index.scss        |  2 +-
 client/src/ui/base/_mdn.scss                  |  2 +-
 client/src/ui/base/_themes.scss               |  8 ++++----
 client/src/ui/organisms/placement/index.scss  | 19 +++++++++----------
 package.json                                  |  2 +-
 yarn.lock                                     |  8 ++++----
 13 files changed, 44 insertions(+), 41 deletions(-)

diff --git a/.stylelintrc.json b/.stylelintrc.json
index 78e5ea23cc5c..8f9ae342dc0a 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -22,6 +22,7 @@
       [
         "custom-properties",
         "dollar-variables",
+        "declarations",
         {
           "type": "at-rule",
           "name": "extend"
@@ -31,7 +32,6 @@
           "name": "include",
           "hasBlock": false
         },
-        "declarations",
         {
           "type": "at-rule",
           "name": "include",
diff --git a/client/src/advertising/with_us/index.scss b/client/src/advertising/with_us/index.scss
index 5527d8fa83da..adcc2883ae4a 100644
--- a/client/src/advertising/with_us/index.scss
+++ b/client/src/advertising/with_us/index.scss
@@ -25,10 +25,10 @@ main.advertise-with-us {
     }
 
     h1 {
-      @include mify;
       font-size: 3rem;
       margin-top: 8rem;
       text-align: center;
+      @include mify;
 
       &::before {
         background-color: var(--mdn-color-ads);
diff --git a/client/src/community/index.scss b/client/src/community/index.scss
index 0caef5661a13..ee270592c610 100644
--- a/client/src/community/index.scss
+++ b/client/src/community/index.scss
@@ -25,10 +25,10 @@ main.contribute {
     }
 
     h1 {
-      @include mify;
       font-size: 3rem;
       margin-top: 8rem;
       text-align: center;
+      @include mify;
     }
 
     .quote {
diff --git a/client/src/curriculum/landing.scss b/client/src/curriculum/landing.scss
index c229b35c9a02..41d0b50f8298 100644
--- a/client/src/curriculum/landing.scss
+++ b/client/src/curriculum/landing.scss
@@ -311,15 +311,17 @@
 
       > #stairway1-container {
         --fs: clamp(1rem, calc(3 * calc(100vw / 100)), 1.75rem);
-        @media (min-width: $screen-lg) {
-          --fs: clamp(1rem, calc(2 * calc(100vw / 100)), 1.75rem);
-        }
+
         grid-area: a;
         margin: 0;
         position: relative;
         transform: translateX(2vw);
         width: 100%;
 
+        @media (min-width: $screen-lg) {
+          --fs: clamp(1rem, calc(2 * calc(100vw / 100)), 1.75rem);
+        }
+
         #stairway1 {
           font-size: var(--fs);
           left: 32%;
@@ -341,13 +343,15 @@
 
       > #stairway2-container {
         --fs: clamp(0.75rem, calc(1.25 * calc(100vw / 100)), 1rem);
-        @media (min-width: $screen-md) {
-          --fs: clamp(0.75rem, calc(100vw / 100), 0.825rem);
-        }
+
         grid-area: b;
         position: relative;
         transform: translateX(-5vw);
 
+        @media (min-width: $screen-md) {
+          --fs: clamp(0.75rem, calc(100vw / 100), 0.825rem);
+        }
+
         #stairway2 {
           font-size: var(--fs);
           height: 100%;
diff --git a/client/src/document/index.scss b/client/src/document/index.scss
index 45fc249cd992..bcd950a33b2a 100644
--- a/client/src/document/index.scss
+++ b/client/src/document/index.scss
@@ -859,16 +859,16 @@ kbd {
   --offset: var(--sticky-header-with-actions-height);
   --max-height: calc(100vh - var(--offset));
 
-  @media (min-width: $screen-md) and (min-height: $screen-height-place-limit) {
-    display: flex;
-    flex-direction: column;
-  }
-
   max-height: var(--max-height);
   position: sticky;
   top: var(--offset);
   z-index: var(--z-index-sidebar-mobile);
 
+  @media (min-width: $screen-md) and (min-height: $screen-height-place-limit) {
+    display: flex;
+    flex-direction: column;
+  }
+
   @media (min-width: $screen-md) {
     z-index: auto;
 
diff --git a/client/src/homepage/featured-articles/index.scss b/client/src/homepage/featured-articles/index.scss
index 719ac5d470a6..6261cfeffaf6 100644
--- a/client/src/homepage/featured-articles/index.scss
+++ b/client/src/homepage/featured-articles/index.scss
@@ -65,14 +65,14 @@
     }
 
     p {
+      font: var(--type-smaller-font-size);
+      line-height: var(--base-line-height);
+      margin: 0;
       @include line-clamp(
         3,
         var(--base-line-height),
         var(--background-primary)
       );
-      font: var(--type-smaller-font-size);
-      line-height: var(--base-line-height);
-      margin: 0;
 
       @media (min-width: $screen-md) {
         min-height: calc(3em * var(--base-line-height));
diff --git a/client/src/plus/collections/index.scss b/client/src/plus/collections/index.scss
index 95190d1cd93d..f51f5fba148d 100644
--- a/client/src/plus/collections/index.scss
+++ b/client/src/plus/collections/index.scss
@@ -75,14 +75,14 @@
     }
 
     p {
+      margin: 0;
+      overflow-wrap: anywhere;
+      white-space: pre-wrap;
       @include line-clamp(
         4,
         var(--font-content-line-height),
         var(--background-primary)
       );
-      margin: 0;
-      overflow-wrap: anywhere;
-      white-space: pre-wrap;
     }
 
     footer {
diff --git a/client/src/ui/atoms/loading/index.scss b/client/src/ui/atoms/loading/index.scss
index 0a7e2344f3f9..a9a32f98e2c1 100644
--- a/client/src/ui/atoms/loading/index.scss
+++ b/client/src/ui/atoms/loading/index.scss
@@ -1,11 +1,11 @@
 @use "~@mdn/minimalist/sass/mixins/animation" as *;
 
 .generic-loading {
-  @include slow-pulse();
   align-items: center;
   /* add short delay so the animation starts from white instead of dark gray */
   animation-delay: 1s;
   display: flex;
   justify-content: center;
   width: 100%;
+  @include slow-pulse();
 }
diff --git a/client/src/ui/base/_mdn.scss b/client/src/ui/base/_mdn.scss
index 2e45685a2c3c..feb79835f944 100644
--- a/client/src/ui/base/_mdn.scss
+++ b/client/src/ui/base/_mdn.scss
@@ -9,8 +9,8 @@
 }
 
 @mixin mify {
-  @include uify;
   margin-left: 0.5rem;
+  @include uify;
 
   &::before {
     background-color: var(--text-link);
diff --git a/client/src/ui/base/_themes.scss b/client/src/ui/base/_themes.scss
index 3a4a6cd74bc1..3eecc80c6c63 100644
--- a/client/src/ui/base/_themes.scss
+++ b/client/src/ui/base/_themes.scss
@@ -306,14 +306,14 @@
   --curriculum-scrim-bg: url("../../assets/curriculum-scrim-bg.svg#light");
   --curriculum-landing-arrow: url("../../assets/curriculum-landing-arrow.svg#light");
 
+  color-scheme: light;
+
   @media (min-width: $screen-md) {
     --curriculum-landing-started-beginner: url("../../assets/icons/curriculum-landing-started-beginner.svg#light");
     --curriculum-landing-started-advanced: url("../../assets/icons/curriculum-landing-started-advanced.svg#light");
     --curriculum-landing-started-employment: url("../../assets/icons/curriculum-landing-started-employment.svg#light");
     --curriculum-landing-started-educator: url("../../assets/icons/curriculum-landing-started-educator.svg#light");
   }
-
-  color-scheme: light;
 }
 
 @mixin dark-theme {
@@ -621,14 +621,14 @@
   --curriculum-scrim-bg: url("../../assets/curriculum-scrim-bg.svg#dark");
   --curriculum-landing-arrow: url("../../assets/curriculum-landing-arrow.svg#dark");
 
+  color-scheme: dark;
+
   @media (min-width: $screen-md) {
     --curriculum-landing-started-beginner: url("../../assets/icons/curriculum-landing-started-beginner.svg#dark");
     --curriculum-landing-started-advanced: url("../../assets/icons/curriculum-landing-started-advanced.svg#dark");
     --curriculum-landing-started-employment: url("../../assets/icons/curriculum-landing-started-employment.svg#dark");
     --curriculum-landing-started-educator: url("../../assets/icons/curriculum-landing-started-educator.svg#dark");
   }
-
-  color-scheme: dark;
 }
 
 body,
diff --git a/client/src/ui/organisms/placement/index.scss b/client/src/ui/organisms/placement/index.scss
index 773fd20adf20..3ebdfa10ea50 100644
--- a/client/src/ui/organisms/placement/index.scss
+++ b/client/src/ui/organisms/placement/index.scss
@@ -20,11 +20,6 @@ section.place {
     --place-new-side-background: var(--place-new-side-background-light);
     --place-new-side-color: var(--place-new-side-color-light);
 
-    @media (prefers-color-scheme: dark) {
-      --place-new-side-background: var(--place-new-side-background-dark);
-      --place-new-side-color: var(--place-new-side-color-dark);
-    }
-
     --border-radius: 0.5rem;
     border: 1px solid var(--border-primary);
     border-radius: var(--border-radius);
@@ -35,6 +30,11 @@ section.place {
     position: relative;
     width: 11rem;
 
+    @media (prefers-color-scheme: dark) {
+      --place-new-side-background: var(--place-new-side-background-dark);
+      --place-new-side-color: var(--place-new-side-color-dark);
+    }
+
     .pong-note {
       background-color: var(--place-new-side-color);
       border: 1px solid var(--place-new-side-background);
@@ -311,6 +311,10 @@ section.place.hp-main {
   --place-top-cta-background: var(--place-top-cta-background-light);
   --place-top-cta-color: var(--place-top-cta-color-light);
 
+  background-color: var(--place-top-background);
+  border-bottom: 1px solid var(--border-primary);
+  height: var(--top-banner-height);
+
   @media (prefers-color-scheme: dark) {
     --place-top-background: var(--place-top-background-dark);
     --place-top-color: var(--place-top-color-dark);
@@ -318,11 +322,6 @@ section.place.hp-main {
     --place-top-cta-color: var(--place-top-cta-color-dark);
   }
 
-  background-color: var(--place-top-background);
-
-  border-bottom: 1px solid var(--border-primary);
-  height: var(--top-banner-height);
-
   &.fallback {
     position: initial;
   }
diff --git a/package.json b/package.json
index 2ebcdd872692..1f92fbb51769 100644
--- a/package.json
+++ b/package.json
@@ -236,7 +236,7 @@
     "resolve": "^1.22.8",
     "resolve-url-loader": "^5.0.0",
     "rough-notation": "^0.5.1",
-    "sass": "^1.77.6",
+    "sass": "^1.78.0",
     "sass-loader": "^15.0.0",
     "source-map-explorer": "^2.5.3",
     "source-map-loader": "^5.0.0",
diff --git a/yarn.lock b/yarn.lock
index 8ef7bf3440ea..35a19c505469 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13918,10 +13918,10 @@ sass-loader@^15.0.0:
   dependencies:
     neo-async "^2.6.2"
 
-sass@^1.77.6:
-  version "1.77.6"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.77.6.tgz#898845c1348078c2e6d1b64f9ee06b3f8bd489e4"
-  integrity sha512-ByXE1oLD79GVq9Ht1PeHWCPMPB8XHpBuz1r85oByKHjZY6qV6rWnQovQzXJXuQ/XyE1Oj3iPk3lo28uzaRA2/Q==
+sass@^1.78.0:
+  version "1.78.0"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.78.0.tgz#cef369b2f9dc21ea1d2cf22c979f52365da60841"
+  integrity sha512-AaIqGSrjo5lA2Yg7RvFZrlXDBCp3nV4XP73GrLGvdRWWwk+8H3l0SDvq/5bA4eF+0RFPLuWUk3E+P1U/YqnpsQ==
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
     immutable "^4.0.0"