DEV: Update linting

Gemfile.lock

@@ -7,80 +7,93 @@ GIT
 GEM
   remote: https://rubygems.org/
   specs:
-    activesupport (7.1.3.3)
+    activesupport (8.0.2)
       base64
+      benchmark (>= 0.3)
       bigdecimal
-      concurrent-ruby (~> 1.0, >= 1.0.2)
+      concurrent-ruby (~> 1.0, >= 1.3.1)
       connection_pool (>= 2.2.5)
       drb
       i18n (>= 1.6, < 2)
+      logger (>= 1.4.2)
       minitest (>= 5.1)
-      mutex_m
-      tzinfo (~> 2.0)
+      securerandom (>= 0.3)
+      tzinfo (~> 2.0, >= 2.0.5)
+      uri (>= 0.13.1)
     ast (2.4.2)
     base64 (0.2.0)
-    bigdecimal (3.1.8)
-    concurrent-ruby (1.2.3)
-    connection_pool (2.4.1)
+    benchmark (0.4.0)
+    bigdecimal (3.1.9)
+    concurrent-ruby (1.3.5)
+    connection_pool (2.5.0)
     drb (2.2.1)
-    i18n (1.14.5)
+    i18n (1.14.7)
       concurrent-ruby (~> 1.0)
-    json (2.7.2)
-    language_server-protocol (3.17.0.3)
-    minitest (5.23.1)
-    mutex_m (0.2.0)
-    parallel (1.24.0)
-    parser (3.3.1.0)
+    json (2.10.2)
+    language_server-protocol (3.17.0.4)
+    lint_roller (1.1.0)
+    logger (1.6.6)
+    minitest (5.25.5)
+    parallel (1.26.3)
+    parser (3.3.7.1)
       ast (~> 2.4.1)
       racc
     prettier_print (1.2.1)
-    racc (1.8.0)
-    rack (3.0.12)
+    racc (1.8.1)
+    rack (3.1.12)
     rainbow (3.1.1)
-    regexp_parser (2.9.2)
-    rexml (3.3.9)
-    rubocop (1.64.0)
+    regexp_parser (2.10.0)
+    rubocop (1.74.0)
       json (~> 2.3)
-      language_server-protocol (>= 3.17.0)
+      language_server-protocol (~> 3.17.0.2)
+      lint_roller (~> 1.1.0)
       parallel (~> 1.10)
       parser (>= 3.3.0.2)
       rainbow (>= 2.2.2, < 4.0)
-      regexp_parser (>= 1.8, < 3.0)
-      rexml (>= 3.2.5, < 4.0)
-      rubocop-ast (>= 1.31.1, < 2.0)
+      regexp_parser (>= 2.9.3, < 3.0)
+      rubocop-ast (>= 1.38.0, < 2.0)
       ruby-progressbar (~> 1.7)
-      unicode-display_width (>= 2.4.0, < 3.0)
-    rubocop-ast (1.31.3)
+      unicode-display_width (>= 2.4.0, < 4.0)
+    rubocop-ast (1.38.1)
       parser (>= 3.3.1.0)
-    rubocop-capybara (2.20.0)
-      rubocop (~> 1.41)
-    rubocop-discourse (3.8.0)
+    rubocop-capybara (2.22.1)
+      lint_roller (~> 1.1)
+      rubocop (~> 1.72, >= 1.72.1)
+    rubocop-discourse (3.12.1)
       activesupport (>= 6.1)
-      rubocop (>= 1.59.0)
-      rubocop-capybara (>= 2.0.0)
-      rubocop-factory_bot (>= 2.0.0)
-      rubocop-rails (>= 2.25.0)
-      rubocop-rspec (>= 2.25.0)
-    rubocop-factory_bot (2.25.1)
-      rubocop (~> 1.41)
-    rubocop-rails (2.25.0)
+      lint_roller (>= 1.1.0)
+      rubocop (>= 1.73.2)
+      rubocop-capybara (>= 2.22.0)
+      rubocop-factory_bot (>= 2.27.0)
+      rubocop-rails (>= 2.30.3)
+      rubocop-rspec (>= 3.0.1)
+      rubocop-rspec_rails (>= 2.31.0)
+    rubocop-factory_bot (2.27.1)
+      lint_roller (~> 1.1)
+      rubocop (~> 1.72, >= 1.72.1)
+    rubocop-rails (2.30.3)
       activesupport (>= 4.2.0)
+      lint_roller (~> 1.1)
       rack (>= 1.1)
-      rubocop (>= 1.33.0, < 2.0)
-      rubocop-ast (>= 1.31.1, < 2.0)
-    rubocop-rspec (2.29.2)
-      rubocop (~> 1.40)
-      rubocop-capybara (~> 2.17)
-      rubocop-factory_bot (~> 2.22)
-      rubocop-rspec_rails (~> 2.28)
-    rubocop-rspec_rails (2.28.3)
-      rubocop (~> 1.40)
+      rubocop (>= 1.72.1, < 2.0)
+      rubocop-ast (>= 1.38.0, < 2.0)
+    rubocop-rspec (3.5.0)
+      lint_roller (~> 1.1)
+      rubocop (~> 1.72, >= 1.72.1)
+    rubocop-rspec_rails (2.31.0)
+      lint_roller (~> 1.1)
+      rubocop (~> 1.72, >= 1.72.1)
+      rubocop-rspec (~> 3.5)
     ruby-progressbar (1.13.0)
+    securerandom (0.4.1)
     syntax_tree (6.2.0)
       prettier_print (>= 1.2.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
-    unicode-display_width (2.5.0)
+    unicode-display_width (3.1.4)
+      unicode-emoji (~> 4.0, >= 4.0.4)
+    unicode-emoji (4.0.4)
+    uri (1.0.3)
 
 PLATFORMS
   ruby
@@ -91,4 +104,4 @@ DEPENDENCIES
   translations-manager!
 
 BUNDLED WITH
-   2.5.10
+   2.6.6

assets/javascripts/discourse/controllers/admin-plugins-discourse-subscriptions.js

@@ -9,6 +9,7 @@ import { i18n } from "discourse-i18n";
 
 export default class AdminPluginsDiscourseSubscriptionsController extends Controller {
   @service dialog;
+
   loading = false;
 
   @discourseComputed

assets/stylesheets/common/campaign.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .subscription-campaign-sidebar {
   #main-outlet
     .container.list-container
@@ -9,23 +11,19 @@
     grid-template-columns: 78% calc(22% - 2em);
     grid-template-areas: "content sidebar";
     grid-column-gap: 2em;
+
     span:first-of-type {
       grid-area: sidebar;
     }
   }
 }
 
-// All
-.campaign-banner {
-  box-shadow: 5px 5px
-    var(--discourse_subscriptions_campaign_banner_shadow_color);
-}
-
 // Sidebar Version
 .subscriptions-campaign-sidebar .campaign-banner {
   width: 100%;
   flex-direction: column;
   position: relative;
+
   .btn.close {
     position: absolute;
     top: 1em;
@@ -33,6 +31,7 @@
     font-size: 10px;
     z-index: 1;
   }
+
   .campaign-banner-info {
     display: flex;
     flex-direction: column;
@@ -40,11 +39,13 @@
     width: calc(100% - 2em);
     padding: 1em 1em 2em 1em;
     position: relative;
+
     &-header {
       font-size: $font-up-5;
       margin: 0 !important;
       text-align: center;
     }
+
     &-description {
       width: 100%;
       font-size: $font-down-1;
@@ -52,10 +53,12 @@
       margin-bottom: 1em;
     }
   }
+
   .campaign-banner-progress {
     width: calc(100% - 2em);
     margin: 1em 0;
     padding: 1em;
+
     &-users {
       align-items: stretch;
       display: flex;
@@ -64,18 +67,22 @@
 
       &-title {
         font-size: $font-down-1;
+
         strong {
           font-weight: bold;
         }
       }
     }
   }
+
   .campaign-banner-info-button {
     height: 2em;
   }
+
   progress[value] {
     height: 1.5em;
   }
+
   .campaign-banner-progress-description {
     font-size: $font-down-1;
   }
@@ -97,10 +104,14 @@ body.archetype-regular {
   border: 1px solid var(--primary-low);
   position: relative;
   align-items: stretch;
+  box-shadow: 5px 5px
+    var(--discourse_subscriptions_campaign_banner_shadow_color);
+
   @media screen and (max-width: 400px) {
     width: 98%;
     flex-direction: column;
   }
+
   .btn.close {
     position: absolute;
     top: 1em;
@@ -108,16 +119,19 @@ body.archetype-regular {
     font-size: 10px;
     background-color: transparent;
     padding: 0;
+
     &:hover {
       .d-icon {
         color: var(--primary);
       }
     }
   }
+
   &-info {
     width: 30%;
     padding: 0.5em 2em 0.5em;
     background-color: var(--primary-very-low);
+
     @media screen and (min-width: 1000px) {
       width: 40%;
       display: grid;
@@ -125,6 +139,7 @@ body.archetype-regular {
       grid-template-areas: "left right" "left right";
       align-items: center;
     }
+
     @media screen and (max-width: 400px) {
       width: calc(100% - 4em);
       display: flex;
@@ -132,23 +147,29 @@ body.archetype-regular {
       align-items: center;
       padding-bottom: 1em;
     }
+
     &-header {
       font-size: $font-up-6;
       margin: 0;
+
       @media screen and (max-width: 750px) {
         font-size: $font-up-3;
       }
     }
+
     &-success {
       width: 100%;
       margin: 0;
     }
+
     &-description {
       width: 100%;
       margin: 0.25em 0 1em 0;
+
       @media screen and (max-width: 750px) {
         font-size: $font-down-1;
       }
+
       @media screen and (max-width: 400px) {
         text-align: center;
       }
@@ -159,14 +180,17 @@ body.archetype-regular {
       height: 2.5em;
       padding: 0.75em 1.5em 0.75em 2.75em;
       position: relative;
+
       .d-icon {
         position: absolute;
         left: 1em;
+
         &.hover-heart {
           opacity: 0;
           transition: opacity 0.2s ease-in-out;
         }
       }
+
       &:hover {
         .d-icon.hover-heart {
           opacity: 1;
@@ -174,12 +198,15 @@ body.archetype-regular {
       }
     }
   }
+
   &-progress {
     width: 60%;
     padding: 1.5em 2em 1.5em;
+
     @media screen and (max-width: 400px) {
       width: calc(100% - 4em);
     }
+
     &-success {
       height: 32px;
       background: linear-gradient(
@@ -194,13 +221,16 @@ body.archetype-regular {
       background-size: 400% 100%;
       animation: gradient 15s ease infinite;
     }
+
     &-description {
       margin: 0.5em 0 0;
       font-weight: 300;
+
       strong {
         font-weight: bold;
       }
     }
+
     &-users {
       align-items: center;
       display: inline-flex;
@@ -211,13 +241,13 @@ body.archetype-regular {
           font-weight: bold;
         }
       }
+
       &-avatars {
         margin: 0 0 0 0.5em;
       }
     }
 
     progress[value] {
-      -webkit-appearance: none;
       appearance: none;
       height: 2.5em;
       width: 100%;
@@ -264,28 +294,36 @@ html:not(.mobile-view) .subscriptions-campaign-topic-footer .campaign-banner {
   margin-top: 2em;
   height: min-content;
   width: calc(100% + 14em);
+
   .btn.close {
     top: 1em;
     right: 1em;
   }
+
   .campaign-banner-info {
     width: 65%;
+
     &-header {
       font-size: $font-up-6;
     }
+
     &-description {
       font-size: $font-down-1;
       margin: 0.25em 0.25em 1em 0 !important;
     }
   }
+
   .campaign-banner-progress {
     padding: 1.5em 2.5em 1em;
+
     progress[value] {
       height: 2em;
     }
+
     .campaign-banner-progress-users {
       margin-top: 1em;
     }
+
     .campaign-banner-progress-users-title {
       margin: 0;
     }
@@ -297,9 +335,11 @@ html:not(.mobile-view) .subscriptions-campaign-topic-footer .campaign-banner {
   0% {
     background-position: 0% 50%;
   }
+
   50% {
     background-position: 100% 50%;
   }
+
   100% {
     background-position: 0% 50%;
   }
@@ -322,30 +362,31 @@ $heightpartial: calc($height / 1.2);
 $box-shadow: ();
 
 @for $i from 0 through $particles {
-  $box-shadow: $box-shadow,
-    random($width) -
+  $box-shadow:
+    $box-shadow,
+    math.random($width) -
       $halfwidth +
       px
-      random($height) -
+      math.random($height) -
       $heightpartial +
       px
-      hsl(random(360), 100%, 50%);
+      hsl(math.random(360), 100%, 50%);
 }
 
 @mixin keyframes($animationName) {
-  @-webkit-keyframes #{$animationName} {
+  @keyframes #{$animationName} {
     @content;
   }
 
-  @-moz-keyframes #{$animationName} {
+  @keyframes #{$animationName} {
     @content;
   }
 
-  @-o-keyframes #{$animationName} {
+  @keyframes #{$animationName} {
     @content;
   }
 
-  @-ms-keyframes #{$animationName} {
+  @keyframes #{$animationName} {
     @content;
   }
 
@@ -355,44 +396,29 @@ $box-shadow: ();
 }
 
 @mixin animation-delay($settings) {
-  -moz-animation-delay: $settings;
-  -webkit-animation-delay: $settings;
-  -o-animation-delay: $settings;
-  -ms-animation-delay: $settings;
   animation-delay: $settings;
 }
 
 @mixin animation-duration($settings) {
-  -moz-animation-duration: $settings;
-  -webkit-animation-duration: $settings;
-  -o-animation-duration: $settings;
-  -ms-animation-duration: $settings;
   animation-duration: $settings;
 }
 
 @mixin animation($settings) {
-  -moz-animation: $settings;
-  -webkit-animation: $settings;
-  -o-animation: $settings;
-  -ms-animation: $settings;
   animation: $settings;
 }
 
 @mixin transform($settings) {
   transform: $settings;
-  -moz-transform: $settings;
-  -webkit-transform: $settings;
-  -o-transform: $settings;
-  -ms-transform: $settings;
 }
 
-body:not(.archetype-regular):not(.success-animation-off) {
+body:not(.archetype-regular, .success-animation-off) {
   .fireworks > .before,
   .fireworks > .after {
     position: absolute;
     width: 5px;
     height: 5px;
     border-radius: 50%;
+
     @include animation(
       (
         1s bang ease-out 1s 2 backwards,
@@ -427,21 +453,25 @@ body:not(.archetype-regular):not(.success-animation-off) {
     margin-top: -2%;
     margin-left: -43%;
   }
+
   20%,
   39.9% {
     margin-top: 2%;
     margin-left: -18%;
   }
+
   40%,
   59.9% {
     margin-top: 0%;
     margin-left: 0%;
   }
+
   60%,
   79.9% {
     margin-top: 4%;
     margin-left: 18%;
   }
+
   80%,
   99.9% {
     margin-top: 6%;

assets/stylesheets/common/layout.scss

@@ -1,7 +1,6 @@
 .discourse-subscriptions-section-columns {
   display: flex;
   justify-content: space-between;
-
   margin: 20px;
   padding: 20px;
 
@@ -55,15 +54,19 @@
     .product-description {
       flex-grow: 1;
     }
+
     .product-purchase {
       display: flex;
       flex-flow: row wrap;
       justify-content: space-between;
+
       .purchased {
         color: var(--success);
       }
+
       .billing-link {
         align-self: flex-end;
+
         @include breakpoint(large) {
           margin-top: 1em;
         }

assets/stylesheets/common/main.scss

@@ -18,6 +18,7 @@ textarea[readonly] {
   .btn-right {
     text-align: right;
   }
+
   .align-buttons {
     display: flex;
     justify-content: flex-end;
@@ -36,6 +37,7 @@ textarea[readonly] {
   position: relative;
   top: 2px;
 }
+
 .plan-currency {
   width: 70px;
 }
@@ -46,12 +48,14 @@ textarea[readonly] {
 
 table.discourse-subscriptions-user-table {
   width: 100%;
+
   th,
   td {
     padding-top: 8px;
     padding-bottom: 8px;
     padding-left: 8px;
   }
+
   th:first-child,
   td:first-child {
     padding-left: 0;

assets/stylesheets/common/subscribe.scss

@@ -23,14 +23,11 @@
 
 .StripeElement {
   box-sizing: border-box;
-
   padding: 10px;
   height: 40px;
   margin-bottom: 9px;
-
   border: 1px solid var(--primary-medium);
   background-color: var(--secondary);
-
   font-size: $base-font-size;
   font-family: $base-font-family;
 }
@@ -68,6 +65,7 @@
   .address-fields {
     display: flex;
     justify-content: space-between;
+
     & > input,
     & > .select-kit {
       width: calc(50% - 4.5px);

assets/stylesheets/mobile/main.scss

@@ -1,6 +1,7 @@
 .mobile-view {
   .product-list {
     flex-flow: column nowrap;
+
     .product {
       width: unset;
     }

package.json

@@ -1,10 +1,11 @@
 {
   "private": true,
   "devDependencies": {
-    "@discourse/lint-configs": "2.4.0",
-    "ember-template-lint": "6.1.0",
-    "eslint": "9.19.0",
-    "prettier": "2.8.8"
+    "@discourse/lint-configs": "2.11.1",
+    "ember-template-lint": "7.0.1",
+    "eslint": "9.22.0",
+    "prettier": "3.5.3",
+    "stylelint": "16.16.0"
   },
   "engines": {
     "node": ">= 22",

stylelint.config.mjs

@@ -0,0 +1,3 @@
+export default {
+  extends: ["@discourse/lint-configs/stylelint"],
+};

test/javascripts/integration/components/payment-options-test.gjs

@@ -35,12 +35,14 @@ module("Subscriptions | payment-options", function (hooks) {
 
     const testState = new State();
 
-    await render(<template>
-      <PaymentOptions
-        @plans={{plans}}
-        @selectedPlan={{testState.selectedPlan}}
-      />
-    </template>);
+    await render(
+      <template>
+        <PaymentOptions
+          @plans={{plans}}
+          @selectedPlan={{testState.selectedPlan}}
+        />
+      </template>
+    );
 
     assert.dom(".btn-discourse-subscriptions-subscribe").exists({ count: 2 });
 

test/javascripts/integration/components/payment-plan-test.gjs

@@ -16,9 +16,11 @@ module("Subscriptions | payment-plan", function (hooks) {
     };
     let selectedPlan;
 
-    await render(<template>
-      <PaymentPlan @plan={{plan}} @selectedPlan={{selectedPlan}} />
-    </template>);
+    await render(
+      <template>
+        <PaymentPlan @plan={{plan}} @selectedPlan={{selectedPlan}} />
+      </template>
+    );
 
     assert
       .dom(".btn-discourse-subscriptions-subscribe")
@@ -46,9 +48,11 @@ module("Subscriptions | payment-plan", function (hooks) {
 
     const testState = new State();
 
-    await render(<template>
-      <PaymentPlan @plan={{plan}} @selectedPlan={{testState.selectedPlan}} />
-    </template>);
+    await render(
+      <template>
+        <PaymentPlan @plan={{plan}} @selectedPlan={{testState.selectedPlan}} />
+      </template>
+    );
 
     assert
       .dom(".btn-discourse-subscriptions-subscribe:first-child .interval")