lint: Add SCSS linting

* lint as much as possible without breaking anything

Signed-off-by: eXhumer <[email protected]>

.stylelintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": "stylelint-config-standard-scss",
+  "rules": {
+    "selector-class-pattern": null
+  }
+}

package.json

@@ -11,6 +11,8 @@
     "make": "electron-forge make",
     "publish": "electron-forge publish",
     "lint": "eslint --ext .ts,.tsx .",
+    "lint:scss": "stylelint \"**/*.scss\"",
+    "lint:scss:fix": "stylelint \"**/*.scss\" --fix",
     "patch-dev": " yarn redeploy-electron-dev && yarn vmp-sign-dev",
     "redeploy-electron-dev": "ts-node scripts/redeploy-electron-dev.ts",
     "vmp-sign-dev": "ts-node scripts/vmp-sign-dev.ts"
@@ -23,10 +25,10 @@
     "@electron-forge/plugin-fuses": "^7.4.0",
     "@electron-forge/plugin-webpack": "^7.4.0",
     "@electron/fuses": "^1.8.0",
-    "@types/react": "^18.3.3",
+    "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.1.0",
-    "@typescript-eslint/parser": "^8.1.0",
+    "@typescript-eslint/eslint-plugin": "^8.2.0",
+    "@typescript-eslint/parser": "^8.2.0",
     "@vercel/webpack-asset-relocator-loader": "1.7.3",
     "css-loader": "^7.1.2",
     "dotenv": "^16.4.5",
@@ -36,8 +38,10 @@
     "fork-ts-checker-webpack-plugin": "^9.0.2",
     "node-loader": "^2.0.0",
     "sass": "1.77.6",
-    "sass-loader": "^16.0.0",
+    "sass-loader": "^16.0.1",
     "style-loader": "^4.0.0",
+    "stylelint": "^16.8.2",
+    "stylelint-config-standard-scss": "^13.1.0",
     "ts-loader": "^9.5.1",
     "ts-node": "^10.9.2",
     "typescript": "~5.5.4",

src/MainWindow/React/CustomBootstrap.scss

@@ -3,6 +3,6 @@
 
 // Include any default variable overrides here (though functions won't be available)
 
-@import "~bootstrap/scss/bootstrap";
+@import "bootstrap/scss/bootstrap";
 
 // Then add additional custom code here

src/Player/React/Component/BitmovinPlayer.scss

@@ -25,6 +25,5 @@
 }
 
 .bmpui-ui-rewindbutton:hover, .bmpui-ui-forwardbutton:hover {
-  -webkit-filter: drop-shadow(0 0 1px #fff);
   filter: drop-shadow(0 0 1px #fff);
 }

src/Player/React/Skin/SkinModern/_mixins.scss

@@ -45,15 +45,19 @@
  */
 @mixin hidden-animated-with-additional-transitions($duration: $animation-duration, $transitions: ()) {
   $transitions-string: hidden-animated-transition($duration);
+
   @each $property, $property-options in $transitions {
     $property-settings: $property;
+
     @each $option in $property-options {
       $property-settings: $property-settings $option;
     }
+
     $transitions-string: $transitions-string, $property-settings;
   }
 
   @include hidden-animated($duration);
+
   transition: $transitions-string;
 }
 
@@ -100,7 +104,6 @@
   }
 
   // Animate hide
-  // sass-lint:disable force-element-nesting
   &.#{$prefix}-hidden #{$inner-selector} {
     max-height: 0;
     transition: max-height $duration ease-out;

src/Player/React/Skin/SkinModern/_skin-ads.scss

@@ -1,6 +1,5 @@
 @import 'variables';
 
-// sass-lint:disable nesting-depth
 .#{$prefix}-ui-skin-ads {
 
   .#{$prefix}-ui-ads-status {

src/Player/React/Skin/SkinModern/_skin-cast-receiver.scss

@@ -1,7 +1,6 @@
 @import 'variables';
 
 .#{$prefix}-ui-skin-cast-receiver {
-
   $background-color: transparentize($color-background, .15);
   $overscan-margin: 10%;
 
@@ -65,7 +64,6 @@
         opacity: .7;
       }
 
-      // sass-lint:disable force-element-nesting
       &.#{$prefix}-on .#{$prefix}-image,
       &.#{$prefix}-off .#{$prefix}-image {
         animation: none;

src/Player/React/Skin/SkinModern/_skin-smallscreen.scss

@@ -68,7 +68,6 @@
   }
 
   // When casting, also display pause icon and disable animations because the transition doesn't look right
-  // sass-lint:disable nesting-depth
   &.#{$prefix}-remote-control {
     .#{$prefix}-ui-hugeplaybacktogglebutton {
       &.#{$prefix}-on {
@@ -114,14 +113,12 @@
   }
 
   // Adjustments for screen width x <= 600
-  // sass-lint:disable no-empty-rulesets
   &.#{$prefix}-layout-max-width-400,
   &.#{$prefix}-layout-max-width-600 {
     // none yet
   }
 
   // IE9 compatibility: fallback for missing flexbox support
-  // sass-lint:disable nesting-depth
   &.#{$prefix}-no-flexbox {
     .#{$prefix}-ui-titlebar {
       > .#{$prefix}-container-wrapper {

src/Player/React/Skin/SkinModern/_skin.scss

@@ -74,7 +74,6 @@
     text-align: right;
   }
 
-  // sass-lint:disable force-element-nesting
   &.#{$prefix}-layout-max-width-400 {
     // Hide the description in ultra tiny players to not clog the UI too much
     .#{$prefix}-ui-titlebar .#{$prefix}-label-metadata-description {

src/Player/React/Skin/SkinModern/_variables.scss

@@ -1,10 +1,10 @@
 $prefix: 'bmpui' !default;
 
 $color-black: #000 !default;
-$color-transparent: rgba(0, 0, 0, 0) !default;
+$color-transparent: rgb(0 0 0 / 0%) !default;
 $color-red: #f00 !default;
 
-$color-highlight: #ff0000 !default;
+$color-highlight: #f00 !default;
 $color-primary: #fff !default;
 $color-secondary: #999 !default;
 

src/Player/React/Skin/SkinModern/components/_bufferingoverlay.scss

@@ -15,7 +15,6 @@
 .#{$prefix}-ui-buffering-overlay {
   @extend %ui-container;
   @extend %center-items-in-overlay;
-
   @include layout-cover;
   @include hidden-animated($animation-duration * 2);
 

src/Player/React/Skin/SkinModern/components/_caststatusoverlay.scss

@@ -3,7 +3,6 @@
 
 .#{$prefix}-ui-cast-status-overlay {
   @extend %ui-container;
-
   @include layout-cover;
   @include hidden-animated;
 

src/Player/React/Skin/SkinModern/components/_clickoverlay.scss

@@ -6,6 +6,5 @@
 
 .#{$prefix}-ui-clickoverlay {
   @extend %ui-clickoverlay;
-
   @include layout-cover;
 }

src/Player/React/Skin/SkinModern/components/_component.scss

@@ -2,7 +2,7 @@
 
 %ui-component {
   /*! placeholder to avoid removal of empty selector */
-  //outline: 1px solid red;
+  // outline: 1px solid red;
   outline: 0;
 }
 

src/Player/React/Skin/SkinModern/components/_controlbar.scss

@@ -3,7 +3,6 @@
 
 .#{$prefix}-ui-controlbar {
   @extend %ui-container;
-
   @include hidden-animated-focusable;
   @include layout-align-bottom;
 
@@ -44,7 +43,6 @@
 }
 
 // IE9 compatibility: fallback for missing flexbox support
-// sass-lint:disable nesting-depth
 .#{$prefix}-no-flexbox {
   .#{$prefix}-ui-controlbar {
     .#{$prefix}-controlbar-top,

src/Player/React/Skin/SkinModern/components/_errormessageoverlay.scss

@@ -3,7 +3,6 @@
 
 .#{$prefix}-ui-errormessage-overlay {
   @extend %ui-container;
-
   @include layout-cover;
   @include hidden;
 
@@ -22,8 +21,6 @@
 
     // Vertically center the label
     & {
-      // sass-lint:disable no-vendor-prefixes
-      -ms-transform: translateY(-50%); // required for IE9
       top: 50%;
       transform: translateY(-50%);
     }

src/Player/React/Skin/SkinModern/components/_label.scss

@@ -2,7 +2,6 @@
 
 %ui-label {
   @extend %ui-component;
-
   @include hidden;
 
   cursor: default;

src/Player/React/Skin/SkinModern/components/_recommendationoverlay.scss

@@ -3,7 +3,6 @@
 
 .#{$prefix}-ui-recommendation-overlay {
   @extend %ui-container;
-
   @include layout-cover;
   @include layout-center-children-in-container;
   @include hidden-animated($animation-duration * 2);

src/Player/React/Skin/SkinModern/components/_seekbar.scss

@@ -5,7 +5,6 @@ $seekbar-height: .3125em;
 
 %ui-seekbar {
   @extend %ui-component;
-
   @include hidden;
   @include focusable;
 
@@ -20,30 +19,26 @@ $seekbar-height: .3125em;
   .#{$prefix}-seekbar {
 
     %bar {
-      // sass-lint:disable no-vendor-prefixes
-      -ms-transform-origin: 0 0; // required for IE9
-      -webkit-transform-origin: 0 0; // required for Android 4.4 WebView
-      bottom: 0;
       box-sizing: border-box;
       height: $seekbar-height;
-      left: 0;
       margin: auto;
       position: absolute;
-      right: auto;
-      top: 0;
       transform-origin: 0 0;
       width: 100%;
+      inset: 0 auto 0 0;
     }
 
     .#{$prefix}-seekbar-backdrop {
       @extend %bar;
+
       background-color: transparentize($color-primary, .8);
       margin: $bar-inset 0;
       width: 100%;
     }
 
     .#{$prefix}-seekbar-bufferlevel {
       @extend %bar;
+
       background-color: $color-primary;
       margin: $bar-inset 0;
       transition: .3s linear, .3s linear;
@@ -52,12 +47,14 @@ $seekbar-height: .3125em;
 
     .#{$prefix}-seekbar-seekposition {
       @extend %bar;
+
       background-color: transparentize($color-primary, .8);
       margin: $bar-inset 0;
     }
 
     .#{$prefix}-seekbar-playbackposition {
       @extend %bar;
+
       background-color: $color-highlight;
       margin: $bar-inset 0;
       transition: .1s linear, .1s linear;
@@ -112,7 +109,7 @@ $seekbar-height: .3125em;
 
   &.#{$prefix}-vertical {
     .#{$prefix}-seekbar {
-      //overflow-y: hidden;
+      // overflow-y: hidden;
       height: 100%;
       width: auto;
 
@@ -122,7 +119,7 @@ $seekbar-height: .3125em;
       }
 
       %positionmarker-vertical {
-        //@extend %positionmarker-horizontal;
+        // @extend %positionmarker-horizontal;
 
         .#{$prefix}-seekbar-playbackposition-marker {
           height: 1em;

src/Player/React/Skin/SkinModern/components/_seekbarlabel.scss

@@ -2,7 +2,6 @@
 
 .#{$prefix}-ui-seekbar-label {
   @extend %ui-container;
-
   @include hidden-animated;
 
   bottom: 100%;

src/Player/React/Skin/SkinModern/components/_selectbox.scss

@@ -3,7 +3,6 @@
 
 .#{$prefix}-ui-selectbox {
   @extend %ui-component;
-
   @include focusable;
 
   background-color: transparent;

src/Player/React/Skin/SkinModern/components/_settingspanel.scss

@@ -3,7 +3,6 @@
 
 %ui-settings-panel {
   @extend %ui-container;
-
   @include hidden-animated-with-additional-transitions($animation-duration,
     (
       height: (.35s, cubic-bezier(.4, 0, .2, 1)),

src/Player/React/Skin/SkinModern/components/_subtitleoverlay-cea608.scss

@@ -1,16 +1,9 @@
 .#{$prefix}-ui-subtitle-overlay {
   &.#{$prefix}-cea608 {
-
-    bottom: 2em;
-    left: 3em;
-    right: 3em;
-    top: 2em;
+    inset: 2em 3em;
 
     .#{$prefix}-subtitle-region-container.#{$prefix}-subtitle-position-default {
-      bottom: 0;
-      left: 0;
-      right: 0;
-      top: 0;
+      inset: 0;
     }
 
     .#{$prefix}-ui-subtitle-label {
@@ -19,7 +12,6 @@
       position: absolute;
       text-transform: uppercase;
 
-      // sass-lint:disable force-pseudo-nesting nesting-depth
       &:nth-child(1n-1)::after {
         content: normal;
         white-space: normal;

src/Player/React/Skin/SkinModern/components/_subtitleoverlay.scss

@@ -4,17 +4,13 @@
 .#{$prefix}-ui-uicontainer {
   .#{$prefix}-ui-subtitle-overlay {
     @extend %ui-container;
-
     @include hidden;
 
-    bottom: 0;
     font-size: 1.2em;
-    left: 0;
     pointer-events: none;
     position: absolute;
-    right: 0;
     text-align: center;
-    top: 0;
+    inset: 0;
     transition: bottom $animation-duration-short ease-out;
 
     * {
@@ -54,9 +50,9 @@
       height: fit-content;
 
       // Break labels into separate lines
-      // sass-lint:disable force-pseudo-nesting
       &:nth-child(1n-1)::after {
         content: '\A';
+
         // VTT flex styling can increase this elements height, making the background larger
         height: 0;
         white-space: pre-line;

src/Player/React/Skin/SkinModern/components/_titlebar.scss

@@ -3,7 +3,6 @@
 
 .#{$prefix}-ui-titlebar {
   @extend %ui-container;
-
   @include hidden-animated-focusable;
   @include layout-align-top;