chore(deps-dev): bump sass from 1.77.6 to 1.78.0 (#11736)

.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",

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);

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 {

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%;

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;
 

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));

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 {

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();
 }

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);

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,

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,18 +311,17 @@ 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);
     --place-top-cta-background: var(--place-top-cta-background-dark);
     --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;
   }

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",

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"