Stylelint: Update ruleset (#4769)

.stylelintrc.json

@@ -4,7 +4,8 @@
     "@stylistic/stylelint-config"
   ],
   "ignoreFiles": [
-    "dist/*.css"
+    "dist/*.css",
+    "src/styles/icons.scss"
   ],
   "plugins": [
     "@stylistic/stylelint-plugin",
@@ -47,6 +48,12 @@
     "@stylistic/string-quotes": null,
     "@stylistic/color-hex-case": null,
     "@stylistic/selector-list-comma-newline-after": null,
-    "@stylistic/block-closing-brace-newline-after": null
+    "@stylistic/block-closing-brace-newline-after": null,
+    "@stylistic/indentation": [2, { "ignore": ["value"] }],
+    "at-rule-empty-line-before": ["always", { "ignore": ["first-nested", "after-comment", "blockless-after-blockless"] }],
+    "rule-empty-line-before": ["always", {
+      "except": ["after-single-line-comment", "first-nested"],
+      "ignore": ["after-comment", "inside-block"]
+    }]
   }
 }

src/components/calls/group/GroupCall.module.scss

@@ -74,6 +74,7 @@
   border-bottom: 0.0625rem solid transparent;
 
   padding: 0.375rem 0.875rem;
+
   @include mixins.adapt-padding-to-scrollbar(0.875rem);
 
   user-select: none;
@@ -139,6 +140,7 @@
 .participants {
   position: relative;
   margin: 0.125rem 0.5rem 0;
+
   @include mixins.adapt-margin-to-scrollbar(0.5rem);
 }
 

src/components/common/Audio.scss

@@ -71,6 +71,7 @@
 
         &.icon-play {
           margin-left: 0.1875rem;
+
           @media (max-width: 600px) {
             margin-left: 0.125rem;
           }

src/components/common/Composer.scss

@@ -477,6 +477,7 @@
       border-radius: 50%;
       background: var(--color-green-darker);
       box-shadow: -0.375rem -0.25rem 0 -0.1875rem var(--color-background);
+
       @media (max-width: 600px) {
         top: 0.5rem;
         right: 0.5rem;

src/components/common/File.scss

@@ -7,6 +7,7 @@
 
   .content-inner & {
     min-width: 14rem;
+
     @media (max-width: 340px) {
       min-width: 11rem;
     }

src/components/common/code/CodeBlock.scss

@@ -106,6 +106,7 @@
 .hljs-name {
   color: var(--color-keyword);
 }
+
 .hljs-link {
   color: var(--color-link);
   text-decoration: underline;

src/components/left/settings/Settings.scss

@@ -109,11 +109,13 @@
 
 .settings-main-menu {
   padding: 0.5rem;
+
   @include mixins.side-panel-section;
 
   > .ChatExtra {
     padding: 0 0.5rem 0.3125rem;
     margin: 0 -0.5rem 0.625rem;
+
     @include mixins.side-panel-section;
 
     .ListItem.narrow {
@@ -125,6 +127,7 @@
 .settings-item-simple,
 .settings-item {
   padding: 1.5rem 1.5rem 1rem;
+
   @include mixins.side-panel-section;
 }
 

src/components/left/settings/SettingsGeneralBackground.scss

@@ -6,6 +6,7 @@
     grid-template-columns: repeat(3, 1fr);
     grid-auto-rows: 1fr;
     grid-gap: 0.0625rem;
+
     @include mixins.side-panel-section;
   }
 

src/components/left/settings/SettingsGeneralBackgroundColor.scss

@@ -71,6 +71,7 @@
     grid-template-columns: repeat(3, 1fr);
     grid-auto-rows: 1fr;
     grid-gap: 0.0625rem;
+
     @include mixins.side-panel-section;
   }
 

src/components/main/NewContactModal.scss

@@ -13,6 +13,7 @@
     &-fieldset {
       flex: 1;
       margin-inline-start: 1rem;
+
       @media (max-width: 500px) {
         margin-inline-start: 0;
         margin-top: 1rem;

src/components/mediaViewer/VideoPlayer.scss

@@ -10,6 +10,7 @@
 
   @media (max-height: 640px) {
     margin-bottom: 1.75rem;
+
     @at-root .has-footer #{&} {
       margin-bottom: 0;
     }

src/components/mediaViewer/VideoPlayerControls.scss

@@ -46,6 +46,7 @@
     padding: 0;
     margin: 0.25rem;
     height: 2rem;
+
     @media (max-width: 320px) {
       margin: 0.125rem;
     }
@@ -97,6 +98,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     margin-left: 0.5rem;
+
     @media (max-width: 320px) {
       margin: 0.25rem;
     }

src/components/middle/MessageSelectToolbar.scss

@@ -19,6 +19,7 @@
 
   .no-composer & {
     width: 100%;
+
     @media (max-width: 600px) {
       width: calc(100% - 1rem);
     }

src/components/middle/MiddleColumn.module.scss

@@ -61,9 +61,11 @@
     @media screen and (min-width: 1276px) {
       transform: scaleX(0.73) !important;
     }
+
     @media screen and (min-width: 1921px) {
       transform: scaleX(0.8) !important;
     }
+
     @media screen and (min-width: 2600px) {
       transform: scaleX(0.95) !important;
     }

src/components/middle/composer/BotKeyboardMenu.scss

@@ -13,6 +13,7 @@
     padding: 0.1875rem 0.625rem;
     max-height: 75vh;
     overflow-y: scroll;
+
     @include mixins.adapt-padding-to-scrollbar(0.625rem);
 
     .row {

src/components/middle/composer/EmojiPicker.scss

@@ -10,10 +10,12 @@
     height: calc(100% - 3rem);
     overflow-y: auto;
     padding: 0.5rem 0.75rem;
+
     @include mixins.adapt-padding-to-scrollbar(0.75rem);
 
     @media (max-width: 600px) {
       padding: 0.5rem 0.25rem;
+
       @include mixins.adapt-padding-to-scrollbar(0.25rem);
     }
   }

src/components/middle/composer/StickerPicker.module.scss

@@ -21,10 +21,12 @@
   overflow-x: hidden;
 
   padding: 0.5rem 0.25rem;
+
   @include mixins.adapt-padding-to-scrollbar(0.25rem);
 
   &_customEmoji {
     padding: 0.5rem 0.75rem;
+
     @include mixins.adapt-padding-to-scrollbar(0.75rem);
   }
 

src/components/middle/message/Message.scss

@@ -42,6 +42,7 @@
   @media (min-width: 1921px) {
     --max-width: calc(30vw - 1rem);
   }
+
   @media (max-width: 600px) {
     margin-bottom: 0.25rem;
   }
@@ -110,6 +111,7 @@
 
   &.last-in-group {
     margin-bottom: 0.625rem;
+
     @media (max-width: 600px) {
       margin-bottom: 0.4375rem;
     }

src/components/middle/message/_message-content.scss

@@ -825,9 +825,12 @@
   @for $i from 1 through 7 {
     &.emoji-only-#{$i} {
       $size: null;
+
       @if $i == 1 {
         $size: 7rem;
-      } @else {
+      }
+
+      @else {
         $size: min(7.5 - ($i * 0.75), 5.625) + rem;
       }
 

src/components/payment/Checkout.module.scss

@@ -8,6 +8,7 @@
   align-items: flex-start;
   margin: 0 1rem;
 }
+
 .checkout-picture {
   height: 6rem;
   border-radius: 0.5rem;

src/components/right/Profile.scss

@@ -18,6 +18,7 @@
 
   > .profile-info > .ChatExtra {
     padding: 0.875rem 0.5rem 0.5rem;
+
     @include mixins.side-panel-section;
 
     .narrow {

src/components/right/management/Management.scss

@@ -17,6 +17,7 @@
 
   .section {
     padding: 1rem 1.5rem;
+
     @include mixins.side-panel-section;
 
     &.wide {

src/components/right/statistics/BoostStatistics.module.scss

@@ -19,6 +19,7 @@
 
 .section {
   padding: 0.625rem;
+
   @include mixins.side-panel-section;
 }
 

src/components/story/StoryViewer.module.scss

@@ -67,6 +67,7 @@
   right: 1rem;
   top: 1rem;
   z-index: 3;
+
   @media (max-width: 600px) {
     display: none;
   }
@@ -161,6 +162,7 @@
   @for $i from -4 through 4 {
     $slideWidth: 10.875rem;
     $basis: 4.25rem;
+
     @if $i < 0 {
       $basis: -12.625rem;
     }
@@ -325,6 +327,7 @@
 }
 
 // Shared styles for the header that are also used in ghost animation
+
 @mixin story-header {
   position: absolute;
   width: 100%;
@@ -436,6 +439,7 @@
 
 .closeButton {
   display: none;
+
   @media (max-width: 600px) {
     display: flex;
   }
@@ -448,6 +452,7 @@
 
   :global(.Button) {
     color: white;
+
     @media (max-width: 600px) {
       display: flex;
       &:active,

src/components/ui/Button.scss

@@ -5,6 +5,7 @@
     &:focus {
       @content;
     }
+
     @media (hover: hover) {
       &:hover {
         @content;

src/styles/_common.scss

@@ -102,6 +102,7 @@
   background: var(--color-background);
   height: 100%;
   padding: 0.5rem 0.4375rem 0.5rem 0.4375rem;
+
   @include mixins.adapt-padding-to-scrollbar(0.4375rem);
 
   overflow-x: hidden;

src/styles/_mixins.scss

@@ -49,7 +49,9 @@
         rgb(var(--_accent-color-rgb), 35%) 5px,
         rgb(var(--_accent-color-rgb), 35%) 10px
       );
-  } @else {
+  }
+
+  @else {
     #{$property}:
       repeating-linear-gradient(
         -45deg,
@@ -89,7 +91,7 @@
       -webkit-appearance: none;
     }
 
-    &::-moz-slider-thumb {
+    &::-moz-range-thumb {
       -moz-appearance: none;
     }
 

src/styles/_variables.scss

@@ -12,6 +12,7 @@
   $bm-red: color.red($foreground) * $opacity + color.red($background) * $background-opacity * (1 - $opacity);
   $bm-green: color.green($foreground) * $opacity + color.green($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);
 }
 

src/styles/reboot.css

@@ -17,6 +17,7 @@ html {
 @-ms-viewport {
   width: device-width;
 }
+
 article,
 aside,
 dialog,
@@ -130,6 +131,7 @@ a {
   background-color: transparent;
   -webkit-text-decoration-skip: objects;
 }
+
 a:hover {
   color: #0056b3;
   text-decoration: underline;
@@ -141,6 +143,7 @@ a:not([href]):not([tabindex]):focus {
   color: inherit;
   text-decoration: none;
 }
+
 a:not([href]):not([tabindex]):focus {
   outline: 0;
 }