stylelint: Enable stylelint-high-performance-animation.

Signed-off-by: Anders Kaseorg <anders@zulip.com>

package.json

@@ -79,6 +79,7 @@
     "stackframe": "^1.3.4",
     "stacktrace-gps": "^3.0.4",
     "style-loader": "^4.0.0",
+    "stylelint-high-performance-animation": "^1.10.0",
     "text-field-edit": "^4.0.0",
     "textarea-caret": "^3.1.0",
     "tippy.js": "^6.3.7",

pnpm-lock.yaml

@@ -253,6 +253,9 @@ importers:
       style-loader:
         specifier: ^4.0.0
         version: 4.0.0(webpack@5.95.0)
+      stylelint-high-performance-animation:
+        specifier: ^1.10.0
+        version: 1.10.0(stylelint@16.10.0(typescript@5.6.3))
       text-field-edit:
         specifier: ^4.0.0
         version: 4.1.1
@@ -8051,6 +8054,11 @@ packages:
     peerDependencies:
       stylelint: ^16.1.0
 
+  stylelint-high-performance-animation@1.10.0:
+    resolution: {integrity: sha512-YzNI+E6taN8pwgaM0INazRg4tw23VA17KNMKUVdOeohpnpSyJLBnLVT9NkRcaCFLodK/67smS5VZK+Qe4Ohrvw==}
+    peerDependencies:
+      stylelint: ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
+
   stylelint@16.10.0:
     resolution: {integrity: sha512-z/8X2rZ52dt2c0stVwI9QL2AFJhLhbPkyfpDFcizs200V/g7v+UYY6SNcB9hKOLcDDX/yGLDsY/pX08sLkz9xQ==}
     engines: {node: '>=18.12.0'}
@@ -18380,6 +18388,11 @@ snapshots:
       stylelint: 16.10.0(typescript@5.6.3)
       stylelint-config-recommended: 14.0.1(stylelint@16.10.0(typescript@5.6.3))
 
+  stylelint-high-performance-animation@1.10.0(stylelint@16.10.0(typescript@5.6.3)):
+    dependencies:
+      postcss-value-parser: 4.2.0
+      stylelint: 16.10.0(typescript@5.6.3)
+
   stylelint@16.10.0(typescript@5.6.3):
     dependencies:
       '@csstools/css-parser-algorithms': 3.0.2(@csstools/css-tokenizer@3.0.2)

stylelint.config.js

@@ -2,6 +2,7 @@
 
 module.exports = {
     extends: ["stylelint-config-standard"],
+    plugins: ["stylelint-high-performance-animation"],
     rules: {
         // Add some exceptions for recommended rules
         "at-rule-no-unknown": [true, {ignoreAtRules: ["extend"]}],
@@ -37,6 +38,7 @@ module.exports = {
             // We use hsl instead of rgb
             "rgb",
         ],
+        "plugin/no-low-performance-animation-properties": [true, {ignore: "paint-properties"}],
 
         // Zulip CSS should have no dependencies on external resources
         "function-url-no-scheme-relative": true,

version.py

@@ -49,4 +49,4 @@ API_FEATURE_LEVEL = 313  # Last bumped for adding `new_email` to /users/{user_id
 #   historical commits sharing the same major version, in which case a
 #   minor version bump suffices.
 
-PROVISION_VERSION = (295, 0)  # bumped 2024-10-20 to upgrade Python requirements
+PROVISION_VERSION = (295, 1)  # bumped 2024-10-23 for stylelint-high-performance-animation

web/styles/components.css

@@ -79,20 +79,20 @@ a.no-underline:hover {
     }
 
     &.simplebar-vertical {
-        transition: width 0.2s ease 1s;
+        transition: width 0.2s ease 1s; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
 
         &.simplebar-hover {
             width: 15px;
-            transition: width 0.2s ease;
+            transition: width 0.2s ease; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
         }
     }
 
     &.simplebar-horizontal {
-        transition: height 0.2s ease 1s;
+        transition: height 0.2s ease 1s; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
 
         &.simplebar-hover {
             height: 15px;
-            transition: height 0.2s ease;
+            transition: height 0.2s ease; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
         }
     }
 }

web/styles/compose.css

@@ -840,7 +840,7 @@
         width: 0;
         /* The progress updates seem to come every second or so,
         so this is the smoothest it can probably get. */
-        transition: width 1s ease-in-out;
+        transition: width 1s ease-in-out; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
         background: hsl(204deg 63% 85%);
         top: 0;
         bottom: 0;

web/styles/portico/comparison_table.css

@@ -95,7 +95,7 @@
             color: inherit;
             text-decoration: none;
             border-bottom: 1px solid hsl(0deg 0% 100% / 50%) !important;
-            transition: border 0.4s ease-out;
+            transition: border 0.4s ease-out; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
 
             &:hover {
                 border-bottom: 2px solid hsl(0deg 0% 100%) !important;

web/styles/portico/navbar.css

@@ -195,7 +195,7 @@ details summary::-webkit-details-marker {
     height: 0;
     width: 100%;
     transition: none 0.05s;
-    transition-property: height, opacity;
+    transition-property: height, opacity; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
 }
 
 .top-menu-tab-input-unselect:not(:checked) + .top-menu-submenu-backdrop {
@@ -385,7 +385,7 @@ details summary::-webkit-details-marker {
     color: hsl(0deg 0% 100% / 80%);
 
     transition: none 0.2;
-    transition-property: backdrop-filter, background, bottom, height;
+    transition-property: backdrop-filter, background, bottom, height; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
     overscroll-behavior: contain;
 }
 
@@ -578,7 +578,7 @@ details summary::-webkit-details-marker {
     background-position: right;
     transition:
         background,
-        letter-spacing 0.2s;
+        letter-spacing 0.2s; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
 }
 
 .top-menu-mobile-summary:active::after {

web/styles/portico/portico.css

@@ -1105,7 +1105,7 @@ input.new-organization-button {
             fill: hsl(0deg 0% 100%);
             z-index: 2;
             transition: none 0.3s ease;
-            transition-property: right, top;
+            transition-property: right, top; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
             cursor: pointer;
         }
 

web/styles/portico/portico_signin.css

@@ -573,7 +573,7 @@ html {
             margin-top: 1px;
 
             transition: none 0.3s ease;
-            transition-property: color, font-size, font-weight, transform;
+            transition-property: color, font-size, font-weight, transform; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
         }
 
         &.moving-label {

web/styles/portico/pricing_plans.css

@@ -84,7 +84,7 @@
             color: inherit;
             text-decoration: none;
             border-bottom: 1px solid hsl(0deg 0% 100% / 50%);
-            transition: border 0.4s ease-out;
+            transition: border 0.4s ease-out; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
 
             &:hover {
                 text-decoration: none;

web/styles/progress_bar.css

@@ -31,7 +31,7 @@
     background-repeat: repeat-x;
     box-shadow: inset 0 -1px 2px hsl(0deg 0% 0% / 15%);
     box-sizing: border-box;
-    transition: width 0.6s ease;
+    transition: width 0.6s ease; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
 }
 
 .progress.active .bar {

web/styles/reactions.css

@@ -22,7 +22,7 @@
         box-shadow: inset 0 0 5px 0 var(--color-message-reaction-shadow-inner);
         transition:
             transform 100ms linear,
-            font-weight 100ms linear;
+            font-weight 100ms linear; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
 
         &.reacted {
             color: var(--color-message-reaction-text-reacted);

web/styles/rendered_markdown.css

@@ -316,18 +316,20 @@
             overflow: hidden;
             border-top: hsl(0deg 0% 50%) 0 solid;
             transition:
+                /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
                 height 0.4s ease-in-out,
                 border-top 0.4s step-end,
-                padding 0.4s step-end;
+                padding 0.4s step-end; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
             padding: 0;
             height: 0;
 
             &.spoiler-content-open {
                 border-top: hsl(0deg 0% 50%) 1px solid;
                 transition:
+                    /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
                     height 0.4s ease-in-out,
                     border-top 0.4s step-start,
-                    padding 0.4s step-start;
+                    padding 0.4s step-start; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
                 padding: 5px;
                 height: auto;
             }

web/styles/subscriptions.css

@@ -1229,7 +1229,7 @@ div.settings-radio-input-parent {
         background-color: var(--color-background-modal);
         border-top: none;
 
-        transition: left 0.3s ease;
+        transition: left 0.3s ease; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
         z-index: 10;
 
         &.show {