[Dev] Stylelint: Raise error for low performance animations (#1738)

.stylelintrc.json

@@ -17,7 +17,6 @@
     "plugin/no-low-performance-animation-properties": [
       true,
       {
-        "severity": "warning",
         "ignore": "paint-properties"
       }
     ],

src/components/auth/CountryCodeInput.scss

@@ -23,6 +23,7 @@
       border-top: 0;
       border-left: 0;
       transform: scaleY(1) rotate(45deg);
+      /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
       transition: color 0.2s ease, transform 0.2s ease, top 0.2s ease;
 
       &.open {

src/components/calls/group/GroupCallParticipantVideo.scss

@@ -4,6 +4,7 @@
   position: relative;
   max-height: 12.875rem;
   width: calc(50% - 0.25rem);
+  /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
   transition: 0.25s ease-out width;
   cursor: pointer;
 

src/components/common/File.scss

@@ -62,6 +62,7 @@
       border-color: transparent var(--background-color) transparent var(--background-color);
       border-width: 0 1.125rem 1.125rem 0;
       border-style: solid;
+      /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
       transition: border-width 0.15s ease-in;
     }
   }

src/components/left/main/LeftMain.scss

@@ -19,6 +19,7 @@
 
     .tabs-placeholder {
       height: 2.625rem;
+      /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
       transition: height 150ms ease;
 
       &:not(.open) {

src/components/mediaViewer/ZoomControls.scss

@@ -66,6 +66,7 @@
 
     &-played {
       background: #fff;
+      /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
       transition: width 200ms;
 
       &::after {

src/components/middle/MessageList.scss

@@ -30,6 +30,7 @@
     }
   }
 
+  /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
   transition: bottom 150ms ease-out, transform var(--layer-transition);
   body.keyboard-visible & {
     position: relative;

src/components/middle/MiddleColumn.scss

@@ -8,6 +8,10 @@
   z-index: -1;
   background-color: var(--theme-background-color);
 
+  body:not(.animation-level-0) #root & {
+    transition: background-color 0.2s;
+  }
+
   &::after {
     content: "";
     position: absolute;
@@ -21,7 +25,7 @@
     background-size: cover;
 
     body:not(.animation-level-0) #root & {
-      transition: transform var(--layer-transition), background 0.2s !important;
+      transition: transform var(--layer-transition), background-image 0.2s;
     }
 
     body.animation-level-0 & {
@@ -237,6 +241,7 @@
     z-index: var(--z-middle-footer);
 
     transform: translate3d(0, 0, 0);
+    /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
     transition: top 200ms, transform var(--layer-transition);
 
     body.animation-level-0 & {

src/components/middle/composer/Composer.scss

@@ -31,11 +31,13 @@
 
   @keyframes show-send-as-button {
     from {
+      /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
       width: 1rem;
       transform: scale(0);
     }
 
     to {
+      /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
       width: 3.5rem;
       transform: scale(1);
     }
@@ -459,6 +461,7 @@
       overflow: auto;
     }
 
+    /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
     transition: height 100ms ease;
 
     body.animation-level-0 & {

src/components/middle/composer/ComposerEmbeddedMessage.scss

@@ -1,5 +1,6 @@
 .ComposerEmbeddedMessage {
   height: 2.625rem;
+  /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
   transition: height 150ms ease-out, opacity 150ms ease-out;
 
   .select-mode-active + .middle-column-footer & {

src/components/middle/composer/DropTarget.scss

@@ -38,7 +38,7 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    transition: 0.2s color, 0.2s background;
+    transition: 0.2s color, 0.2s background-image;
   }
 
   .icon {

src/components/middle/composer/WebPagePreview.scss

@@ -1,5 +1,6 @@
 .WebPagePreview {
   height: 2.625rem;
+  /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
   transition: height 150ms ease-out, opacity 150ms ease-out;
 
   body.animation-level-0 & {

src/components/middle/message/CommentButton.scss

@@ -167,6 +167,7 @@
     margin-inline-start: -0.125rem;
 
     .Avatar {
+      /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
       transition: border 0.15s;
       border: 2px solid var(--color-background);
       margin-inline-end: 0;

src/components/ui/Switcher.scss

@@ -39,11 +39,11 @@
     text-indent: -999px;
     width: 2.125rem;
     height: 0.875rem;
-    background: var(--color-gray);
+    background-color: var(--color-gray);
     display: inline-block;
     border-radius: 0.5rem;
     position: relative;
-    transition: background 0.2s ease-in;
+    transition: background-color 0.2s ease-in;
   }
 
   .widget:after {
@@ -53,9 +53,10 @@
     left: 0;
     width: 1.125rem;
     height: 1.125rem;
-    background: var(--color-background);
+    background-color: var(--color-background);
     border-radius: 0.75rem;
-    transition: 0.2s ease-out;
+    /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
+    transition: border-color 0.2s ease-out;
     border: 0.125rem solid var(--color-gray);
   }