stylelint: Enable stylelint-high-performance-animation.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
This commit is contained in:
Anders Kaseorg 2024-10-23 12:41:57 -07:00 committed by Tim Abbott
parent f023fa6fc0
commit 2671a5c32c
15 changed files with 36 additions and 18 deletions

View File

@ -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",

View File

@ -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)

View File

@ -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,

View File

@ -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

View File

@ -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 */
}
}
}

View File

@ -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;

View File

@ -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;

View File

@ -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 {

View File

@ -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;
}

View File

@ -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 {

View File

@ -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;

View File

@ -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 {

View File

@ -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);

View File

@ -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;
}

View File

@ -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 {