From 2671a5c32c13a76f54f9c3cd4a86cb91faa45060 Mon Sep 17 00:00:00 2001 From: Anders Kaseorg Date: Wed, 23 Oct 2024 12:41:57 -0700 Subject: [PATCH] stylelint: Enable stylelint-high-performance-animation. Signed-off-by: Anders Kaseorg --- package.json | 1 + pnpm-lock.yaml | 13 +++++++++++++ stylelint.config.js | 2 ++ version.py | 2 +- web/styles/components.css | 8 ++++---- web/styles/compose.css | 2 +- web/styles/portico/comparison_table.css | 2 +- web/styles/portico/navbar.css | 6 +++--- web/styles/portico/portico.css | 2 +- web/styles/portico/portico_signin.css | 2 +- web/styles/portico/pricing_plans.css | 2 +- web/styles/progress_bar.css | 2 +- web/styles/reactions.css | 2 +- web/styles/rendered_markdown.css | 6 ++++-- web/styles/subscriptions.css | 2 +- 15 files changed, 36 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index 8357f621b7..771066b128 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 45ebb456bc..76288eb64a 100644 --- a/pnpm-lock.yaml +++ b/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) diff --git a/stylelint.config.js b/stylelint.config.js index d922b9cd22..2a677539f0 100644 --- a/stylelint.config.js +++ b/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, diff --git a/version.py b/version.py index d0ee0f4da6..09d0bccc65 100644 --- a/version.py +++ b/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 diff --git a/web/styles/components.css b/web/styles/components.css index 5bb03435ea..5973919471 100644 --- a/web/styles/components.css +++ b/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 */ } } } diff --git a/web/styles/compose.css b/web/styles/compose.css index a0896f4dba..0747b0a388 100644 --- a/web/styles/compose.css +++ b/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; diff --git a/web/styles/portico/comparison_table.css b/web/styles/portico/comparison_table.css index e6330ef150..8e56c71f33 100644 --- a/web/styles/portico/comparison_table.css +++ b/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; diff --git a/web/styles/portico/navbar.css b/web/styles/portico/navbar.css index 91e2cfaef6..27830de18c 100644 --- a/web/styles/portico/navbar.css +++ b/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 { diff --git a/web/styles/portico/portico.css b/web/styles/portico/portico.css index 19398902d4..fa981e8406 100644 --- a/web/styles/portico/portico.css +++ b/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; } diff --git a/web/styles/portico/portico_signin.css b/web/styles/portico/portico_signin.css index 6543ee5df1..b2478dc3fd 100644 --- a/web/styles/portico/portico_signin.css +++ b/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 { diff --git a/web/styles/portico/pricing_plans.css b/web/styles/portico/pricing_plans.css index 516a8a6d74..145f397a5e 100644 --- a/web/styles/portico/pricing_plans.css +++ b/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; diff --git a/web/styles/progress_bar.css b/web/styles/progress_bar.css index 5073daf031..fa174b0047 100644 --- a/web/styles/progress_bar.css +++ b/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 { diff --git a/web/styles/reactions.css b/web/styles/reactions.css index 55b02cb072..9cdf169cf3 100644 --- a/web/styles/reactions.css +++ b/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); diff --git a/web/styles/rendered_markdown.css b/web/styles/rendered_markdown.css index 446df3579b..7c6bd5f5dc 100644 --- a/web/styles/rendered_markdown.css +++ b/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; } diff --git a/web/styles/subscriptions.css b/web/styles/subscriptions.css index 15cb0f7edb..1642862f30 100644 --- a/web/styles/subscriptions.css +++ b/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 {