Implement Stylelint linting of CSS logical properties

.stylelintrc.json

@@ -1,6 +1,5 @@
 {
-  "plugins": ["stylelint-high-performance-animation", "@double-great/stylelint-a11y"],
-  "extends": ["stylelint-config-standard", "stylelint-config-sass-guidelines"],
+  "plugins": ["stylelint-use-logical-spec"],
   "overrides": [
     {
       "files": ["**/*.scss"],
@@ -17,17 +16,6 @@
     }
   ],
   "rules": {
-    "selector-class-pattern": null,
-    "selector-id-pattern": null,
-    "plugin/no-low-performance-animation-properties": null,
-    "selector-pseudo-class-no-unknown": [
-      true,
-      {
-        "ignorePseudoClasses": ["deep"]
-      }
-    ],
-    "a11y/no-outline-none": true,
-    "a11y/selector-pseudo-class-focus": true,
-    "a11y/font-size-is-readable": true
+    "liberty/use-logical-spec": ["always", { "except": ["float"] }]
   }
 }

lefthook.yml

@@ -3,13 +3,18 @@
 pre-commit:
   parallel: true
   commands:
-    lint:
+    eslint:
       # Only runs when any file with filename
       # matching the glob is being committed
       glob: "*.{js,vue}"
       run: yarn run eslint --no-color {staged_files}
       skip:
         - rebase
+    stylelint:
+      glob: "*.{css,scss}"
+      run: yarn stylelint --no-color --allow-empty-input {staged_files}
+      skip:
+        - rebase
 
 # EXAMPLE USAGE
 #

package.json

@@ -33,15 +33,14 @@
     "dev-runner": "node _scripts/dev-runner.js",
     "get-instances": "node _scripts/getInstances.js",
     "get-regions": "node _scripts/getRegions.mjs",
-    "lint-all": "run-p lint lint-json lint-style",
-    "lint-fix": "eslint --fix --ext .js,.vue ./",
-    "lint": "eslint --ext .js,.vue ./",
+    "lint-all": "run-p lint lint-json",
+    "lint": "run-p eslint-lint lint-style",
+    "lint-fix": "run-p eslint-lint-fix lint-style-fix",
+    "eslint-lint": "eslint --ext .js,.vue ./",
+    "eslint-lint-fix": "eslint --fix --ext .js,.vue ./",
     "lint-json": "eslint --ext .json ./",
-    "lint-style": "run-p lint-style:scss lint-style:css",
-    "lint-style:scss": "stylelint \"**/*.scss\"",
-    "lint-style:css": "stylelint \"**/*.css\"",
-    "lint-style-fix:scss": "stylelint --fix \"**/*.scss\"",
-    "lint-style-fix:css": "stylelint --fix \"**/*.css\"",
+    "lint-style": "stylelint \"**/*.{css,scss}\"",
+    "lint-style-fix": "stylelint --fix \"**/*.{css,scss}\"",
     "lint-yml": "eslint --ext .yml,.yaml ./",
     "pack": "run-p pack:main pack:renderer",
     "pack:main": "webpack --mode=production --node-env=production --config _scripts/webpack.main.config.js",
@@ -66,6 +65,7 @@
     "marked": "^8.0.0",
     "path-browserify": "^1.0.1",
     "process": "^0.11.10",
+    "stylelint-use-logical-spec": "^5.0.0",
     "video.js": "7.21.5",
     "videojs-contrib-quality-levels": "^3.0.0",
     "videojs-http-source-selector": "^1.1.6",

src/renderer/App.css

@@ -7,7 +7,7 @@
   display: flex;
   flex-wrap: wrap;
   font-family: 'Roboto', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  height: 100%;
+  block-size: 100%;
 }
 
 .routerView {
@@ -17,7 +17,7 @@
 }
 
 .banner {
-  width: 85%;
+  inline-size: 85%;
   margin-block: 20px;
   margin-inline: auto;
 }
@@ -35,7 +35,7 @@
 
 #changeLogText {
   overflow-y: scroll;
-  height: 40vh;
+  block-size: 40vh;
   display: block
 }
 
@@ -53,7 +53,7 @@
   }
 
   .banner {
-    width: 80%;
+    inline-size: 80%;
     margin-block-start: 20px;
   }
 

src/renderer/components/download-settings/download-settings.css

@@ -1,3 +1,3 @@
 .folderDisplay {
-  width: 50vh;
+  inline-size: 50vh;
 }

src/renderer/components/ft-age-restricted/ft-age-restricted.scss

@@ -6,16 +6,16 @@
     padding-block: 10px;
     padding-inline: 0;
     text-align: center;
-    width: 100%;
+    inline-size: 100%;
   }
 
   .frown {
     background-color: var(--card-bg-color);
     font-size: 10em;
-    height: 100%;
+    block-size: 100%;
     padding-block: 20px;
     padding-inline: 0;
     text-align: center;
-    width: 100%;
+    inline-size: 100%;
   }
 }

src/renderer/components/ft-button/ft-button.css

@@ -1,6 +1,6 @@
 .btn {
   font-family: 'Roboto', sans-serif;
-  min-width: 100px;
+  min-inline-size: 100px;
   font-size: 0.9rem;
   padding-block: 10px;
   padding-inline: 20px;
@@ -35,8 +35,8 @@
   content: "";
   display: block;
   position: absolute;
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
   inset-block-start: 0;
   inset-inline-start: 0;
   pointer-events: none;

src/renderer/components/ft-channel-bubble/ft-channel-bubble.css

@@ -1,7 +1,7 @@
 .bubblePadding {
   position: relative;
-  width: 100px;
-  height: 100px;
+  inline-size: 100px;
+  block-size: 100px;
   padding: 10px;
   cursor: pointer;
   display: flex;
@@ -26,8 +26,8 @@
 }
 
 .bubble {
-  width: 50px;
-  height: 50px;
+  inline-size: 50px;
+  block-size: 50px;
   border-radius: 100%;
   -webkit-border-radius: 100%;
 }
@@ -52,5 +52,5 @@
   overflow: hidden;
   text-align: center;
   text-overflow: ellipsis;
-  width: 100%;
+  inline-size: 100%;
 }

src/renderer/components/ft-community-poll/ft-community-poll.css

@@ -10,22 +10,22 @@
   border-width: 2px;
   display: block;
   float: var(--float-left-ltr-rtl-value);
-  height: 10px;
+  block-size: 10px;
   inset-inline-start: 5px;
   position: relative;
   inset-block-start: 8px;
-  width: 10px;
+  inline-size: 10px;
 }
 
 .filled-circle {
   border-radius: 50%;
   background-color: black;
   float: var(--float-left-ltr-rtl-value);
-  height: 6px;
+  block-size: 6px;
   inset-inline-start: 2px;
   inset-block-start: 2px;
   position: relative;
-  width: 6px;
+  inline-size: 6px;
 }
 
 .option-text {

src/renderer/components/ft-community-post/ft-community-post.scss

@@ -3,9 +3,9 @@
 
 .outside {
   margin: auto;
-  width: 40%;
+  inline-size: 40%;
   @media screen and (max-width: 768px) {
-    width: 100%;
+    inline-size: 100%;
   }
 }
 
@@ -14,16 +14,16 @@
 }
 
 .communityImage {
-  height: 100%;
-  width: 100%;
+  block-size: 100%;
+  inline-size: 100%;
 }
 
 .communityThumbnail {
   -webkit-border-radius: 50%;
   border-radius: 50%;
-  height: 55px;
+  block-size: 55px;
   margin-inline-end: 5px;
-  width: 55px;
+  inline-size: 55px;
 }
 
 .author-div {
@@ -54,7 +54,7 @@
   flex-direction: column;
   font-size: 15px;
   margin-block-start: 4px;
-  max-width: 210px;
+  max-inline-size: 210px;
   text-align: start;
 
   @media screen and (max-width: 680px) {
@@ -64,7 +64,7 @@
 
   .likeBar {
     border-radius: 4px;
-    height: 8px;
+    block-size: 8px;
     margin-block-end: 4px;
   }
 
@@ -82,19 +82,19 @@
     margin-block-end: auto;
     margin-block-start: auto;
     position: relative;
-    width: fit-content;
+    inline-size: fit-content;
 
     .thumbnailImage {
       display: block;
-      height: auto;
-      max-width: 100%;
-      width: auto;
+      block-size: auto;
+      max-inline-size: 100%;
+      inline-size: auto;
     }
   }
 
   .playlistText {
     margin-inline-start: 10px;
-    width: 50%;
+    inline-size: 50%;
     word-wrap: break-word;
 
     .playlistAuthor {
@@ -115,20 +115,20 @@
       font-size: small;
       padding-block-start: 10px;
       text-decoration-line: none;
-      width: 100%;
+      inline-size: 100%;
     }
 
     .playlistPreviewVideoTitle {
       display: block;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      width: 100%;
+      inline-size: 100%;
     }
   }
 }
 
 .ft-list-item.grid {
-  min-height: 0 !important;
+  min-block-size: 0 !important;
   padding-block-end: 20px;
 }

src/renderer/components/ft-community-post/slider-style.css

@@ -5,7 +5,7 @@
 .tns-nav button {
   background-color: #ddd;
   border-radius: 50%;
-  height: 1.5em;
+  block-size: 1.5em;
   padding: 0;
-  width: 1.5em;
+  inline-size: 1.5em;
 }

src/renderer/components/ft-element-list/ft-element-list.css

@@ -1,3 +1,3 @@
 .maxWidth {
-  width: 100%;
+  inline-size: 100%;
 }

src/renderer/components/ft-icon-button/ft-icon-button.scss

@@ -11,9 +11,9 @@
 .iconButton {
   border-radius: 50%;
   cursor: pointer;
-  height: 1em;
+  block-size: 1em;
   transition: background 0.15s ease-out;
-  width: 1em;
+  inline-size: 1em;
 
   &.shadow {
     box-shadow: 0 1px 2px rgb(0 0 0 / 50%);
@@ -144,6 +144,6 @@
     margin-inline: auto;
     // Too "visible" with current color
     opacity: 0.5;
-    width: 95%;
+    inline-size: 95%;
   }
 }

src/renderer/components/ft-input-tags/ft-input-tags.css

@@ -4,7 +4,7 @@
   padding: 20px;
   border-radius: 5px;
   display: block;
-  width: 60%;
+  inline-size: 60%;
 }
 
 .ft-tag-box ul {
@@ -49,6 +49,6 @@
 
 @media only screen and (max-width: 576px) {
   .ft-input-tags-component {
-    width: 100%;
+    inline-size: 100%;
   }
 }

src/renderer/components/ft-input/ft-input.css

@@ -96,12 +96,12 @@
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   outline: none;
-  width: 100%;
+  inline-size: 100%;
   padding: 1rem;
   border: none;
   margin-block-end: 10px;
   font-size: 16px;
-  height: 45px;
+  block-size: 45px;
   color: var(--secondary-text-color);
   border-radius: 5px;
   background-color: var(--search-bar-color);
@@ -195,7 +195,7 @@
 
 .list {
   position: absolute;
-  width: 100%;
+  inline-size: 100%;
   list-style: none;
   margin: 0;
   padding-block: 5px;

src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.css

@@ -1,7 +1,7 @@
 .grid {
-  min-height: 264px;
+  min-block-size: 264px;
 }
 
 .list {
-  min-height: 131px;
+  min-block-size: 131px;
 }