Fix sass mixed declarations deprecation warning

https://sass-lang.com/documentation/breaking-changes/mixed-decls/
Chocobozzz · Aug 19, 2024 · c5b6652 · c5b6652
1 parent 1261bdf
commit c5b6652
Show file tree

Hide file tree

Showing 143 changed files with 797 additions and 830 deletions.
diff --git a/client/.stylelintrc.json b/client/.stylelintrc.json
@@ -1,18 +1,55 @@
 {
   "extends": "stylelint-config-sass-guidelines",
+  "plugins": [
+    "stylelint-order"
+  ],
   "rules": {
+    "declaration-empty-line-before": [
+      "always",
+      {
+        "except": [
+          "first-nested"
+        ],
+        "ignore": [ "after-declaration", "after-comment" ]
+      }
+    ],
+    "at-rule-empty-line-before": [
+      "always",
+      {
+        "except": [
+          "first-nested",
+          "blockless-after-blockless"
+        ],
+        "ignore": [ "after-comment" ],
+        "ignoreAtRules": [ "else" ]
+      }
+    ],
+    "order/order": [
+      "custom-properties",
+      "declarations",
+      {
+        "type": "at-rule",
+        "name": "include"
+      }
+    ],
+    "scss/selector-no-redundant-nesting-selector": null,
     "scss/at-import-no-partial-leading-underscore": null,
     "color-hex-length": null,
     "selector-pseudo-element-no-unknown": [
       true,
       {
-        "ignorePseudoElements": [ "ng-deep" ]
+        "ignorePseudoElements": [
+          "ng-deep"
+        ]
       }
     ],
     "max-nesting-depth": [
       8,
       {
-        "ignore": [ "blockless-at-rules", "pseudo-classes" ]
+        "ignore": [
+          "blockless-at-rules",
+          "pseudo-classes"
+        ]
       }
     ],
     "selector-max-compound-selectors": 9,
@@ -25,7 +62,10 @@
     "property-no-vendor-prefix": [
       true,
       {
-        "ignoreProperties": [ "mask-image", "mask-size" ]
+        "ignoreProperties": [
+          "mask-image",
+          "mask-size"
+        ]
       }
     ]
   }

diff --git a/client/package.json b/client/package.json
@@ -115,6 +115,7 @@
     "socket.io-client": "^4.5.4",
     "stylelint": "^16.2.1",
     "stylelint-config-sass-guidelines": "^11.0.0",
+    "stylelint-order": "^6.0.4",
     "tinykeys": "^2.1.0",
     "ts-node": "^10.9.2",
     "tslib": "^2.4.0",

diff --git a/client/src/app/+about/about-instance/about-instance.component.scss b/client/src/app/+about/about-instance/about-instance.component.scss
@@ -14,28 +14,28 @@
 }
 
 .middle-title {
+  margin-top: 0;
+
   @include in-content-small-title;
   @include margin-bottom(1.5rem);
-
-  margin-top: 0;
 }
 
 .block {
   @include margin-bottom(4.5rem);
 }
 
 .anchor-link {
-  @include disable-outline;
-
   position: relative;
 
+  @include disable-outline;
+
   &:hover,
   &:active {
     &::after {
-      @include margin-left(0.2em);
-
       content: '#';
       display: inline-block;
+
+      @include margin-left(0.2em);
     }
   }
 

diff --git a/client/src/app/+about/about-instance/contact-admin-modal.component.scss b/client/src/app/+about/about-instance/contact-admin-modal.component.scss
@@ -12,8 +12,6 @@
 
 input[type=text] {
   @include peertube-input-text(340px);
-
-  display: block;
 }
 
 textarea {

diff --git a/client/src/app/+about/about-peertube/about-peertube.component.scss b/client/src/app/+about/about-peertube/about-peertube.component.scss
@@ -8,9 +8,9 @@
 }
 
 .card {
-  @include margin(2rem);
-
   flex-basis: 300px;
+
+  @include margin(2rem);
 }
 
 .card-title {

diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
@@ -8,16 +8,16 @@
 }
 
 .channel {
-  @include padding(1.75rem);
-  @include margin(2rem, 0);
-
   max-width: $max-channels-width;
   background-color: pvar(--channelBackgroundColor);
 
   display: grid;
   grid-template-columns: 1fr auto;
   grid-template-rows: auto auto;
   column-gap: 15px;
+
+  @include padding(1.75rem);
+  @include margin(2rem, 0);
 }
 
 .channel-avatar-row {
@@ -29,16 +29,16 @@
   grid-template-rows: auto 1fr;
 
   my-actor-avatar {
-    @include margin-right(15px);
-
     grid-column: 1;
     grid-row: 1 / 3;
+
+    @include margin-right(15px);
   }
 
   a {
-    @include peertube-word-wrap;
-
     color: pvar(--mainForegroundColor);
+
+    @include peertube-word-wrap;
   }
 
   h2 {
@@ -47,20 +47,20 @@
   }
 
   .actor-counters {
-    @include margin-left(15px);
-    @include actor-counters;
-
     grid-row: 1;
     grid-column: 3;
+
+    @include margin-left(15px);
+    @include actor-counters;
   }
 
   .description-html {
-    @include fade-text(50px, pvar(--channelBackgroundColor));
-
     grid-column: 2 / 4;
     grid-row: 2;
 
     max-height: 80px;
+
+    @include fade-text(50px, pvar(--channelBackgroundColor));
   }
 }
 
@@ -77,18 +77,18 @@ my-subscribe-button {
   position: relative;
 
   my-video-miniature {
-    @include margin-right(15px);
-
     min-width: $video-thumbnail-medium-width;
     max-width: $video-thumbnail-medium-width;
+
+    @include margin-right(15px);
   }
 
 }
 
 .videos-overflow-workaround {
-  @include margin-top(2rem);
-
   overflow-x: hidden;
+
+  @include margin-top(2rem);
 }
 
 .miniature-show-channel {

diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss
@@ -13,12 +13,12 @@
 }
 
 .links {
-  @include grid-videos-miniature-margins;
-
   display: flex;
   justify-content: space-between;
   align-items: center;
 
+  @include grid-videos-miniature-margins;
+
   &.on-channel-page {
     max-width: $max-channels-width;
   }
@@ -33,16 +33,16 @@ my-copy-button {
 }
 
 .account-info {
+  grid-template-columns: 1fr min-content;
+  grid-template-rows: auto auto;
+
+  background-color: pvar(--submenuBackgroundColor);
+
   @include grid-videos-miniature-margins(false, 15px);
   @include padding-top(3.75rem);
   @include padding-bottom(3.75rem);
   @include margin-bottom(3rem);
   @include font-size(1rem);
-
-  grid-template-columns: 1fr min-content;
-  grid-template-rows: auto auto;
-
-  background-color: pvar(--submenuBackgroundColor);
 }
 
 .account-avatar-row {
@@ -60,10 +60,10 @@ my-copy-button {
 }
 
 .show-more {
+  text-align: center;
+
   @include show-more-description;
   @include padding-bottom(3.75rem);
-
-  text-align: center;
 }
 
 .buttons {
@@ -91,9 +91,9 @@ my-copy-button {
 @media screen and (max-width: $small-view) {
 
   .description:not(.expanded) {
-    @include fade-text(30px, pvar(--submenuBackgroundColor));
-
     max-height: 70px;
+
+    @include fade-text(30px, pvar(--submenuBackgroundColor));
   }
 
   .buttons {

diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
@@ -25,8 +25,6 @@ my-markdown-textarea {
 input[type=text],
 input[type=number] {
   @include peertube-input-text($form-base-input-width);
-
-  display: block;
 }
 
 .number-with-unit {
@@ -60,22 +58,22 @@ input[type=checkbox] {
 my-select-options,
 my-select-custom-value,
 my-select-checkbox {
-  @include responsive-width($form-base-input-width);
-
   display: block;
+
+  @include responsive-width($form-base-input-width);
 }
 
 input[type=submit] {
+  display: flex;
+
   @include peertube-button;
   @include orange-button;
   @include margin-left(auto);
 
-  display: flex;
-
   + .form-error {
-    @include margin-left(5px);
-
     display: inline;
+
+    @include margin-left(5px);
   }
 }
 
@@ -85,11 +83,11 @@ input[type=submit] {
 }
 
 textarea {
-  @include peertube-textarea(500px, 150px);
-
   max-width: 100%;
   display: block;
 
+  @include peertube-textarea(500px, 150px);
+
   &.small {
     height: 75px;
   }
@@ -136,15 +134,15 @@ ngb-tabset:not(.previews) ::ng-deep {
   justify-content: right;
 
   .callout-link {
-    @include peertube-button-link;
-
     position: relative;
     right: 3.3em;
     top: .3em;
     font-size: 90%;
     color: pvar(--mainColor);
     background-color: pvar(--mainBackgroundColor);
     padding: 0 .3em;
+
+    @include peertube-button-link;
   }
 }
 

diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.scss b/client/src/app/+admin/follows/followers-list/followers-list.component.scss
@@ -2,9 +2,10 @@
 @use '_mixins' as *;
 
 a {
-  @include disable-default-a-behaviour;
   display: inline-block;
 
+  @include disable-default-a-behaviour;
+
   &,
   &:hover {
     color: pvar(--mainForegroundColor);

diff --git a/client/src/app/+admin/follows/following-list/following-list.component.scss b/client/src/app/+admin/follows/following-list/following-list.component.scss
@@ -2,9 +2,10 @@
 @use '_mixins' as *;
 
 a {
-  @include disable-default-a-behaviour;
   display: inline-block;
 
+  @include disable-default-a-behaviour;
+
   &,
   &:hover {
     color: pvar(--mainForegroundColor);

diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss
@@ -2,9 +2,10 @@
 @use '_mixins' as *;
 
 a {
-  @include disable-default-a-behaviour;
   display: inline-block;
 
+  @include disable-default-a-behaviour;
+
   &,
   &:hover {
     color: pvar(--mainForegroundColor);