From 42260b2dc47539c000ee050249791cca7a346bb6 Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Mon, 6 May 2024 21:10:14 +0000
Subject: [PATCH 1/5] [pre-commit.ci] pre-commit autoupdate
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

updates:
- [github.com/pre-commit/pre-commit-hooks: v4.5.0 → v4.6.0](https://github.com/pre-commit/pre-commit-hooks/compare/v4.5.0...v4.6.0)
- [github.com/pre-commit/mirrors-prettier: v3.1.0 → v4.0.0-alpha.8](https://github.com/pre-commit/mirrors-prettier/compare/v3.1.0...v4.0.0-alpha.8)
- [github.com/thibaudcolas/pre-commit-stylelint: v16.3.1 → v16.5.0](https://github.com/thibaudcolas/pre-commit-stylelint/compare/v16.3.1...v16.5.0)
- [github.com/rubocop/rubocop: v1.62.1 → v1.63.4](https://github.com/rubocop/rubocop/compare/v1.62.1...v1.63.4)
---
 .pre-commit-config.yaml | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 0f8133e52e..50502f3fb4 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -1,6 +1,6 @@
 repos:
   -   repo: https://github.com/pre-commit/pre-commit-hooks
-      rev: v4.5.0
+      rev: v4.6.0
       hooks:
         -   id: check-yaml
             exclude: |
@@ -10,12 +10,12 @@ repos:
         -   id: end-of-file-fixer
         -   id: trailing-whitespace
   -   repo: https://github.com/pre-commit/mirrors-prettier
-      rev: v3.1.0
+      rev: v4.0.0-alpha.8
       hooks:
         - id: prettier
           types_or: [javascript, jsx, css, scss, html]
   -   repo: https://github.com/thibaudcolas/pre-commit-stylelint
-      rev: v16.3.1
+      rev: v16.5.0
       hooks:
         - id: stylelint
           additional_dependencies: [
@@ -32,7 +32,7 @@ repos:
               app/assets/stylesheets/common/_reset.scss
             )$
   - repo: https://github.com/rubocop/rubocop
-    rev: v1.62.1
+    rev: v1.63.4
     hooks:
       - id: rubocop
         args: ["--autocorrect"]

From 61d167dd70e5afc8829815195463a579bf85f144 Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Mon, 6 May 2024 21:11:43 +0000
Subject: [PATCH 2/5] [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci
---
 app/assets/stylesheets/clickable.scss         |  2 +-
 .../stylesheets/common/SyntaxHighlighter.scss |  4 +-
 app/assets/stylesheets/common/_constants.scss |  4 +-
 app/assets/stylesheets/common/_courses.scss   |  2 +-
 .../stylesheets/common/_criteria_filter.scss  |  2 +-
 .../stylesheets/common/_filter_modal.scss     |  6 +--
 .../common/_filter_modal_dropdown.scss        |  2 +-
 app/assets/stylesheets/common/_icons.scss     |  4 +-
 app/assets/stylesheets/common/_login.scss     | 20 +++----
 app/assets/stylesheets/common/_markus.scss    | 52 +++++++++----------
 app/assets/stylesheets/common/_mixins.scss    | 10 ++--
 app/assets/stylesheets/common/_modals.scss    |  2 +-
 .../common/_multi_select_dropdown.scss        |  4 +-
 .../stylesheets/common/_navigation.scss       | 14 ++---
 .../common/_react_json_schema_form.scss       | 18 +++----
 .../stylesheets/common/_react_tabs.scss       |  2 +-
 app/assets/stylesheets/common/_reset.scss     | 16 +++---
 .../common/_single_select_dropdown.scss       |  4 +-
 app/assets/stylesheets/common/core.scss       | 20 +++----
 .../common/jupyterlab-markus-custom.scss      |  2 +-
 app/assets/stylesheets/context_menu.scss      |  2 +-
 app/assets/stylesheets/fonts.scss             |  8 +--
 app/assets/stylesheets/grader.scss            |  6 +--
 23 files changed, 103 insertions(+), 103 deletions(-)

diff --git a/app/assets/stylesheets/clickable.scss b/app/assets/stylesheets/clickable.scss
index f3c1be9b0f..e1cfbbbd59 100644
--- a/app/assets/stylesheets/clickable.scss
+++ b/app/assets/stylesheets/clickable.scss
@@ -1,4 +1,4 @@
-@import 'common/constants';
+@import "common/constants";
 
 .clickable_links {
   margin-left: 10px;
diff --git a/app/assets/stylesheets/common/SyntaxHighlighter.scss b/app/assets/stylesheets/common/SyntaxHighlighter.scss
index 2c70bc1b00..6eea31d836 100644
--- a/app/assets/stylesheets/common/SyntaxHighlighter.scss
+++ b/app/assets/stylesheets/common/SyntaxHighlighter.scss
@@ -1,5 +1,5 @@
-@import 'mixins';
-@import 'constants';
+@import "mixins";
+@import "constants";
 
 .dp-highlighter {
   display: flex;
diff --git a/app/assets/stylesheets/common/_constants.scss b/app/assets/stylesheets/common/_constants.scss
index 7082487c38..fe7b50d700 100644
--- a/app/assets/stylesheets/common/_constants.scss
+++ b/app/assets/stylesheets/common/_constants.scss
@@ -61,8 +61,8 @@ $sharp-line: var(--sharp_line);
 // not sure what this does...
 $darker-orange: var(--darker-orange);
 
-$fonts: 'Open Sans', 'Lucida Grande', Verdana, Arial, sans-serif;
-$mono-fonts: 'Consolas', 'Courier New', Courier, mono, serif;
+$fonts: "Open Sans", "Lucida Grande", Verdana, Arial, sans-serif;
+$mono-fonts: "Consolas", "Courier New", Courier, mono, serif;
 $radius: var(--radius);
 $time-quick: 0.25s;
 $time-medium: 0.35s;
diff --git a/app/assets/stylesheets/common/_courses.scss b/app/assets/stylesheets/common/_courses.scss
index 5016b60171..f78e4d9d46 100644
--- a/app/assets/stylesheets/common/_courses.scss
+++ b/app/assets/stylesheets/common/_courses.scss
@@ -97,7 +97,7 @@
   #selector-or::after {
     border-bottom: 1px solid;
     border-color: $gridline;
-    content: '';
+    content: "";
     flex: 1 1;
     margin: auto;
   }
diff --git a/app/assets/stylesheets/common/_criteria_filter.scss b/app/assets/stylesheets/common/_criteria_filter.scss
index 3c20280aca..4657db008a 100644
--- a/app/assets/stylesheets/common/_criteria_filter.scss
+++ b/app/assets/stylesheets/common/_criteria_filter.scss
@@ -1,4 +1,4 @@
-@import 'constants';
+@import "constants";
 
 .criteria-filter {
   border-left: $disabled-area solid 1.5px;
diff --git a/app/assets/stylesheets/common/_filter_modal.scss b/app/assets/stylesheets/common/_filter_modal.scss
index 29d6902a84..f71eec3d68 100644
--- a/app/assets/stylesheets/common/_filter_modal.scss
+++ b/app/assets/stylesheets/common/_filter_modal.scss
@@ -1,4 +1,4 @@
-@import 'constants';
+@import "constants";
 
 .filter-modal {
   .filter-modal-title {
@@ -12,7 +12,7 @@
   .annotation-input {
     margin: 5px;
 
-    input[type='text'] {
+    input[type="text"] {
       height: 30px;
       width: $dropdown-horizontal;
     }
@@ -36,7 +36,7 @@
       margin-right: 10px;
     }
 
-    input[type='number'] {
+    input[type="number"] {
       width: 80px;
     }
 
diff --git a/app/assets/stylesheets/common/_filter_modal_dropdown.scss b/app/assets/stylesheets/common/_filter_modal_dropdown.scss
index 8e5672d6ac..3d4cce6a61 100644
--- a/app/assets/stylesheets/common/_filter_modal_dropdown.scss
+++ b/app/assets/stylesheets/common/_filter_modal_dropdown.scss
@@ -1,4 +1,4 @@
-@import 'constants';
+@import "constants";
 
 @mixin filter-modal-dropdown {
   height: 30px;
diff --git a/app/assets/stylesheets/common/_icons.scss b/app/assets/stylesheets/common/_icons.scss
index c2776a6ede..11408bbf26 100644
--- a/app/assets/stylesheets/common/_icons.scss
+++ b/app/assets/stylesheets/common/_icons.scss
@@ -8,7 +8,7 @@
 
 button > .svg-inline--fa,
 .button > .svg-inline--fa,
-a[role='button'] > .svg-inline--fa {
+a[role="button"] > .svg-inline--fa {
   padding-right: 5px;
   vertical-align: baseline;
 
@@ -23,7 +23,7 @@ a[role='button'] > .svg-inline--fa {
 
 button > .fa-layers,
 .button > .fa-layers,
-a[role='button'] > .fa-layers {
+a[role="button"] > .fa-layers {
   margin-right: 5px;
   vertical-align: baseline;
 
diff --git a/app/assets/stylesheets/common/_login.scss b/app/assets/stylesheets/common/_login.scss
index 91279bd2ca..bef3a88fc7 100644
--- a/app/assets/stylesheets/common/_login.scss
+++ b/app/assets/stylesheets/common/_login.scss
@@ -1,5 +1,5 @@
-@import 'mixins';
-@import 'constants';
+@import "mixins";
+@import "constants";
 /**
  * Login screen
  */
@@ -29,14 +29,14 @@
     margin: 20px auto 0;
     width: 80%;
 
-    input[type='text'],
-    input[type='password'],
-    input[type='submit'] {
+    input[type="text"],
+    input[type="password"],
+    input[type="submit"] {
       width: 100%;
     }
 
-    input[type='text'],
-    input[type='password'] {
+    input[type="text"],
+    input[type="password"] {
       margin: 0.5em 0;
       padding: 1em;
     }
@@ -44,7 +44,7 @@
     .submit {
       margin: 15px 0 25px;
 
-      input[type='submit'] {
+      input[type="submit"] {
         margin: 0.5em 0;
         padding: 10px;
       }
@@ -70,7 +70,7 @@
     #login-or::after {
       border-bottom: 1px solid;
       border-color: $gridline;
-      content: '';
+      content: "";
       flex: 1 1;
       margin: auto;
     }
@@ -92,7 +92,7 @@
   }
 
   .login-image {
-    background: transparent asset-url('markus_logo.svg') no-repeat center center / contain;
+    background: transparent asset-url("markus_logo.svg") no-repeat center center / contain;
     height: 115px;
     margin: 0 auto;
     width: 220px;
diff --git a/app/assets/stylesheets/common/_markus.scss b/app/assets/stylesheets/common/_markus.scss
index 8de45a1841..fde0fe4d51 100644
--- a/app/assets/stylesheets/common/_markus.scss
+++ b/app/assets/stylesheets/common/_markus.scss
@@ -1,24 +1,24 @@
 @charset "UTF-8";
 
-@import 'reset';
-@import 'constants';
-@import 'columns';
-@import 'file_viewer';
-@import 'login';
-@import 'mixins';
-@import 'modals';
-@import 'notes_dialog';
-@import 'annotations_dialog';
-@import 'icons';
-@import 'react_json_schema_form';
-@import 'react_tabs';
-@import 'courses';
-@import 'url_viewer';
-@import 'statistics';
-@import 'criteria_filter';
-@import 'multi_select_dropdown';
-@import 'single_select_dropdown';
-@import 'filter_modal';
+@import "reset";
+@import "constants";
+@import "columns";
+@import "file_viewer";
+@import "login";
+@import "mixins";
+@import "modals";
+@import "notes_dialog";
+@import "annotations_dialog";
+@import "icons";
+@import "react_json_schema_form";
+@import "react_tabs";
+@import "courses";
+@import "url_viewer";
+@import "statistics";
+@import "criteria_filter";
+@import "multi_select_dropdown";
+@import "single_select_dropdown";
+@import "filter_modal";
 
 /** Main */
 
@@ -210,7 +210,7 @@ textarea {
     background-color: $light-success;
   }
 
-  &[type='number'] {
+  &[type="number"] {
     width: 5em;
 
     &.fixed-width {
@@ -244,9 +244,9 @@ select[multiple] {
 
 /** Buttons */
 
-input[type='button'],
-input[type='submit'],
-input[type='reset'],
+input[type="button"],
+input[type="submit"],
+input[type="reset"],
 button,
 .button {
   background: linear-gradient(to bottom, $background-main, $background-support);
@@ -389,7 +389,7 @@ fieldset {
     line-height: 1.8em;
   }
 
-  > input[type='checkbox'] {
+  > input[type="checkbox"] {
     margin-top: 0.2em;
   }
 }
@@ -1106,7 +1106,7 @@ nav {
     border: transparent solid 5px;
     border-left-color: $primary-one;
     border-right-width: 0;
-    content: ' ';
+    content: " ";
     float: right;
     margin-left: 10px;
     margin-top: 3px;
@@ -1331,7 +1331,7 @@ nav {
 
 // Styling for grade entry form inputs
 .grade-input {
-  > input[type='number'] {
+  > input[type="number"] {
     appearance: textfield;
     border-width: 0;
     height: calc(100% + 2px);
diff --git a/app/assets/stylesheets/common/_mixins.scss b/app/assets/stylesheets/common/_mixins.scss
index b9111cfe9e..fd35933dcf 100644
--- a/app/assets/stylesheets/common/_mixins.scss
+++ b/app/assets/stylesheets/common/_mixins.scss
@@ -1,19 +1,19 @@
 /** For easier size breakpoints. */
 
 $breakpoints: (
-  'tiny': (
+  "tiny": (
     max-width: 360px,
   ),
-  'small': (
+  "small": (
     max-width: 500px,
   ),
-  'mobile': (
+  "mobile": (
     max-width: 745px,
   ),
-  'medium': (
+  "medium": (
     max-width: 990px,
   ),
-  'large': (
+  "large": (
     max-width: 1040px,
   ),
 );
diff --git a/app/assets/stylesheets/common/_modals.scss b/app/assets/stylesheets/common/_modals.scss
index 93781005c7..3565a5bdba 100644
--- a/app/assets/stylesheets/common/_modals.scss
+++ b/app/assets/stylesheets/common/_modals.scss
@@ -1,4 +1,4 @@
-@import 'constants';
+@import "constants";
 
 .react-modal {
   background: $background-main;
diff --git a/app/assets/stylesheets/common/_multi_select_dropdown.scss b/app/assets/stylesheets/common/_multi_select_dropdown.scss
index 9f8a78f199..3c5bf1fea4 100644
--- a/app/assets/stylesheets/common/_multi_select_dropdown.scss
+++ b/app/assets/stylesheets/common/_multi_select_dropdown.scss
@@ -1,5 +1,5 @@
-@import 'constants';
-@import 'filter_modal_dropdown';
+@import "constants";
+@import "filter_modal_dropdown";
 
 .dropdown.multi-select-dropdown {
   @include filter-modal-dropdown;
diff --git a/app/assets/stylesheets/common/_navigation.scss b/app/assets/stylesheets/common/_navigation.scss
index e2c1ce7529..b52b5a866c 100644
--- a/app/assets/stylesheets/common/_navigation.scss
+++ b/app/assets/stylesheets/common/_navigation.scss
@@ -1,7 +1,7 @@
 /**
  * Header, main menu, sub menu, and sub_sub menu.
  */
-@import 'constants';
+@import "constants";
 
 /* Header */
 
@@ -58,7 +58,7 @@ nav {
 }
 
 #logo-img {
-  background: transparent asset-url('markus_logo.svg') no-repeat center center / 90px 30px;
+  background: transparent asset-url("markus_logo.svg") no-repeat center center / 90px 30px;
   margin-right: $dimen-horizontal-nav;
   min-height: 38px;
   width: 90px;
@@ -70,11 +70,11 @@ nav {
 
 .color-dark {
   #logo-img {
-    background-image: asset-url('markus_logo_dark.svg');
+    background-image: asset-url("markus_logo_dark.svg");
   }
 
   #mobile_menu {
-    background-image: asset-url('markus_logo_dark.svg');
+    background-image: asset-url("markus_logo_dark.svg");
   }
 }
 
@@ -104,7 +104,7 @@ nav {
 
     &::after {
       animation: ellipsis $time-quick infinite;
-      content: '\2026';
+      content: "\2026";
       display: inline-block;
       overflow: hidden;
       vertical-align: bottom;
@@ -131,7 +131,7 @@ nav {
 }
 
 #mobile_menu {
-  background: $background-support asset-url('markus_logo.svg') no-repeat center center / 90px 30px;
+  background: $background-support asset-url("markus_logo.svg") no-repeat center center / 90px 30px;
   border-bottom: 1px solid $primary-three;
   display: none;
   height: 3.5em;
@@ -153,7 +153,7 @@ nav {
 
     &::before,
     &::after {
-      content: '';
+      content: "";
       left: 1em;
       position: absolute;
       transition: all $time-quick;
diff --git a/app/assets/stylesheets/common/_react_json_schema_form.scss b/app/assets/stylesheets/common/_react_json_schema_form.scss
index b72e78d7ca..1442d23b4d 100644
--- a/app/assets/stylesheets/common/_react_json_schema_form.scss
+++ b/app/assets/stylesheets/common/_react_json_schema_form.scss
@@ -77,12 +77,12 @@
     text-align: right;
   }
 
-  label[for*='tester_type'] {
+  label[for*="tester_type"] {
     font-size: 1.4em;
     min-width: max-content;
   }
 
-  select[id*='tester_type'] {
+  select[id*="tester_type"] {
     font-size: 1.4em;
   }
 
@@ -97,7 +97,7 @@
     padding: 0.25em;
   }
 
-  input[type='checkbox'] {
+  input[type="checkbox"] {
     float: right;
   }
 
@@ -108,11 +108,11 @@
   .form-control {
     min-width: 75pt;
 
-    &[type='text'] {
+    &[type="text"] {
       min-width: 150pt;
     }
 
-    &[multiple=''] {
+    &[multiple=""] {
       vertical-align: middle;
     }
   }
@@ -132,19 +132,19 @@
   }
 
   /* stylelint-disable property-no-vendor-prefix */
-  input[type='number']::-webkit-outer-spin-button,
-  input[type='number']::-webkit-inner-spin-button {
+  input[type="number"]::-webkit-outer-spin-button,
+  input[type="number"]::-webkit-inner-spin-button {
     -webkit-appearance: none;
     margin: 0;
   }
   /* stylelint-enable property-no-vendor-prefix */
 
-  input[type='number'] {
+  input[type="number"] {
     appearance: textfield;
   }
 
   // Hide specific legends
-  fieldset > legend[id$='extra_info__title'],
+  fieldset > legend[id$="extra_info__title"],
   #root_testers__title {
     display: none;
   }
diff --git a/app/assets/stylesheets/common/_react_tabs.scss b/app/assets/stylesheets/common/_react_tabs.scss
index c115835d29..5f3cbc32f3 100644
--- a/app/assets/stylesheets/common/_react_tabs.scss
+++ b/app/assets/stylesheets/common/_react_tabs.scss
@@ -1,4 +1,4 @@
-@import 'constants';
+@import "constants";
 
 .react-tabs__tab--disabled {
   display: none;
diff --git a/app/assets/stylesheets/common/_reset.scss b/app/assets/stylesheets/common/_reset.scss
index 4c41bcf4a2..08b783e5e2 100644
--- a/app/assets/stylesheets/common/_reset.scss
+++ b/app/assets/stylesheets/common/_reset.scss
@@ -3,7 +3,7 @@
 /* ==========================================================================
    HTML5 display definitions
    ========================================================================== */
-@import 'constants';
+@import "constants";
 /*
  * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3.
  */
@@ -230,7 +230,7 @@ kbd,
 pre,
 samp {
   font-family: monospace, serif;
-  _font-family: 'courier new', monospace;
+  _font-family: "courier new", monospace;
   font-size: 1em;
 }
 
@@ -258,7 +258,7 @@ q {
 
 q::before,
 q::after {
-  content: '';
+  content: "";
   content: none;
 }
 
@@ -445,8 +445,8 @@ input[disabled] {
  * Known issue: excess padding remains in IE 6.
  */
 
-input[type='checkbox'],
-input[type='radio'] {
+input[type="checkbox"],
+input[type="radio"] {
   box-sizing: border-box; /* 1 */
   padding: 0; /* 2 */
   *height: 13px; /* 3 */
@@ -461,7 +461,7 @@ input[type='radio'] {
  * (include `-moz` to future-proof).
  */
 
-input[type='search'] {
+input[type="search"] {
   -webkit-appearance: textfield; /* 1 */
   -moz-box-sizing: content-box;
   -webkit-box-sizing: content-box; /* 2 */
@@ -473,8 +473,8 @@ input[type='search'] {
  * on OS X.
  */
 
-input[type='search']::-webkit-search-cancel-button,
-input[type='search']::-webkit-search-decoration {
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
diff --git a/app/assets/stylesheets/common/_single_select_dropdown.scss b/app/assets/stylesheets/common/_single_select_dropdown.scss
index 90422e23d4..3e2f7cc75e 100644
--- a/app/assets/stylesheets/common/_single_select_dropdown.scss
+++ b/app/assets/stylesheets/common/_single_select_dropdown.scss
@@ -1,5 +1,5 @@
-@import 'constants';
-@import 'filter_modal_dropdown';
+@import "constants";
+@import "filter_modal_dropdown";
 
 .dropdown.single-select-dropdown {
   @include filter-modal-dropdown;
diff --git a/app/assets/stylesheets/common/core.scss b/app/assets/stylesheets/common/core.scss
index 02a614c83d..cbd31da360 100644
--- a/app/assets/stylesheets/common/core.scss
+++ b/app/assets/stylesheets/common/core.scss
@@ -1,7 +1,7 @@
-@import 'markus';
-@import 'constants';
-@import 'navigation';
-@import '../../../../node_modules/@fortawesome/fontawesome-svg-core/styles';
+@import "markus";
+@import "constants";
+@import "navigation";
+@import "../../../../node_modules/@fortawesome/fontawesome-svg-core/styles";
 
 #about_dialog {
   max-height: 75%;
@@ -34,8 +34,8 @@
 }
 
 #role_switch_dialog {
-  input[type='text'],
-  input[type='password'] {
+  input[type="text"],
+  input[type="password"] {
     margin-top: 1em;
     padding: 0.5em 0.75em;
     width: 100%;
@@ -58,7 +58,7 @@ textarea {
   width: auto;
 }
 
-input[type='radio'] {
+input[type="radio"] {
   max-width: 30px;
   min-width: 30px;
 }
@@ -70,7 +70,7 @@ input[type='radio'] {
 label.required::after,
 th.required::after {
   color: $severe-error;
-  content: '*';
+  content: "*";
 }
 
 .hidden {
@@ -125,7 +125,7 @@ th.required::after {
     font-weight: normal;
 
     &::before {
-      content: '|';
+      content: "|";
     }
   }
 
@@ -462,7 +462,7 @@ th.required::after {
   overflow: auto;
 }
 
-div.rendered-react-keyed-file-browser div.action-bar input[type='search'] {
+div.rendered-react-keyed-file-browser div.action-bar input[type="search"] {
   width: 100%;
 }
 
diff --git a/app/assets/stylesheets/common/jupyterlab-markus-custom.scss b/app/assets/stylesheets/common/jupyterlab-markus-custom.scss
index 1fca305d84..7fb664ef62 100644
--- a/app/assets/stylesheets/common/jupyterlab-markus-custom.scss
+++ b/app/assets/stylesheets/common/jupyterlab-markus-custom.scss
@@ -1,5 +1,5 @@
 /* MarkUs custom styling */
-@import 'constants';
+@import "constants";
 
 .markus-annotation {
   background-color: $light-alert;
diff --git a/app/assets/stylesheets/context_menu.scss b/app/assets/stylesheets/context_menu.scss
index cb43b8d62f..8eccaf985a 100644
--- a/app/assets/stylesheets/context_menu.scss
+++ b/app/assets/stylesheets/context_menu.scss
@@ -1,4 +1,4 @@
-@import 'common/core';
+@import "common/core";
 
 .ui-menu {
   background: $background-main;
diff --git a/app/assets/stylesheets/fonts.scss b/app/assets/stylesheets/fonts.scss
index 721080dd9d..3b6f219e06 100644
--- a/app/assets/stylesheets/fonts.scss
+++ b/app/assets/stylesheets/fonts.scss
@@ -1,14 +1,14 @@
 /* Fonts */
 @font-face {
-  font-family: 'Open Sans';
+  font-family: "Open Sans";
   font-style: normal;
   font-weight: 100 1000;
-  src: asset-url('fonts/OpenSans-VariableFont_wdth,wght.woff2') format('woff2-variations');
+  src: asset-url("fonts/OpenSans-VariableFont_wdth,wght.woff2") format("woff2-variations");
 }
 
 @font-face {
-  font-family: 'Open Sans';
+  font-family: "Open Sans";
   font-style: italic;
   font-weight: 100 1000;
-  src: asset-url('fonts/OpenSans-Italic-VariableFont_wdth,wght.woff2') format('woff2-variations');
+  src: asset-url("fonts/OpenSans-Italic-VariableFont_wdth,wght.woff2") format("woff2-variations");
 }
diff --git a/app/assets/stylesheets/grader.scss b/app/assets/stylesheets/grader.scss
index f3e1b58107..db273aab62 100644
--- a/app/assets/stylesheets/grader.scss
+++ b/app/assets/stylesheets/grader.scss
@@ -1,4 +1,4 @@
-@import 'common/core';
+@import "common/core";
 
 /* Peer Review Styles */
 
@@ -180,7 +180,7 @@
   padding-right: 10px;
   text-align: right;
 
-  input[type='text'] {
+  input[type="text"] {
     font-weight: bold;
     padding-right: 0.5em;
     text-align: right;
@@ -205,7 +205,7 @@
     padding-right: 0.5em;
   }
 
-  input[type='radio'] {
+  input[type="radio"] {
     max-width: 20px;
     min-width: 20px;
   }

From 30cec9c4a2a710beb2cb9fc359c65ccea16bc69f Mon Sep 17 00:00:00 2001
From: David Liu <david@cs.toronto.edu>
Date: Sat, 11 May 2024 17:08:39 -0400
Subject: [PATCH 3/5] pre-commit fixes

---
 .pre-commit-config.yaml                         |  2 +-
 app/assets/stylesheets/common/_mixins.scss      | 17 ++++++++++-------
 app/controllers/assignments_controller.rb       | 13 ++++++-------
 app/models/course.rb                            | 15 +++++++--------
 app/models/grade_entry_form.rb                  |  5 ++---
 spec/controllers/assignments_controller_spec.rb |  5 ++---
 spec/factories/grade_entry_forms.rb             |  9 ++++-----
 spec/models/annotation_category_spec.rb         |  5 +----
 8 files changed, 33 insertions(+), 38 deletions(-)

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 50502f3fb4..f2bcda4139 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -10,7 +10,7 @@ repos:
         -   id: end-of-file-fixer
         -   id: trailing-whitespace
   -   repo: https://github.com/pre-commit/mirrors-prettier
-      rev: v4.0.0-alpha.8
+      rev: v3.1.0
       hooks:
         - id: prettier
           types_or: [javascript, jsx, css, scss, html]
diff --git a/app/assets/stylesheets/common/_mixins.scss b/app/assets/stylesheets/common/_mixins.scss
index fd35933dcf..d61c02f2fe 100644
--- a/app/assets/stylesheets/common/_mixins.scss
+++ b/app/assets/stylesheets/common/_mixins.scss
@@ -1,26 +1,29 @@
+@use 'sass:map';
+@use 'sass:meta';
+
 /** For easier size breakpoints. */
 
 $breakpoints: (
-  "tiny": (
+  'tiny': (
     max-width: 360px,
   ),
-  "small": (
+  'small': (
     max-width: 500px,
   ),
-  "mobile": (
+  'mobile': (
     max-width: 745px,
   ),
-  "medium": (
+  'medium': (
     max-width: 990px,
   ),
-  "large": (
+  'large': (
     max-width: 1040px,
   ),
 );
 
 @mixin breakpoint($name) {
-  @if map-has-key($breakpoints, $name) {
-    @media #{inspect(map-get($breakpoints, $name))} {
+  @if map.has-key($breakpoints, $name) {
+    @media #{meta.inspect(map.get($breakpoints, $name))} {
       @content;
     }
   } @else {
diff --git a/app/controllers/assignments_controller.rb b/app/controllers/assignments_controller.rb
index 7b448f2fbe..ae4159555d 100644
--- a/app/controllers/assignments_controller.rb
+++ b/app/controllers/assignments_controller.rb
@@ -431,13 +431,12 @@ def populate_starter_file_manager
       flash_message(:warning,
                     I18n.t('assignments.starter_file.groupings_exist_warning_html'))
     end
-    file_data = []
-    assignment.starter_file_groups.order(:id).each do |g|
-      file_data << { id: g.id,
-                     name: g.name,
-                     entry_rename: g.entry_rename,
-                     use_rename: g.use_rename,
-                     files: starter_file_group_file_data(g) }
+    file_data = assignment.starter_file_groups.order(:id).map do |g|
+      { id: g.id,
+        name: g.name,
+        entry_rename: g.entry_rename,
+        use_rename: g.use_rename,
+        files: starter_file_group_file_data(g) }
     end
     section_data = current_course.sections
                                  .left_outer_joins(:starter_file_groups)
diff --git a/app/models/course.rb b/app/models/course.rb
index 6bc9550214..2bf95f91fc 100644
--- a/app/models/course.rb
+++ b/app/models/course.rb
@@ -126,15 +126,14 @@ def export_student_data_csv
   end
 
   def export_student_data_yml
-    output = []
     students = self.students.joins(:user).order('users.user_name').includes(:section)
-    students.each do |student|
-      output.push(user_name: student.user_name,
-                  last_name: student.last_name,
-                  first_name: student.first_name,
-                  email: student.email,
-                  id_number: student.id_number,
-                  section_name: student.section&.name)
+    output = students.map do |student|
+      { user_name: student.user_name,
+        last_name: student.last_name,
+        first_name: student.first_name,
+        email: student.email,
+        id_number: student.id_number,
+        section_name: student.section&.name }
     end
     output.to_yaml
   end
diff --git a/app/models/grade_entry_form.rb b/app/models/grade_entry_form.rb
index 7eae5d108c..4a8bbad4dd 100644
--- a/app/models/grade_entry_form.rb
+++ b/app/models/grade_entry_form.rb
@@ -77,9 +77,8 @@ def count_non_nil
 
   # Create grade_entry_student for each student in the course
   def create_all_grade_entry_students
-    new_data = []
-    course.students.each do |student|
-      new_data << { role_id: student.id, assessment_id: id, released_to_student: false }
+    new_data = course.students.map do |student|
+      { role_id: student.id, assessment_id: id, released_to_student: false }
     end
     GradeEntryStudent.insert_all(new_data, returning: false) unless new_data.empty?
   end
diff --git a/spec/controllers/assignments_controller_spec.rb b/spec/controllers/assignments_controller_spec.rb
index 81f551f556..0cd5e3ab30 100644
--- a/spec/controllers/assignments_controller_spec.rb
+++ b/spec/controllers/assignments_controller_spec.rb
@@ -2064,9 +2064,8 @@
 
       it 'copies over starter files' do
         uploaded_assignment = Assignment.find_by(short_identifier: assignment.short_identifier)
-        uploaded_starter_files = []
-        uploaded_assignment.starter_file_groups.each do |group|
-          uploaded_starter_files << {
+        uploaded_starter_files = uploaded_assignment.starter_file_groups.map do |group|
+          {
             name: group.name,
             use_rename: group.use_rename,
             entry_rename: group.entry_rename,
diff --git a/spec/factories/grade_entry_forms.rb b/spec/factories/grade_entry_forms.rb
index 5466264cf1..2364394b33 100644
--- a/spec/factories/grade_entry_forms.rb
+++ b/spec/factories/grade_entry_forms.rb
@@ -29,11 +29,10 @@
   factory :grade_entry_form_with_multiple_grade_entry_items, parent: :grade_entry_form do
     sequence(:short_identifier) { |i| "Spreadsheet_#{i}_with_data" }
     after(:create) do |grade_entry_form_with_multiple_grade_entry_items|
-      grade_entry_items = []
-      (1..3).each do |i|
-        grade_entry_items << create(:grade_entry_item,
-                                    grade_entry_form: grade_entry_form_with_multiple_grade_entry_items,
-                                    out_of: 10, position: i)
+      grade_entry_items = (1..3).map do |i|
+        create(:grade_entry_item,
+               grade_entry_form: grade_entry_form_with_multiple_grade_entry_items,
+               out_of: 10, position: i)
       end
       grade_entry_form_with_multiple_grade_entry_items.grade_entry_items = grade_entry_items
     end
diff --git a/spec/models/annotation_category_spec.rb b/spec/models/annotation_category_spec.rb
index de05bc3d9d..6ffea6e598 100644
--- a/spec/models/annotation_category_spec.rb
+++ b/spec/models/annotation_category_spec.rb
@@ -238,10 +238,7 @@
       create(:annotation_text, annotation_category: annotation_category)
       create(:annotation_text, annotation_category: annotation_category)
       annotation_category.update!(flexible_criterion_id: flex_criterion.id)
-      annotation_text_deductions = []
-      annotation_category.annotation_texts.each do |text|
-        annotation_text_deductions << text.deduction
-      end
+      annotation_text_deductions = annotation_category.annotation_texts.map(&:deduction)
       expect(annotation_text_deductions).to all(eq(0.0))
     end
   end

From 49a3aaaceee5edce60c953dad6c548b12a931f1f Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Sat, 11 May 2024 21:10:30 +0000
Subject: [PATCH 4/5] [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci
---
 app/assets/stylesheets/clickable.scss         |  2 +-
 .../stylesheets/common/SyntaxHighlighter.scss |  4 +-
 app/assets/stylesheets/common/_constants.scss |  4 +-
 app/assets/stylesheets/common/_courses.scss   |  2 +-
 .../stylesheets/common/_criteria_filter.scss  |  2 +-
 .../stylesheets/common/_filter_modal.scss     |  6 +--
 .../common/_filter_modal_dropdown.scss        |  2 +-
 app/assets/stylesheets/common/_icons.scss     |  4 +-
 app/assets/stylesheets/common/_login.scss     | 20 +++----
 app/assets/stylesheets/common/_markus.scss    | 52 +++++++++----------
 app/assets/stylesheets/common/_modals.scss    |  2 +-
 .../common/_multi_select_dropdown.scss        |  4 +-
 .../stylesheets/common/_navigation.scss       | 14 ++---
 .../common/_react_json_schema_form.scss       | 18 +++----
 .../stylesheets/common/_react_tabs.scss       |  2 +-
 app/assets/stylesheets/common/_reset.scss     | 16 +++---
 .../common/_single_select_dropdown.scss       |  4 +-
 app/assets/stylesheets/common/core.scss       | 20 +++----
 .../common/jupyterlab-markus-custom.scss      |  2 +-
 app/assets/stylesheets/context_menu.scss      |  2 +-
 app/assets/stylesheets/fonts.scss             |  8 +--
 app/assets/stylesheets/grader.scss            |  6 +--
 22 files changed, 98 insertions(+), 98 deletions(-)

diff --git a/app/assets/stylesheets/clickable.scss b/app/assets/stylesheets/clickable.scss
index e1cfbbbd59..f3c1be9b0f 100644
--- a/app/assets/stylesheets/clickable.scss
+++ b/app/assets/stylesheets/clickable.scss
@@ -1,4 +1,4 @@
-@import "common/constants";
+@import 'common/constants';
 
 .clickable_links {
   margin-left: 10px;
diff --git a/app/assets/stylesheets/common/SyntaxHighlighter.scss b/app/assets/stylesheets/common/SyntaxHighlighter.scss
index 6eea31d836..2c70bc1b00 100644
--- a/app/assets/stylesheets/common/SyntaxHighlighter.scss
+++ b/app/assets/stylesheets/common/SyntaxHighlighter.scss
@@ -1,5 +1,5 @@
-@import "mixins";
-@import "constants";
+@import 'mixins';
+@import 'constants';
 
 .dp-highlighter {
   display: flex;
diff --git a/app/assets/stylesheets/common/_constants.scss b/app/assets/stylesheets/common/_constants.scss
index fe7b50d700..7082487c38 100644
--- a/app/assets/stylesheets/common/_constants.scss
+++ b/app/assets/stylesheets/common/_constants.scss
@@ -61,8 +61,8 @@ $sharp-line: var(--sharp_line);
 // not sure what this does...
 $darker-orange: var(--darker-orange);
 
-$fonts: "Open Sans", "Lucida Grande", Verdana, Arial, sans-serif;
-$mono-fonts: "Consolas", "Courier New", Courier, mono, serif;
+$fonts: 'Open Sans', 'Lucida Grande', Verdana, Arial, sans-serif;
+$mono-fonts: 'Consolas', 'Courier New', Courier, mono, serif;
 $radius: var(--radius);
 $time-quick: 0.25s;
 $time-medium: 0.35s;
diff --git a/app/assets/stylesheets/common/_courses.scss b/app/assets/stylesheets/common/_courses.scss
index f78e4d9d46..5016b60171 100644
--- a/app/assets/stylesheets/common/_courses.scss
+++ b/app/assets/stylesheets/common/_courses.scss
@@ -97,7 +97,7 @@
   #selector-or::after {
     border-bottom: 1px solid;
     border-color: $gridline;
-    content: "";
+    content: '';
     flex: 1 1;
     margin: auto;
   }
diff --git a/app/assets/stylesheets/common/_criteria_filter.scss b/app/assets/stylesheets/common/_criteria_filter.scss
index 4657db008a..3c20280aca 100644
--- a/app/assets/stylesheets/common/_criteria_filter.scss
+++ b/app/assets/stylesheets/common/_criteria_filter.scss
@@ -1,4 +1,4 @@
-@import "constants";
+@import 'constants';
 
 .criteria-filter {
   border-left: $disabled-area solid 1.5px;
diff --git a/app/assets/stylesheets/common/_filter_modal.scss b/app/assets/stylesheets/common/_filter_modal.scss
index f71eec3d68..29d6902a84 100644
--- a/app/assets/stylesheets/common/_filter_modal.scss
+++ b/app/assets/stylesheets/common/_filter_modal.scss
@@ -1,4 +1,4 @@
-@import "constants";
+@import 'constants';
 
 .filter-modal {
   .filter-modal-title {
@@ -12,7 +12,7 @@
   .annotation-input {
     margin: 5px;
 
-    input[type="text"] {
+    input[type='text'] {
       height: 30px;
       width: $dropdown-horizontal;
     }
@@ -36,7 +36,7 @@
       margin-right: 10px;
     }
 
-    input[type="number"] {
+    input[type='number'] {
       width: 80px;
     }
 
diff --git a/app/assets/stylesheets/common/_filter_modal_dropdown.scss b/app/assets/stylesheets/common/_filter_modal_dropdown.scss
index 3d4cce6a61..8e5672d6ac 100644
--- a/app/assets/stylesheets/common/_filter_modal_dropdown.scss
+++ b/app/assets/stylesheets/common/_filter_modal_dropdown.scss
@@ -1,4 +1,4 @@
-@import "constants";
+@import 'constants';
 
 @mixin filter-modal-dropdown {
   height: 30px;
diff --git a/app/assets/stylesheets/common/_icons.scss b/app/assets/stylesheets/common/_icons.scss
index 11408bbf26..c2776a6ede 100644
--- a/app/assets/stylesheets/common/_icons.scss
+++ b/app/assets/stylesheets/common/_icons.scss
@@ -8,7 +8,7 @@
 
 button > .svg-inline--fa,
 .button > .svg-inline--fa,
-a[role="button"] > .svg-inline--fa {
+a[role='button'] > .svg-inline--fa {
   padding-right: 5px;
   vertical-align: baseline;
 
@@ -23,7 +23,7 @@ a[role="button"] > .svg-inline--fa {
 
 button > .fa-layers,
 .button > .fa-layers,
-a[role="button"] > .fa-layers {
+a[role='button'] > .fa-layers {
   margin-right: 5px;
   vertical-align: baseline;
 
diff --git a/app/assets/stylesheets/common/_login.scss b/app/assets/stylesheets/common/_login.scss
index bef3a88fc7..91279bd2ca 100644
--- a/app/assets/stylesheets/common/_login.scss
+++ b/app/assets/stylesheets/common/_login.scss
@@ -1,5 +1,5 @@
-@import "mixins";
-@import "constants";
+@import 'mixins';
+@import 'constants';
 /**
  * Login screen
  */
@@ -29,14 +29,14 @@
     margin: 20px auto 0;
     width: 80%;
 
-    input[type="text"],
-    input[type="password"],
-    input[type="submit"] {
+    input[type='text'],
+    input[type='password'],
+    input[type='submit'] {
       width: 100%;
     }
 
-    input[type="text"],
-    input[type="password"] {
+    input[type='text'],
+    input[type='password'] {
       margin: 0.5em 0;
       padding: 1em;
     }
@@ -44,7 +44,7 @@
     .submit {
       margin: 15px 0 25px;
 
-      input[type="submit"] {
+      input[type='submit'] {
         margin: 0.5em 0;
         padding: 10px;
       }
@@ -70,7 +70,7 @@
     #login-or::after {
       border-bottom: 1px solid;
       border-color: $gridline;
-      content: "";
+      content: '';
       flex: 1 1;
       margin: auto;
     }
@@ -92,7 +92,7 @@
   }
 
   .login-image {
-    background: transparent asset-url("markus_logo.svg") no-repeat center center / contain;
+    background: transparent asset-url('markus_logo.svg') no-repeat center center / contain;
     height: 115px;
     margin: 0 auto;
     width: 220px;
diff --git a/app/assets/stylesheets/common/_markus.scss b/app/assets/stylesheets/common/_markus.scss
index fde0fe4d51..8de45a1841 100644
--- a/app/assets/stylesheets/common/_markus.scss
+++ b/app/assets/stylesheets/common/_markus.scss
@@ -1,24 +1,24 @@
 @charset "UTF-8";
 
-@import "reset";
-@import "constants";
-@import "columns";
-@import "file_viewer";
-@import "login";
-@import "mixins";
-@import "modals";
-@import "notes_dialog";
-@import "annotations_dialog";
-@import "icons";
-@import "react_json_schema_form";
-@import "react_tabs";
-@import "courses";
-@import "url_viewer";
-@import "statistics";
-@import "criteria_filter";
-@import "multi_select_dropdown";
-@import "single_select_dropdown";
-@import "filter_modal";
+@import 'reset';
+@import 'constants';
+@import 'columns';
+@import 'file_viewer';
+@import 'login';
+@import 'mixins';
+@import 'modals';
+@import 'notes_dialog';
+@import 'annotations_dialog';
+@import 'icons';
+@import 'react_json_schema_form';
+@import 'react_tabs';
+@import 'courses';
+@import 'url_viewer';
+@import 'statistics';
+@import 'criteria_filter';
+@import 'multi_select_dropdown';
+@import 'single_select_dropdown';
+@import 'filter_modal';
 
 /** Main */
 
@@ -210,7 +210,7 @@ textarea {
     background-color: $light-success;
   }
 
-  &[type="number"] {
+  &[type='number'] {
     width: 5em;
 
     &.fixed-width {
@@ -244,9 +244,9 @@ select[multiple] {
 
 /** Buttons */
 
-input[type="button"],
-input[type="submit"],
-input[type="reset"],
+input[type='button'],
+input[type='submit'],
+input[type='reset'],
 button,
 .button {
   background: linear-gradient(to bottom, $background-main, $background-support);
@@ -389,7 +389,7 @@ fieldset {
     line-height: 1.8em;
   }
 
-  > input[type="checkbox"] {
+  > input[type='checkbox'] {
     margin-top: 0.2em;
   }
 }
@@ -1106,7 +1106,7 @@ nav {
     border: transparent solid 5px;
     border-left-color: $primary-one;
     border-right-width: 0;
-    content: " ";
+    content: ' ';
     float: right;
     margin-left: 10px;
     margin-top: 3px;
@@ -1331,7 +1331,7 @@ nav {
 
 // Styling for grade entry form inputs
 .grade-input {
-  > input[type="number"] {
+  > input[type='number'] {
     appearance: textfield;
     border-width: 0;
     height: calc(100% + 2px);
diff --git a/app/assets/stylesheets/common/_modals.scss b/app/assets/stylesheets/common/_modals.scss
index 3565a5bdba..93781005c7 100644
--- a/app/assets/stylesheets/common/_modals.scss
+++ b/app/assets/stylesheets/common/_modals.scss
@@ -1,4 +1,4 @@
-@import "constants";
+@import 'constants';
 
 .react-modal {
   background: $background-main;
diff --git a/app/assets/stylesheets/common/_multi_select_dropdown.scss b/app/assets/stylesheets/common/_multi_select_dropdown.scss
index 3c5bf1fea4..9f8a78f199 100644
--- a/app/assets/stylesheets/common/_multi_select_dropdown.scss
+++ b/app/assets/stylesheets/common/_multi_select_dropdown.scss
@@ -1,5 +1,5 @@
-@import "constants";
-@import "filter_modal_dropdown";
+@import 'constants';
+@import 'filter_modal_dropdown';
 
 .dropdown.multi-select-dropdown {
   @include filter-modal-dropdown;
diff --git a/app/assets/stylesheets/common/_navigation.scss b/app/assets/stylesheets/common/_navigation.scss
index b52b5a866c..e2c1ce7529 100644
--- a/app/assets/stylesheets/common/_navigation.scss
+++ b/app/assets/stylesheets/common/_navigation.scss
@@ -1,7 +1,7 @@
 /**
  * Header, main menu, sub menu, and sub_sub menu.
  */
-@import "constants";
+@import 'constants';
 
 /* Header */
 
@@ -58,7 +58,7 @@ nav {
 }
 
 #logo-img {
-  background: transparent asset-url("markus_logo.svg") no-repeat center center / 90px 30px;
+  background: transparent asset-url('markus_logo.svg') no-repeat center center / 90px 30px;
   margin-right: $dimen-horizontal-nav;
   min-height: 38px;
   width: 90px;
@@ -70,11 +70,11 @@ nav {
 
 .color-dark {
   #logo-img {
-    background-image: asset-url("markus_logo_dark.svg");
+    background-image: asset-url('markus_logo_dark.svg');
   }
 
   #mobile_menu {
-    background-image: asset-url("markus_logo_dark.svg");
+    background-image: asset-url('markus_logo_dark.svg');
   }
 }
 
@@ -104,7 +104,7 @@ nav {
 
     &::after {
       animation: ellipsis $time-quick infinite;
-      content: "\2026";
+      content: '\2026';
       display: inline-block;
       overflow: hidden;
       vertical-align: bottom;
@@ -131,7 +131,7 @@ nav {
 }
 
 #mobile_menu {
-  background: $background-support asset-url("markus_logo.svg") no-repeat center center / 90px 30px;
+  background: $background-support asset-url('markus_logo.svg') no-repeat center center / 90px 30px;
   border-bottom: 1px solid $primary-three;
   display: none;
   height: 3.5em;
@@ -153,7 +153,7 @@ nav {
 
     &::before,
     &::after {
-      content: "";
+      content: '';
       left: 1em;
       position: absolute;
       transition: all $time-quick;
diff --git a/app/assets/stylesheets/common/_react_json_schema_form.scss b/app/assets/stylesheets/common/_react_json_schema_form.scss
index 1442d23b4d..b72e78d7ca 100644
--- a/app/assets/stylesheets/common/_react_json_schema_form.scss
+++ b/app/assets/stylesheets/common/_react_json_schema_form.scss
@@ -77,12 +77,12 @@
     text-align: right;
   }
 
-  label[for*="tester_type"] {
+  label[for*='tester_type'] {
     font-size: 1.4em;
     min-width: max-content;
   }
 
-  select[id*="tester_type"] {
+  select[id*='tester_type'] {
     font-size: 1.4em;
   }
 
@@ -97,7 +97,7 @@
     padding: 0.25em;
   }
 
-  input[type="checkbox"] {
+  input[type='checkbox'] {
     float: right;
   }
 
@@ -108,11 +108,11 @@
   .form-control {
     min-width: 75pt;
 
-    &[type="text"] {
+    &[type='text'] {
       min-width: 150pt;
     }
 
-    &[multiple=""] {
+    &[multiple=''] {
       vertical-align: middle;
     }
   }
@@ -132,19 +132,19 @@
   }
 
   /* stylelint-disable property-no-vendor-prefix */
-  input[type="number"]::-webkit-outer-spin-button,
-  input[type="number"]::-webkit-inner-spin-button {
+  input[type='number']::-webkit-outer-spin-button,
+  input[type='number']::-webkit-inner-spin-button {
     -webkit-appearance: none;
     margin: 0;
   }
   /* stylelint-enable property-no-vendor-prefix */
 
-  input[type="number"] {
+  input[type='number'] {
     appearance: textfield;
   }
 
   // Hide specific legends
-  fieldset > legend[id$="extra_info__title"],
+  fieldset > legend[id$='extra_info__title'],
   #root_testers__title {
     display: none;
   }
diff --git a/app/assets/stylesheets/common/_react_tabs.scss b/app/assets/stylesheets/common/_react_tabs.scss
index 5f3cbc32f3..c115835d29 100644
--- a/app/assets/stylesheets/common/_react_tabs.scss
+++ b/app/assets/stylesheets/common/_react_tabs.scss
@@ -1,4 +1,4 @@
-@import "constants";
+@import 'constants';
 
 .react-tabs__tab--disabled {
   display: none;
diff --git a/app/assets/stylesheets/common/_reset.scss b/app/assets/stylesheets/common/_reset.scss
index 08b783e5e2..4c41bcf4a2 100644
--- a/app/assets/stylesheets/common/_reset.scss
+++ b/app/assets/stylesheets/common/_reset.scss
@@ -3,7 +3,7 @@
 /* ==========================================================================
    HTML5 display definitions
    ========================================================================== */
-@import "constants";
+@import 'constants';
 /*
  * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3.
  */
@@ -230,7 +230,7 @@ kbd,
 pre,
 samp {
   font-family: monospace, serif;
-  _font-family: "courier new", monospace;
+  _font-family: 'courier new', monospace;
   font-size: 1em;
 }
 
@@ -258,7 +258,7 @@ q {
 
 q::before,
 q::after {
-  content: "";
+  content: '';
   content: none;
 }
 
@@ -445,8 +445,8 @@ input[disabled] {
  * Known issue: excess padding remains in IE 6.
  */
 
-input[type="checkbox"],
-input[type="radio"] {
+input[type='checkbox'],
+input[type='radio'] {
   box-sizing: border-box; /* 1 */
   padding: 0; /* 2 */
   *height: 13px; /* 3 */
@@ -461,7 +461,7 @@ input[type="radio"] {
  * (include `-moz` to future-proof).
  */
 
-input[type="search"] {
+input[type='search'] {
   -webkit-appearance: textfield; /* 1 */
   -moz-box-sizing: content-box;
   -webkit-box-sizing: content-box; /* 2 */
@@ -473,8 +473,8 @@ input[type="search"] {
  * on OS X.
  */
 
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
diff --git a/app/assets/stylesheets/common/_single_select_dropdown.scss b/app/assets/stylesheets/common/_single_select_dropdown.scss
index 3e2f7cc75e..90422e23d4 100644
--- a/app/assets/stylesheets/common/_single_select_dropdown.scss
+++ b/app/assets/stylesheets/common/_single_select_dropdown.scss
@@ -1,5 +1,5 @@
-@import "constants";
-@import "filter_modal_dropdown";
+@import 'constants';
+@import 'filter_modal_dropdown';
 
 .dropdown.single-select-dropdown {
   @include filter-modal-dropdown;
diff --git a/app/assets/stylesheets/common/core.scss b/app/assets/stylesheets/common/core.scss
index cbd31da360..02a614c83d 100644
--- a/app/assets/stylesheets/common/core.scss
+++ b/app/assets/stylesheets/common/core.scss
@@ -1,7 +1,7 @@
-@import "markus";
-@import "constants";
-@import "navigation";
-@import "../../../../node_modules/@fortawesome/fontawesome-svg-core/styles";
+@import 'markus';
+@import 'constants';
+@import 'navigation';
+@import '../../../../node_modules/@fortawesome/fontawesome-svg-core/styles';
 
 #about_dialog {
   max-height: 75%;
@@ -34,8 +34,8 @@
 }
 
 #role_switch_dialog {
-  input[type="text"],
-  input[type="password"] {
+  input[type='text'],
+  input[type='password'] {
     margin-top: 1em;
     padding: 0.5em 0.75em;
     width: 100%;
@@ -58,7 +58,7 @@ textarea {
   width: auto;
 }
 
-input[type="radio"] {
+input[type='radio'] {
   max-width: 30px;
   min-width: 30px;
 }
@@ -70,7 +70,7 @@ input[type="radio"] {
 label.required::after,
 th.required::after {
   color: $severe-error;
-  content: "*";
+  content: '*';
 }
 
 .hidden {
@@ -125,7 +125,7 @@ th.required::after {
     font-weight: normal;
 
     &::before {
-      content: "|";
+      content: '|';
     }
   }
 
@@ -462,7 +462,7 @@ th.required::after {
   overflow: auto;
 }
 
-div.rendered-react-keyed-file-browser div.action-bar input[type="search"] {
+div.rendered-react-keyed-file-browser div.action-bar input[type='search'] {
   width: 100%;
 }
 
diff --git a/app/assets/stylesheets/common/jupyterlab-markus-custom.scss b/app/assets/stylesheets/common/jupyterlab-markus-custom.scss
index 7fb664ef62..1fca305d84 100644
--- a/app/assets/stylesheets/common/jupyterlab-markus-custom.scss
+++ b/app/assets/stylesheets/common/jupyterlab-markus-custom.scss
@@ -1,5 +1,5 @@
 /* MarkUs custom styling */
-@import "constants";
+@import 'constants';
 
 .markus-annotation {
   background-color: $light-alert;
diff --git a/app/assets/stylesheets/context_menu.scss b/app/assets/stylesheets/context_menu.scss
index 8eccaf985a..cb43b8d62f 100644
--- a/app/assets/stylesheets/context_menu.scss
+++ b/app/assets/stylesheets/context_menu.scss
@@ -1,4 +1,4 @@
-@import "common/core";
+@import 'common/core';
 
 .ui-menu {
   background: $background-main;
diff --git a/app/assets/stylesheets/fonts.scss b/app/assets/stylesheets/fonts.scss
index 3b6f219e06..721080dd9d 100644
--- a/app/assets/stylesheets/fonts.scss
+++ b/app/assets/stylesheets/fonts.scss
@@ -1,14 +1,14 @@
 /* Fonts */
 @font-face {
-  font-family: "Open Sans";
+  font-family: 'Open Sans';
   font-style: normal;
   font-weight: 100 1000;
-  src: asset-url("fonts/OpenSans-VariableFont_wdth,wght.woff2") format("woff2-variations");
+  src: asset-url('fonts/OpenSans-VariableFont_wdth,wght.woff2') format('woff2-variations');
 }
 
 @font-face {
-  font-family: "Open Sans";
+  font-family: 'Open Sans';
   font-style: italic;
   font-weight: 100 1000;
-  src: asset-url("fonts/OpenSans-Italic-VariableFont_wdth,wght.woff2") format("woff2-variations");
+  src: asset-url('fonts/OpenSans-Italic-VariableFont_wdth,wght.woff2') format('woff2-variations');
 }
diff --git a/app/assets/stylesheets/grader.scss b/app/assets/stylesheets/grader.scss
index db273aab62..f3e1b58107 100644
--- a/app/assets/stylesheets/grader.scss
+++ b/app/assets/stylesheets/grader.scss
@@ -1,4 +1,4 @@
-@import "common/core";
+@import 'common/core';
 
 /* Peer Review Styles */
 
@@ -180,7 +180,7 @@
   padding-right: 10px;
   text-align: right;
 
-  input[type="text"] {
+  input[type='text'] {
     font-weight: bold;
     padding-right: 0.5em;
     text-align: right;
@@ -205,7 +205,7 @@
     padding-right: 0.5em;
   }
 
-  input[type="radio"] {
+  input[type='radio'] {
     max-width: 20px;
     min-width: 20px;
   }

From f05cb1c8d9755d8a2eefb7033fc4a8a973b3a08d Mon Sep 17 00:00:00 2001
From: David Liu <david@cs.toronto.edu>
Date: Sat, 11 May 2024 18:00:57 -0400
Subject: [PATCH 5/5] Disable problematic rule until upgrading sass version

---
 .stylelintrc.yaml                          | 1 +
 app/assets/stylesheets/common/_mixins.scss | 7 ++-----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/.stylelintrc.yaml b/.stylelintrc.yaml
index d76ed40b17..6035974dee 100644
--- a/.stylelintrc.yaml
+++ b/.stylelintrc.yaml
@@ -1,6 +1,7 @@
 extends: ["stylelint-config-sass-guidelines"]
 rules:
   scss/at-extend-no-missing-placeholder: null
+  scss/no-global-function-names: null
   max-nesting-depth: 4
   selector-class-pattern: null
   selector-max-compound-selectors: 6
diff --git a/app/assets/stylesheets/common/_mixins.scss b/app/assets/stylesheets/common/_mixins.scss
index d61c02f2fe..b9111cfe9e 100644
--- a/app/assets/stylesheets/common/_mixins.scss
+++ b/app/assets/stylesheets/common/_mixins.scss
@@ -1,6 +1,3 @@
-@use 'sass:map';
-@use 'sass:meta';
-
 /** For easier size breakpoints. */
 
 $breakpoints: (
@@ -22,8 +19,8 @@ $breakpoints: (
 );
 
 @mixin breakpoint($name) {
-  @if map.has-key($breakpoints, $name) {
-    @media #{meta.inspect(map.get($breakpoints, $name))} {
+  @if map-has-key($breakpoints, $name) {
+    @media #{inspect(map-get($breakpoints, $name))} {
       @content;
     }
   } @else {