DEV: Update linting config and run gjs-codemod (#18)

.discourse-compatibility

@@ -1,2 +1,2 @@
+< 3.5.0.beta5-dev: cbcbbd2e3316b06c91998c7a0fd493d89ab6d2a5
 < 3.5.0.beta1-dev: b3f205375a2f12287aa3338d8adc1afa98c4bfbb
-

Gemfile.lock

@@ -14,30 +14,31 @@ GEM
       securerandom (>= 0.3)
       tzinfo (~> 2.0, >= 2.0.5)
       uri (>= 0.13.1)
-    ast (2.4.2)
+    ast (2.4.3)
-    base64 (0.2.0)
+    base64 (0.3.0)
-    benchmark (0.4.0)
+    benchmark (0.4.1)
-    bigdecimal (3.1.9)
+    bigdecimal (3.2.0)
     concurrent-ruby (1.3.5)
-    connection_pool (2.5.0)
+    connection_pool (2.5.3)
-    drb (2.2.1)
+    drb (2.2.3)
     i18n (1.14.7)
       concurrent-ruby (~> 1.0)
-    json (2.10.2)
+    json (2.12.2)
-    language_server-protocol (3.17.0.4)
+    language_server-protocol (3.17.0.5)
     lint_roller (1.1.0)
-    logger (1.6.6)
+    logger (1.7.0)
     minitest (5.25.5)
-    parallel (1.26.3)
+    parallel (1.27.0)
-    parser (3.3.7.1)
+    parser (3.3.8.0)
       ast (~> 2.4.1)
       racc
     prettier_print (1.2.1)
+    prism (1.4.0)
     racc (1.8.1)
-    rack (3.1.12)
+    rack (3.1.15)
     rainbow (3.1.1)
     regexp_parser (2.10.0)
-    rubocop (1.74.0)
+    rubocop (1.75.8)
       json (~> 2.3)
       language_server-protocol (~> 3.17.0.2)
       lint_roller (~> 1.1.0)
@@ -45,11 +46,12 @@ GEM
       parser (>= 3.3.0.2)
       rainbow (>= 2.2.2, < 4.0)
       regexp_parser (>= 2.9.3, < 3.0)
-      rubocop-ast (>= 1.38.0, < 2.0)
+      rubocop-ast (>= 1.44.0, < 2.0)
       ruby-progressbar (~> 1.7)
       unicode-display_width (>= 2.4.0, < 4.0)
-    rubocop-ast (1.38.1)
+    rubocop-ast (1.44.1)
-      parser (>= 3.3.1.0)
+      parser (>= 3.3.7.2)
+      prism (~> 1.4)
     rubocop-capybara (2.22.1)
       lint_roller (~> 1.1)
       rubocop (~> 1.72, >= 1.72.1)
@@ -65,13 +67,13 @@ GEM
     rubocop-factory_bot (2.27.1)
       lint_roller (~> 1.1)
       rubocop (~> 1.72, >= 1.72.1)
-    rubocop-rails (2.30.3)
+    rubocop-rails (2.32.0)
       activesupport (>= 4.2.0)
       lint_roller (~> 1.1)
       rack (>= 1.1)
-      rubocop (>= 1.72.1, < 2.0)
+      rubocop (>= 1.75.0, < 2.0)
-      rubocop-ast (>= 1.38.0, < 2.0)
+      rubocop-ast (>= 1.44.0, < 2.0)
-    rubocop-rspec (3.5.0)
+    rubocop-rspec (3.6.0)
       lint_roller (~> 1.1)
       rubocop (~> 1.72, >= 1.72.1)
     rubocop-rspec_rails (2.31.0)
@@ -97,4 +99,4 @@ DEPENDENCIES
   syntax_tree
 
 BUNDLED WITH
-   2.6.6
+   2.6.9

assets/javascripts/discourse/templates/user/rewind.gjs

@@ -0,0 +1,4 @@
+import RouteTemplate from "ember-route-template";
+import Rewind from "../../components/rewind";
+
+export default RouteTemplate(<template><Rewind /></template>);

assets/javascripts/discourse/templates/user/rewind.hbs

@@ -1 +0,0 @@
-<Rewind />

assets/stylesheets/common/activity-calendar.scss

@@ -4,7 +4,7 @@
   .rewind-card {
     @include rewind-border;
 
-    @media screen and (max-width: 475px) {
+    @media screen and (width <= 475px) {
       padding: 0.5em;
     }
   }
@@ -13,7 +13,7 @@
     border-collapse: unset;
     border-spacing: 3px;
 
-    @media screen and (max-width: 475px) {
+    @media screen and (width <= 475px) {
       border-spacing: 1px;
     }
 
@@ -32,9 +32,9 @@
     height: 10px;
     width: 10px;
     border-radius: calc(var(--rewind-border-radius) / 2);
-    border: 1px solid rgba(var(--primary-rgb), 0.2);
+    border: 1px solid rgb(var(--primary-rgb), 0.2);
 
-    @media screen and (max-width: 475px) {
+    @media screen and (width <= 475px) {
       height: 5px;
       width: 5px;
     }

assets/stylesheets/common/best-posts.scss

@@ -59,7 +59,7 @@
   }
 
   .best-posts__post {
-    @media screen and (max-width: 475px) {
+    @media screen and (width <= 475px) {
       max-height: 300px;
       text-overflow: ellipsis;
       overflow: hidden;
@@ -81,7 +81,7 @@
     text-align: left;
     color: var(--primary-800);
 
-    @media screen and (max-width: 475px) {
+    @media screen and (width <= 475px) {
       font-size: var(--font-down-2);
     }
   }

assets/stylesheets/common/best-topics.scss

@@ -89,7 +89,7 @@
     color: var(--primary-800);
     text-align: left;
 
-    @media screen and (max-width: 475px) {
+    @media screen and (width <= 475px) {
       max-width: 100%;
       overflow: hidden;
       font-size: var(--font-down-2);

assets/stylesheets/common/card.scss

@@ -30,11 +30,11 @@
     font-size: var(--font-up-3);
     -webkit-font-smoothing: antialiased;
 
-    @media screen and (max-width: 525px) {
+    @media screen and (width <= 525px) {
       font-size: var(--font-up-2);
     }
 
-    @media screen and (max-width: 475px) {
+    @media screen and (width <= 475px) {
       font-size: var(--font-up-0);
     }
   }

assets/stylesheets/common/fbff.scss

@@ -1,11 +1,11 @@
 .-fbff {
   --border-size: 6px;
 
-  @media screen and (max-width: 768px) {
+  @media screen and (width <= 768px) {
     --border-size: 4px;
   }
 
-  @media screen and (max-width: 475px) {
+  @media screen and (width <= 475px) {
     --border-size: 3px;
   }
 
@@ -15,7 +15,7 @@
 
     @include rewind-border;
 
-    @media screen and (max-width: 625px) {
+    @media screen and (width <= 625px) {
       grid-template-columns: 1fr 1fr 1fr;
       grid-template-rows: min-content min-content;
       grid-template-areas: "gif gif gif" "friend nothing you";
@@ -30,7 +30,7 @@
     justify-self: center;
     z-index: 10;
 
-    @media screen and (max-width: 625px) {
+    @media screen and (width <= 625px) {
       grid-area: gif;
     }
   }
@@ -46,7 +46,7 @@
     grid-template-rows: 1fr min-content;
     flex-direction: column;
 
-    @media screen and (max-width: 625px) {
+    @media screen and (width <= 625px) {
       &:first-of-type {
         grid-area: friend;
       }
@@ -62,12 +62,12 @@
       width: 75px;
       height: 75px;
 
-      @media screen and (max-width: 768px) {
+      @media screen and (width <= 768px) {
         width: 50px;
         height: 50px;
       }
 
-      @media screen and (max-width: 475px) {
+      @media screen and (width <= 475px) {
         width: 25px;
         height: 25px;
       }
@@ -83,7 +83,7 @@
     font-size: var(--font-down-1);
     font-family: "Pixelify Sans", sans-serif;
 
-    @media screen and (max-width: 475px) {
+    @media screen and (width <= 475px) {
       font-size: var(--font-down-3);
     }
   }

assets/stylesheets/common/post-received-reactions.scss

@@ -4,7 +4,7 @@
     justify-content: space-between;
     gap: 0.5em;
 
-    @media screen and (max-width: 475px) {
+    @media screen and (width <= 475px) {
       gap: 0.125em;
     }
   }
@@ -82,7 +82,7 @@
     transform: rotateZ(calc(var(--ambientAmount) * 13deg));
   }
 
-  @media screen and (max-width: 625px) {
+  @media screen and (width <= 625px) {
     .scale {
       width: min-content;
     }
@@ -108,7 +108,7 @@
     }
   }
 
-  @media screen and (max-width: 475px) {
+  @media screen and (width <= 475px) {
     .scale {
       width: min-content;
     }

assets/stylesheets/common/post-used-reactions.scss

@@ -30,7 +30,7 @@
 
   .rewind-reactions-bar {
     background: var(--tertiary-600);
-    border: 1px solid rgba(var(--primary-rgb), 0.2);
+    border: 1px solid rgb(var(--primary-rgb), 0.2);
     height: 25px;
     border-radius: calc(var(--rewind-border-radius) * 0.75);
   }

assets/stylesheets/common/reading-time.scss

@@ -13,7 +13,7 @@
   transform: rotateY(-20deg);
   z-index: 2;
 
-  @media screen and (max-width: 475px) {
+  @media screen and (width <= 475px) {
     width: 100px;
     height: 133px;
   }
@@ -24,7 +24,7 @@ p.reading-time__text {
 }
 
 .reading-time code {
-  background-color: rgba(var(--primary-rgb), 0.15);
+  background-color: rgb(var(--primary-rgb), 0.15);
 }
 
 .book img {
@@ -36,9 +36,9 @@ p.reading-time__text {
   transform: translateZ(17.5px);
   background-color: #01060f;
   border-radius: 0 5px 5px 0;
-  box-shadow: 5px 5px 20px rgba(var(--primary-rgb), 0.05);
+  box-shadow: 5px 5px 20px rgb(var(--primary-rgb), 0.05);
 
-  @media screen and (max-width: 475px) {
+  @media screen and (width <= 475px) {
     width: 100px;
     height: 133px;
   }
@@ -77,7 +77,7 @@ p.reading-time__text {
     #b6b6b6 100%
   );
 
-  @media screen and (max-width: 475px) {
+  @media screen and (width <= 475px) {
     left: -43px;
     width: 22px;
     height: 125px;
@@ -94,9 +94,9 @@ p.reading-time__text {
   transform: translateZ(-17.5px);
   background-color: var(--book-color);
   border-radius: 0 5px 5px 0;
-  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 0 1px 1px rgb(0, 0, 0, 0.25);
 
-  @media screen and (max-width: 475px) {
+  @media screen and (width <= 475px) {
     width: 100px;
     height: 133px;
   }
@@ -106,7 +106,7 @@ p.reading-time__text {
   font-weight: normal;
   width: 50%;
 
-  @media screen and (max-width: 475px) {
+  @media screen and (width <= 475px) {
     font-size: var(--font-down-2);
   }
 }
@@ -123,7 +123,7 @@ p.reading-time__text {
 
   @include rewind-border;
 
-  @media screen and (max-width: 475px) {
+  @media screen and (width <= 475px) {
     padding: 0.75em;
   }
 }
@@ -136,10 +136,10 @@ p.reading-time__text {
   position: absolute;
   background-color: var(--book-color);
   border-radius: 0 5px 5px 0;
-  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 0 1px 1px rgb(0, 0, 0, 0.25);
   z-index: 1;
 
-  @media screen and (max-width: 475px) {
+  @media screen and (width <= 475px) {
     width: 100px;
     height: 133px;
   }
@@ -177,7 +177,7 @@ p.reading-time__text {
       #b6b6b6 100%
     );
 
-    @media screen and (max-width: 475px) {
+    @media screen and (width <= 475px) {
       left: -43px;
       width: 22px;
       height: 125px;
@@ -188,7 +188,7 @@ p.reading-time__text {
     top: 3px;
     left: 14px;
 
-    @media screen and (max-width: 475px) {
+    @media screen and (width <= 475px) {
       top: 3px;
       left: 11px;
     }
@@ -199,7 +199,7 @@ p.reading-time__text {
     left: 22px;
     z-index: -1;
 
-    @media screen and (max-width: 475px) {
+    @media screen and (width <= 475px) {
       top: 5px;
       left: 17px;
     }
@@ -210,7 +210,7 @@ p.reading-time__text {
     left: 31px;
     z-index: -2;
 
-    @media screen and (max-width: 475px) {
+    @media screen and (width <= 475px) {
       display: none;
     }
   }

assets/stylesheets/common/report.scss

@@ -9,7 +9,7 @@
   margin: 0 auto;
   flex-direction: column;
 
-  @media (max-width: 768px) {
+  @media (width <= 768px) {
     padding: 0.75em;
   }
 }

assets/stylesheets/common/rewind-callout.scss

@@ -17,17 +17,17 @@
   &:focus {
     background: var(--primary) !important;
     box-shadow:
-      0 0 0 2px rgba(var(--d-blue), 1),
+      0 0 0 2px rgb(var(--d-blue), 1),
-      0 0 0 4px rgba(var(--d-green), 1),
+      0 0 0 4px rgb(var(--d-green), 1),
-      0 0 0 6px rgba(var(--d-orange), 1),
+      0 0 0 6px rgb(var(--d-orange), 1),
-      0 0 0 8px rgba(var(--d-red), 1);
+      0 0 0 8px rgb(var(--d-red), 1);
 
     @if color-scheme-is-light {
       box-shadow:
-        0 0 0 2px rgba(var(--d-blue-dark), 1),
+        0 0 0 2px rgb(var(--d-blue-dark), 1),
-        0 0 0 4px rgba(var(--d-green-dark), 1),
+        0 0 0 4px rgb(var(--d-green-dark), 1),
-        0 0 0 6px rgba(var(--d-orange-dark), 1),
+        0 0 0 6px rgb(var(--d-orange-dark), 1),
-        0 0 0 8px rgba(var(--d-red-dark), 1);
+        0 0 0 8px rgb(var(--d-red-dark), 1);
     }
   }
 

assets/stylesheets/common/rewind.scss

@@ -21,10 +21,10 @@
     width: calc(100vw - (100vw - 100%) + 2px);
     height: 100vh;
     position: fixed;
-    background: rgba(var(--secondary-rgb), 0.5);
+    background: rgb(var(--secondary-rgb), 0.5);
     backdrop-filter: blur(4.9px);
 
-    @media (max-width: 768px) {
+    @media (width <= 768px) {
       padding: 0;
     }
   }
@@ -42,7 +42,7 @@
   overflow: hidden;
   background: var(--secondary);
 
-  @media (max-width: 768px) {
+  @media (width <= 768px) {
     border: none;
     border-radius: 0;
   }

assets/stylesheets/common/top-words.scss

@@ -8,7 +8,7 @@
 .cards-container {
   display: flex;
 
-  @media (max-width: 525px) {
+  @media (width <= 525px) {
     display: grid;
     grid-template:
       ".  .  .  .  w  w  .  .  .  . " auto
@@ -61,27 +61,27 @@
   transform: rotateZ(calc(var(--ambientAmount) * 10deg));
   z-index: 1;
 
-  @media screen and (max-width: 625px) {
+  @media screen and (width <= 625px) {
     width: 115px;
   }
 
-  @media screen and (max-width: 475px) {
+  @media screen and (width <= 475px) {
     width: 100px;
     height: 125px;
   }
 
-  @media screen and (max-width: 350px) {
+  @media screen and (width <= 350px) {
     width: 80px;
     height: 125px;
   }
 
   .rewind-card {
-    box-shadow: 0 0 0 4px rgba(var(--mystery-color-light), 1);
+    box-shadow: 0 0 0 4px rgb(var(--mystery-color-light), 1);
     border: none;
 
     @if is-dark-color-scheme() {
       background-color: var(--primary-200);
-      box-shadow: 0 0 0 4px rgba(var(--mystery-color-dark), 1);
+      box-shadow: 0 0 0 4px rgb(var(--mystery-color-dark), 1);
     }
   }
 
@@ -94,10 +94,10 @@
     transition: transform, box-shadow;
     transition-duration: 0.35s;
     transition-timing-function: cubic-bezier(0.73, 0.42, 0.03, 0.78);
-    box-shadow: 0 0 6px 2px rgba(var(--primary-rgb), 0.25);
+    box-shadow: 0 0 6px 2px rgb(var(--primary-rgb), 0.25);
 
     @if is-dark-color-scheme() {
-      box-shadow: 0 0 6px 2px rgba(var(--secondary-rgb), 0.9);
+      box-shadow: 0 0 6px 2px rgb(var(--secondary-rgb), 0.9);
     }
   }
 
@@ -117,10 +117,10 @@
   }
 
   &:hover .rewind-card__inner {
-    box-shadow: 0 3px 8px 2px rgba(var(--primary-rgb), 0.25);
+    box-shadow: 0 3px 8px 2px rgb(var(--primary-rgb), 0.25);
 
     @if is-dark-color-scheme() {
-      box-shadow: 0 3px 8px 2px rgba(var(--primary-rgb), 0.25);
+      box-shadow: 0 3px 8px 2px rgb(var(--primary-rgb), 0.25);
     }
   }
 
@@ -181,7 +181,7 @@
       width: 20px;
       height: 20px;
 
-      @media screen and (max-width: 475px) {
+      @media screen and (width <= 475px) {
         height: 15px;
         width: 15px;
       }
@@ -195,7 +195,7 @@
       width: 50px;
       height: 50px;
 
-      @media screen and (max-width: 475px) {
+      @media screen and (width <= 475px) {
         height: 30px;
         width: 30px;
       }
@@ -210,7 +210,7 @@
       height: 20px;
       transform: rotate(180deg);
 
-      @media screen and (max-width: 475px) {
+      @media screen and (width <= 475px) {
         height: 15px;
         width: 15px;
       }

assets/stylesheets/common/variables.scss

@@ -15,9 +15,9 @@
 @mixin rewind-border() {
   border: 2px solid var(--primary);
   border-radius: var(--rewind-border-radius);
-  box-shadow: 4px 4px 0 0 rgba(var(--primary-rgb), 0.25);
+  box-shadow: 4px 4px 0 0 rgb(var(--primary-rgb), 0.25);
 
   @if is-dark-color-scheme() {
-    box-shadow: 0 4px 5px -2px rgba(var(--secondary-rgb), 0.5);
+    box-shadow: 0 4px 5px -2px rgb(var(--secondary-rgb), 0.5);
   }
 }

package.json

@@ -1,11 +1,11 @@
 {
   "private": true,
   "devDependencies": {
-    "@discourse/lint-configs": "2.11.1",
+    "@discourse/lint-configs": "2.23.0",
-    "ember-template-lint": "7.0.1",
+    "ember-template-lint": "7.7.0",
-    "eslint": "9.22.0",
+    "eslint": "9.28.0",
     "prettier": "3.5.3",
-    "stylelint": "16.16.0"
+    "stylelint": "16.20.0"
   },
   "engines": {
     "node": ">= 22",