[Dev] Introduce stylelint (#1706)

Co-authored-by: Alexander Zinchuk <alx.zinchuk@gmail.com>
Co-authored-by: Anton Korenskoy <anton@korenskoy.ru>

.stylelintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": "stylelint-config-recommended-scss",
+  "rules": {
+    "no-descending-specificity": null
+  }
+}

package.json

@@ -10,8 +10,8 @@
     "build:production": "npm i && rm -rf dist/ && APP_VERSION=$(npm run inc_version --silent) APP_ENV=production npm run build && ./deploy/copy_to_dist.sh",
     "deploy:production": "npm run build:production && git add -A && git commit -a -m '[Build]' --no-verify && git push",
     "inc_version": "echo $((`cat .patch-version` + 1)) > .patch-version && echo \"$(node -p -e \"require('./package.json').version.match(/^\\d+\\.\\d+/)[0]\").$(cat .patch-version)\"",
-    "lint": "tsc && eslint . --ext .ts,.tsx --ignore-pattern src/lib/gramjs",
+    "lint": "tsc && stylelint \"**/*.{css,scss}\" && eslint . --ext .ts,.tsx --ignore-pattern src/lib/gramjs",
-    "lint:fix": "npm run lint -- --fix",
+    "lint:fix": "stylelint . && npm run lint -- --fix",
     "gramjs:tl": "node ./src/lib/gramjs/tl/generateModules.js",
     "gramjs:lint:fix": "eslint ./src/lib/gramjs --fix",
     "test": "cross-env APP_ENV=test jest --verbose --forceExit",
@@ -27,7 +27,8 @@
     }
   },
   "lint-staged": {
-    "*.{ts,tsx,js}": "eslint --fix"
+    "*.{ts,tsx,js}": "eslint --fix",
+    "*.{css,scss}": "stylelint --fix"
   },
   "author": "Alexander Zinchuk (alexander@zinchuk.com)",
   "license": "GPL-3.0-or-later",
@@ -85,6 +86,8 @@
     "sass": "^1.49.7",
     "sass-loader": "^12.4.0",
     "style-loader": "^3.3.1",
+    "stylelint": "^14.3.0",
+    "stylelint-config-recommended-scss": "^5.0.2",
     "typescript": "^4.5.5",
     "webpack": "^5.68.0",
     "webpack-bundle-analyzer": "^4.5.0",

src/components/auth/Auth.scss

@@ -29,8 +29,8 @@
   }
 
   #logo {
-    background-size: 100%;
     background: url('../../assets/telegram-logo.svg') center no-repeat;
+    background-size: 100%;
   }
 
   h2 {

src/components/common/Avatar.scss

@@ -15,6 +15,8 @@
 
   img:not(.emoji) {
     border-radius: 50%;
+    width: 100%;
+    height: 100%;
   }
 
   .emoji {
@@ -123,9 +125,4 @@
   &.interactive {
     cursor: pointer;
   }
-
-  img:not(.emoji) {
-    width: 100%;
-    height: 100%;
-  }
 }

src/components/common/File.scss

@@ -86,7 +86,6 @@
     font-size: 1.5rem;
     position: absolute;
     top: 0;
-    start: 0;
     width: 3.375rem;
     height: 3.375rem;
     display: flex;

src/components/common/GifButton.scss

@@ -23,8 +23,8 @@
   .thumbnail {
     width: 100%;
     height: 100%;
-    background-size: cover !important;
     background: transparent no-repeat center;
+    background-size: cover !important;
   }
 
   .preview, video {

src/components/common/PasswordMonkey.scss

@@ -33,7 +33,7 @@
   .monkey-preview {
     width: 100%;
     height: 100%;
-    background-size: 100%;
     background: url('../../assets/monkey.svg') center;
+    background-size: 100%;
   }
 }

src/components/left/search/ChatMessage.scss

@@ -46,8 +46,7 @@
 
       .sender-name {
         color: var(--color-text);
-      }
+
-      .sender-name {
         &::after {
           content: ': ';
         }

src/components/left/search/LeftSearch.scss

@@ -106,7 +106,6 @@
       .handle {
         unicode-bidi: plaintext;
         color: var(--color-primary);
-        unicode-bidi: plaintext;
 
         &::before {
           content: '@';

src/components/left/settings/folders/SettingsFoldersChatsPicker.scss

@@ -8,9 +8,6 @@
       margin-bottom: 0.5rem;
       margin-left: 0.5rem;
       flex-grow: 1;
-    }
-
-    .max-items-reached {
       color: var(--color-text-secondary);
     }
   }

src/components/mediaViewer/MediaViewerSlides.scss

@@ -4,6 +4,7 @@
   height: 100%;
   max-height: 100vh;
   min-height: -moz-available;
+  /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
   max-height: -webkit-fill-available;
   width: 100%;
   overflow: hidden;

src/components/middle/MessageList.scss

@@ -22,11 +22,11 @@
 
   @media (pointer: coarse) {
     user-select: none;
-    touch-callout: none;
+    -webkit-touch-callout: none;
 
     &.select-mode-active {
       user-select: auto;
-      touch-callout: default;
+      -webkit-touch-callout: default;
     }
   }
 

src/components/middle/MessageSelectToolbar.scss

@@ -36,11 +36,6 @@
 
   opacity: 1;
 
-  &-inner {
-    transform: scaleX(1);
-    transition: transform var(--select-transition), opacity var(--select-transition);
-  }
-
   & .MessageSelectToolbar-inner {
     transform: scaleX(1) translateX(0);
   }
@@ -91,6 +86,9 @@
     box-shadow: 0 1px 2px var(--color-default-shadow);
     font-weight: 500;
 
+    transform: scaleX(1);
+    transition: transform var(--select-transition), opacity var(--select-transition);
+
     @media (max-width: 600px) {
       padding: 0;
       max-width: none;

src/components/middle/MiddleColumn.scss

@@ -112,18 +112,6 @@
     }
   }
 
-  .messaging-disabled {
-    &-inner {
-      width: 100%;
-      padding: 1rem;
-      border-radius: var(--border-radius-messages);
-      background: var(--color-background);
-      color: var(--color-text-secondary);
-      text-align: center;
-      box-shadow: 0 1px 2px var(--color-default-shadow);
-    }
-  }
-
   .Composer {
     #message-compose {
       transform: scaleX(1) translateX(0);
@@ -222,6 +210,16 @@
         opacity: 0;
       }
     }
+
+    &-inner {
+      width: 100%;
+      padding: 1rem;
+      border-radius: var(--border-radius-messages);
+      background: var(--color-background);
+      color: var(--color-text-secondary);
+      text-align: center;
+      box-shadow: 0 1px 2px var(--color-default-shadow);
+    }
   }
 
   .middle-column-footer {

src/components/middle/message/Message.scss

@@ -1,3 +1,5 @@
+@import 'message-content';
+
 // General styles
 .Message {
   display: flex;
@@ -21,6 +23,11 @@
   --deleting-translate-x: -50%;
   --select-message-scale: 0.9;
 
+  --border-top-left-radius: var(--border-radius-messages);
+  --border-top-right-radius: var(--border-radius-messages);
+  --border-bottom-left-radius: var(--border-radius-messages);
+  --border-bottom-right-radius: var(--border-radius-messages);
+
   @media (min-width: 1921px) {
     --max-width: calc(30vw - 1rem);
   }
@@ -146,6 +153,27 @@
         padding-left: 0.25rem;
       }
     }
+
+    &.first-in-group:not(.last-in-group) {
+      --border-bottom-left-radius: var(--border-radius-messages-small);
+    }
+
+    &:not(.first-in-group):not(.last-in-group) {
+      --border-top-left-radius: var(--border-radius-messages-small);
+      --border-bottom-left-radius: var(--border-radius-messages-small);
+    }
+
+    &.last-in-group:not(.first-in-group) {
+      --border-top-left-radius: var(--border-radius-messages-small);
+    }
+
+    &.last-in-group {
+      --border-bottom-left-radius: var(--border-radius-messages-small);
+
+      .message-content.has-appendix {
+        --border-bottom-left-radius: 0;
+      }
+    }
   }
 
   &.own {
@@ -180,6 +208,28 @@
     @media (max-width: 600px) {
       padding-right: 0.25rem;
     }
+
+    &.first-in-group:not(.last-in-group) {
+      --border-bottom-right-radius: var(--border-radius-messages-small);
+    }
+
+    &:not(.first-in-group):not(.last-in-group) {
+      --border-top-right-radius: var(--border-radius-messages-small);
+      --border-bottom-right-radius: var(--border-radius-messages-small);
+    }
+
+    &.last-in-group:not(.first-in-group) {
+      --border-top-right-radius: var(--border-radius-messages-small);
+    }
+
+    &.last-in-group {
+      --border-bottom-right-radius: var(--border-radius-messages-small);
+
+      .message-content.has-appendix {
+        --border-bottom-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
   }
 
   &.is-deleting {
@@ -308,12 +358,14 @@
   }
 
   .album-item-select-wrapper {
+    position: absolute;
     .Message.own & {
       background: var(--color-background-own);
     }
 
     .message-select-control {
       position: absolute;
+      z-index: 2;
       top: 0.438rem;
       right: 0.438rem;
       left: unset;
@@ -346,6 +398,22 @@
   }
 
   &.is-in-document-group {
+    .message-content.document {
+      padding: .25rem .5rem !important;
+    }
+
+    &.last-in-document-group {
+      .message-content.document {
+        padding-bottom: .5rem !important
+      }
+    }
+
+    &.first-in-document-group {
+      .message-content.document {
+        padding-top: .5rem !important
+      }
+    }
+
     &:not(.first-in-document-group) {
       &::before {
         top: 0 !important;
@@ -448,15 +516,6 @@
     }
   }
 
-  .album-item-select-wrapper {
-    position: absolute;
-
-    .message-select-control {
-      position: absolute;
-      z-index: 2;
-    }
-  }
-
   .message-select-control {
     position: absolute;
     left: 0;
@@ -494,103 +553,6 @@
     margin-right: 0.3rem;
   }
 
-  &.is-in-document-group {
-    .message-content.document {
-      padding: .25rem .5rem !important;
-    }
-
-    &.last-in-document-group {
-      .message-content.document {
-        padding-bottom: .5rem !important
-      }
-    }
-
-    &.first-in-document-group {
-      .message-content.document {
-        padding-top: .5rem !important
-      }
-    }
-  }
-}
-
-// Border-radius styles
-.message-content,
-.Album,
-.media-inner,
-.message-content.media .media-inner img,
-.message-content.media .media-inner video,
-.message-content.custom-shape .media-inner img {
-  border-top-left-radius: var(--border-top-left-radius);
-  border-top-right-radius: var(--border-top-right-radius);
-  border-bottom-left-radius: var(--border-bottom-left-radius);
-  border-bottom-right-radius: var(--border-bottom-right-radius);
-}
-
-.media-inner video.full-media {
-  background: transparent !important;
-}
-
-.media-inner {
-  overflow: hidden;
-
-  &.small-image img {
-    border-radius: 0 !important;
-  }
-}
-
-.Message {
-  --border-top-left-radius: var(--border-radius-messages);
-  --border-top-right-radius: var(--border-radius-messages);
-  --border-bottom-left-radius: var(--border-radius-messages);
-  --border-bottom-right-radius: var(--border-radius-messages);
-
-  &:not(.own) {
-    &.first-in-group:not(.last-in-group) {
-      --border-bottom-left-radius: var(--border-radius-messages-small);
-    }
-
-    &:not(.first-in-group):not(.last-in-group) {
-      --border-top-left-radius: var(--border-radius-messages-small);
-      --border-bottom-left-radius: var(--border-radius-messages-small);
-    }
-
-    &.last-in-group:not(.first-in-group) {
-      --border-top-left-radius: var(--border-radius-messages-small);
-    }
-
-    &.last-in-group {
-      --border-bottom-left-radius: var(--border-radius-messages-small);
-
-      .message-content.has-appendix {
-        --border-bottom-left-radius: 0;
-      }
-    }
-  }
-
-  &.own {
-    &.first-in-group:not(.last-in-group) {
-      --border-bottom-right-radius: var(--border-radius-messages-small);
-    }
-
-    &:not(.first-in-group):not(.last-in-group) {
-      --border-top-right-radius: var(--border-radius-messages-small);
-      --border-bottom-right-radius: var(--border-radius-messages-small);
-    }
-
-    &.last-in-group:not(.first-in-group) {
-      --border-top-right-radius: var(--border-radius-messages-small);
-    }
-
-    &.last-in-group {
-      --border-bottom-right-radius: var(--border-radius-messages-small);
-
-      .message-content.has-appendix {
-        --border-bottom-right-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-    }
-  }
-
   .message-content {
     &.has-replies:not(.custom-shape):not(.has-reactions) .WebPage.with-video .media-inner {
       margin-bottom: 1.5rem !important;
@@ -668,8 +630,31 @@
   }
 }
 
+// Border-radius styles
+.message-content,
+.Album,
+.media-inner,
+.message-content.media .media-inner img,
+.message-content.media .media-inner video,
+.message-content.custom-shape .media-inner img {
+  border-top-left-radius: var(--border-top-left-radius);
+  border-top-right-radius: var(--border-top-right-radius);
+  border-bottom-left-radius: var(--border-bottom-left-radius);
+  border-bottom-right-radius: var(--border-bottom-right-radius);
+}
+
+.media-inner video.full-media {
+  background: transparent !important;
+}
+
+.media-inner {
+  overflow: hidden;
+
+  &.small-image img {
+    border-radius: 0 !important;
+  }
+}
+
 .Message .custom-shape .message-action-button {
   bottom: .25rem;
 }
-
-@import 'message-content';

src/components/ui/Checkbox.scss

@@ -19,6 +19,7 @@
       }
 
       &::after {
+        /* stylelint-disable-next-line scss/operator-no-unspaced */
         background: var(--color-primary) url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEzLjkuOEw1LjggOC45IDIuMSA1LjJjLS40LS40LTEuMS0uNC0xLjYgMC0uNC40LS40IDEuMSAwIDEuNkw1IDExLjJjLjQuNCAxLjEuNCAxLjYgMGw4LjktOC45Yy40LS40LjQtMS4xIDAtMS42LS41LS40LTEuMi0uNC0xLjYuMXoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=) no-repeat 50% 50%;
         background-size: 12px;
         border-radius: 50%;
@@ -84,6 +85,7 @@
     }
 
     &::after {
+      /* stylelint-disable-next-line scss/operator-no-unspaced */
       background: center no-repeat url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEzLjkuOEw1LjggOC45IDIuMSA1LjJjLS40LS40LTEuMS0uNC0xLjYgMC0uNC40LS40IDEuMSAwIDEuNkw1IDExLjJjLjQuNCAxLjEuNCAxLjYgMGw4LjktOC45Yy40LS40LjQtMS4xIDAtMS42LS41LS40LTEuMi0uNC0xLjYuMXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvc3ZnPg==);
       background-size: .875rem;
       opacity: 0;

src/components/ui/Modal.scss

@@ -84,7 +84,7 @@
     transform: translate3d(0, 1rem, 0);
   }
 
-  .modal-header {
+  .modal-header, %modal-header {
     padding: 1rem 1rem 0;
     display: flex;
     align-items: center;
@@ -104,7 +104,7 @@
   }
 
   .modal-header-condensed {
-    @extend .modal-header;
+    @extend %modal-header;
     padding: .5rem 1.25rem 0 .9375rem !important;
 
     .modal-action-button {

src/components/ui/ProgressSpinner.scss

@@ -3,6 +3,7 @@
   z-index: 1;
   width: 3.375rem;
   height: 3.375rem;
+  /* stylelint-disable-next-line scss/operator-no-unspaced */
   background: rgba(0, 0, 0, .25) url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwLjcxNyA5Ljc1TDE4LjMgMi4xNjdhLjY4NC42ODQgMCAxMC0uOTY3LS45NjdMOS43NSA4Ljc4MyAyLjE2NyAxLjJhLjY4NC42ODQgMCAxMC0uOTY3Ljk2N0w4Ljc4MyA5Ljc1IDEuMiAxNy4zMzNhLjY4NC42ODQgMCAxMC45NjcuOTY3bDcuNTgzLTcuNTgzIDcuNTgzIDcuNTgzYS42ODEuNjgxIDAgMDAuOTY3IDAgLjY4NC42ODQgMCAwMDAtLjk2N0wxMC43MTcgOS43NXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIgc3Ryb2tlPSIjRkZGIiBzdHJva2Utd2lkdGg9Ii43NSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==) no-repeat 49% 49%;
   border-radius: 50%;
   cursor: pointer;
@@ -31,6 +32,7 @@
   &.size-s, &.size-m {
     width: auto;
     height: auto;
+    /* stylelint-disable-next-line scss/operator-no-unspaced */
     background: transparent url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTguMjE4IDcuNWw1LjYzMy01LjYzM2EuNTA4LjUwOCAwIDEwLS43MTgtLjcxOEw3LjUgNi43ODIgMS44NjcgMS4xNDlhLjUwOC41MDggMCAxMC0uNzE4LjcxOEw2Ljc4MiA3LjVsLTUuNjMzIDUuNjMzYS41MDguNTA4IDAgMTAuNzE4LjcxOEw3LjUgOC4yMThsNS42MzMgNS42MzNhLjUwNi41MDYgMCAwMC43MTggMCAuNTA4LjUwOCAwIDAwMC0uNzE4TDguMjE4IDcuNXoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIgc3Ryb2tlPSIjRkZGIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+) no-repeat 49% 49%;
 
     &.square {

src/styles/_common.scss

@@ -4,12 +4,8 @@
 .media-inner {
   position: relative;
 
-  video,
+  video, img {
-  img {
     display: block;
-  }
-
-  img, video {
     object-fit: cover;
   }
 

src/styles/_spacing.scss

@@ -1,6 +1,8 @@
+@use "sass:map";
+
 $spacer: 1rem !default;
 $spacers: () !default;
-$spacers: map-merge(
+$spacers: map.merge(
   (
     0: 0,
     1: ($spacer * .25),

src/styles/_variables.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 @function toRGB($color) {
   @return red($color) + ", " + green($color) + ", " + blue($color);
 }
@@ -7,9 +9,9 @@
   $background-opacity: opacity($background);
 
   // calculate opacity
-  $bm-red: red($foreground) * $opacity + red($background) * $background-opacity * (1 - $opacity);
+  $bm-red: color.red($foreground) * $opacity + color.red($background) * $background-opacity * (1 - $opacity);
-  $bm-green: green($foreground) * $opacity + green($background) * $background-opacity * (1 - $opacity);
+  $bm-green: color.green($foreground) * $opacity + color.green($background) * $background-opacity * (1 - $opacity);
-  $bm-blue: blue($foreground) * $opacity + blue($background) * $background-opacity * (1 - $opacity);
+  $bm-blue: color.blue($foreground) * $opacity + color.blue($background) * $background-opacity * (1 - $opacity);
   @return rgb($bm-red, $bm-green, $bm-blue);
 }
 
@@ -67,7 +69,7 @@ $color-message-reaction-own-hover: #b5e0a4;
   --color-background-secondary: #f4f4f5;
   --color-background-secondary-accent: #E4E4E5;
   --color-background-own: #{$color-light-green};
-  --color-background-own-selected: #{darken($color-light-green, 10%)};
+  --color-background-own-selected: color.adjust($color-light-green, -10%);
   --color-text: #{$color-black};
   --color-text-lighter: #{$color-dark-gray};
   --color-text-secondary: #{$color-text-secondary};
@@ -90,15 +92,15 @@ $color-message-reaction-own-hover: #b5e0a4;
   --color-composer-button: #{$color-text-secondary}CC;
 
   --color-primary: #{$color-primary};
-  --color-primary-shade: #{mix($color-primary, $color-black, 92%)};
+  --color-primary-shade: #{color.mix($color-primary, $color-black, 92%)};
-  --color-primary-shade-darker: #{mix($color-primary, $color-black, 84%)};
+  --color-primary-shade-darker: #{color.mix($color-primary, $color-black, 84%)};
-  --color-primary-shade-rgb: #{toRGB(mix($color-primary, $color-black, 92%))};
+  --color-primary-shade-rgb: #{toRGB(color.mix($color-primary, $color-black, 92%))};
   --color-primary-opacity: rgba(var(--color-primary), 0.50);
   --color-green: #{$color-green};
-  --color-green-darker: #{mix($color-green, $color-black, 84%)};
+  --color-green-darker: #{color.mix($color-green, $color-black, 84%)};
 
   --color-error: #{$color-error};
-  --color-error-shade: #{mix($color-error, $color-black, 92%)};
+  --color-error-shade: #{color.mix($color-error, $color-black, 92%)};
   --color-error-rgb: #{toRGB($color-error)};
 
   --color-warning: #{$color-warning};

src/styles/icons.scss

@@ -9,6 +9,7 @@
 
 [class^="icon-"], [class*=" icon-"] {
   /* use !important to prevent issues with browser extensions that change fonts */
+  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
   font-family: 'icomoon' !important;
   speak: none;
   font-style: normal;