From abf6d58b7bd9ccb7008f4451d1a5a5dd9e2f6ad6 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 18 Nov 2024 09:56:22 +0000
Subject: [PATCH] Enable stylelint rule no-unknown-custom-properties (#28473)
* Enable stylelint rule no-unknown-custom-properties
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Fix cpd css vars
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Remove dead styling
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Remove invalid css
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
* Fix comments
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---------
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
.stylelintrc.js | 30 +++++++++-
package.json | 1 +
.../views/elements/_AppPermission.pcss | 7 +--
res/css/structures/_RoomView.pcss | 59 -------------------
res/css/structures/_SpaceRoomView.pcss | 2 +-
.../audio_messages/_PlaybackContainer.pcss | 3 +-
res/css/views/audio_messages/_SeekBar.pcss | 3 +
res/css/views/elements/_ProgressBar.pcss | 11 +---
.../views/rooms/_BasicMessageComposer.pcss | 5 ++
res/css/views/rooms/_EventTile.pcss | 10 ----
.../wysiwyg_composer/components/_Editor.pcss | 5 ++
yarn.lock | 10 +++-
12 files changed, 58 insertions(+), 88 deletions(-)
diff --git a/.stylelintrc.js b/.stylelintrc.js
index dc8ae6376b..fa36402ff1 100644
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@@ -1,7 +1,7 @@
module.exports = {
extends: ["stylelint-config-standard"],
customSyntax: "postcss-scss",
- plugins: ["stylelint-scss"],
+ plugins: ["stylelint-scss", "stylelint-value-no-unknown-custom-properties"],
rules: {
"comment-empty-line-before": null,
"declaration-empty-line-before": null,
@@ -46,5 +46,33 @@ module.exports = {
"number-max-precision": null,
"no-invalid-double-slash-comments": true,
"media-feature-range-notation": null,
+ "csstools/value-no-unknown-custom-properties": [
+ true,
+ {
+ importFrom: [
+ { from: "res/css/_common.pcss", type: "css" },
+ { from: "res/themes/light/css/_light.pcss", type: "css" },
+ // Right now our styles share vars all over the place, this is not ideal but acceptable for now
+ { from: "res/css/views/rooms/_EventTile.pcss", type: "css" },
+ { from: "res/css/views/rooms/_IRCLayout.pcss", type: "css" },
+ { from: "res/css/views/rooms/_EventBubbleTile.pcss", type: "css" },
+ { from: "res/css/views/rooms/_ReadReceiptGroup.pcss", type: "css" },
+ { from: "res/css/views/rooms/_EditMessageComposer.pcss", type: "css" },
+ { from: "res/css/views/right_panel/_BaseCard.pcss", type: "css" },
+ { from: "res/css/views/messages/_MessageTimestamp.pcss", type: "css" },
+ { from: "res/css/views/messages/_EventTileBubble.pcss", type: "css" },
+ { from: "res/css/views/messages/_MessageActionBar.pcss", type: "css" },
+ { from: "res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss", type: "css" },
+ { from: "res/css/views/elements/_ToggleSwitch.pcss", type: "css" },
+ { from: "res/css/views/settings/tabs/_SettingsTab.pcss", type: "css" },
+ { from: "res/css/structures/_RoomView.pcss", type: "css" },
+ // Compound vars
+ "node_modules/@vector-im/compound-design-tokens/assets/web/css/cpd-common-base.css",
+ "node_modules/@vector-im/compound-design-tokens/assets/web/css/cpd-common-semantic.css",
+ "node_modules/@vector-im/compound-design-tokens/assets/web/css/cpd-theme-light-base-mq.css",
+ "node_modules/@vector-im/compound-design-tokens/assets/web/css/cpd-theme-light-semantic-mq.css",
+ ],
+ },
+ ],
},
};
diff --git a/package.json b/package.json
index 0a0d0a477b..e01c670965 100644
--- a/package.json
+++ b/package.json
@@ -276,6 +276,7 @@
"stylelint": "^16.1.0",
"stylelint-config-standard": "^36.0.0",
"stylelint-scss": "^6.0.0",
+ "stylelint-value-no-unknown-custom-properties": "^6.0.1",
"terser-webpack-plugin": "^5.3.9",
"ts-node": "^10.9.1",
"ts-prune": "^0.10.3",
diff --git a/res/css/components/views/elements/_AppPermission.pcss b/res/css/components/views/elements/_AppPermission.pcss
index 25db241f73..0891d25221 100644
--- a/res/css/components/views/elements/_AppPermission.pcss
+++ b/res/css/components/views/elements/_AppPermission.pcss
@@ -11,7 +11,8 @@ Please see LICENSE files in the repository root for full details.
font-size: $font-12px;
width: 100%; /* make mx_AppPermission fill width of mx_AppTileBody so that scroll bar appears on the edge */
overflow-y: scroll;
- .mx_AppPermission_bolder {
+ .mx_AppPermission_bolder,
+ .mx_AppPermission_content_bolder {
font-weight: var(--cpd-font-weight-semibold);
}
.mx_AppPermission_content {
@@ -21,10 +22,6 @@ Please see LICENSE files in the repository root for full details.
margin-block: 12px;
}
- .mx_AppPermission_content_bolder {
- font-weight: var(--font-semi-bold);
- }
-
.mx_TextWithTooltip_target--helpIcon {
display: inline-block;
height: $font-14px; /* align with characters on the same line */
diff --git a/res/css/structures/_RoomView.pcss b/res/css/structures/_RoomView.pcss
index eaa02cd2d2..65ea555ce1 100644
--- a/res/css/structures/_RoomView.pcss
+++ b/res/css/structures/_RoomView.pcss
@@ -207,62 +207,3 @@ Please see LICENSE files in the repository root for full details.
min-height: 42px;
}
}
-
-@keyframes mx_Indicator_pulse {
- 0% {
- transform: scale(0.95);
- }
-
- 70% {
- transform: scale(1);
- }
-
- 100% {
- transform: scale(0.95);
- }
-}
-
-@keyframes mx_Indicator_pulse_shadow {
- 0% {
- opacity: 0.7;
- }
-
- 70% {
- transform: scale(2.2);
- opacity: 0;
- }
-
- 100% {
- opacity: 0;
- }
-}
-
-.mx_Indicator {
- position: absolute;
- right: -3px;
- top: -3px;
- width: var(--RoomHeader-indicator-dot-size);
- height: var(--RoomHeader-indicator-dot-size);
- border-radius: 50%;
- transform: scale(1);
- background: var(--RoomHeader-indicator-pulseColor);
- box-shadow: 0 0 0 0 var(--RoomHeader-indicator-pulseColor);
- animation: mx_Indicator_pulse 2s infinite;
- animation-iteration-count: 1;
-
- &::after {
- content: "";
- position: absolute;
- width: inherit;
- height: inherit;
- top: 0;
- left: 0;
- transform: scale(1);
- transform-origin: center center;
- animation-name: mx_Indicator_pulse_shadow;
- animation-duration: inherit;
- animation-iteration-count: inherit;
- border-radius: 50%;
- background: inherit;
- }
-}
diff --git a/res/css/structures/_SpaceRoomView.pcss b/res/css/structures/_SpaceRoomView.pcss
index 7e55743200..c54bc53dc2 100644
--- a/res/css/structures/_SpaceRoomView.pcss
+++ b/res/css/structures/_SpaceRoomView.pcss
@@ -39,7 +39,7 @@ Please see LICENSE files in the repository root for full details.
}
&:hover {
- border-color: var(--cpd-color-bg-interactive-primary-rest);
+ border-color: var(--cpd-color-bg-action-primary-rest);
&::before {
background-color: var(--cpd-color-icon-primary);
diff --git a/res/css/views/audio_messages/_PlaybackContainer.pcss b/res/css/views/audio_messages/_PlaybackContainer.pcss
index e02533037b..f1dc1d1ec8 100644
--- a/res/css/views/audio_messages/_PlaybackContainer.pcss
+++ b/res/css/views/audio_messages/_PlaybackContainer.pcss
@@ -28,10 +28,11 @@ Please see LICENSE files in the repository root for full details.
/* Waveforms are present in live recording only */
.mx_Waveform {
+ /* default, overridden in JS */
+ --barHeight: 1;
.mx_Waveform_bar {
background-color: $quaternary-content;
height: 100%;
- /* Variable set by a JS component */
transform: scaleY(max(0.05, var(--barHeight)));
&.mx_Waveform_bar_100pct {
diff --git a/res/css/views/audio_messages/_SeekBar.pcss b/res/css/views/audio_messages/_SeekBar.pcss
index 47cce4b47a..fb781811f1 100644
--- a/res/css/views/audio_messages/_SeekBar.pcss
+++ b/res/css/views/audio_messages/_SeekBar.pcss
@@ -12,6 +12,9 @@ Please see LICENSE files in the repository root for full details.
/* * https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ */
.mx_SeekBar {
+ /* default, overridden in JS */
+ --fillTo: 1;
+
/* Dev note: we deliberately do not have the -ms-track (and friends) selectors because we don't */
/* need to support IE. */
diff --git a/res/css/views/elements/_ProgressBar.pcss b/res/css/views/elements/_ProgressBar.pcss
index 8900b7d985..062770f77f 100644
--- a/res/css/views/elements/_ProgressBar.pcss
+++ b/res/css/views/elements/_ProgressBar.pcss
@@ -16,16 +16,7 @@ progress.mx_ProgressBar {
@mixin ProgressBarBorderRadius 6px;
@mixin ProgressBarColour var(--cpd-color-icon-accent-tertiary);
@mixin ProgressBarBgColour $progressbar-bg-color;
- ::-webkit-progress-value {
+ &::-webkit-progress-value {
transition: width 1s;
}
- ::-moz-progress-bar {
- transition: padding-bottom 1s;
- padding-bottom: var(--value);
- transform-origin: 0 0;
- transform: rotate(-90deg) translateX(-15px);
- padding-left: 15px;
-
- height: 0;
- }
}
diff --git a/res/css/views/rooms/_BasicMessageComposer.pcss b/res/css/views/rooms/_BasicMessageComposer.pcss
index e34c991d89..499ce870ec 100644
--- a/res/css/views/rooms/_BasicMessageComposer.pcss
+++ b/res/css/views/rooms/_BasicMessageComposer.pcss
@@ -7,6 +7,11 @@ Please see LICENSE files in the repository root for full details.
*/
.mx_BasicMessageComposer {
+ /* These are set in Javascript */
+ --avatar-letter: "";
+ --avatar-background: unset;
+ --placeholder: "";
+
position: relative;
.mx_BasicMessageComposer_inputEmpty > :first-child::before {
diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss
index 311e059166..d405381db1 100644
--- a/res/css/views/rooms/_EventTile.pcss
+++ b/res/css/views/rooms/_EventTile.pcss
@@ -1017,16 +1017,6 @@ $left-gutter: 64px;
visibility: visible;
}
-/* Inverse of the above to *disable* the animation on any indicators. This approach */
-/* is less pretty, but is easier to target because otherwise we need to define the */
-/* animation for when it's shown which means duplicating the style definition in */
-/* multiple places. */
-.mx_EventTile:not(:hover):not(.mx_EventTile_actionBarFocused):not([data-whatinput="keyboard"] :focus-within) {
- &:not(:focus-visible:focus-within) .mx_MessageActionBar .mx_Indicator {
- animation: none;
- }
-}
-
.mx_EventTile[data-shape="ThreadsList"],
.mx_EventTile[data-shape="Notification"] {
--topOffset: $spacing-12;
diff --git a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
index 5c0d5da9fc..34c2a4d626 100644
--- a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
+++ b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
@@ -7,6 +7,11 @@ Please see LICENSE files in the repository root for full details.
*/
.mx_WysiwygComposer_Editor_container {
+ /* These are set in Javascript */
+ --avatar-letter: "";
+ --avatar-background: unset;
+ --placeholder: "";
+
@keyframes visualbell {
from {
background-color: $visual-bell-bg-color;
diff --git a/yarn.lock b/yarn.lock
index f0e1621d08..c5e5ecce0b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10385,7 +10385,7 @@ resolve.exports@^2.0.0:
resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-2.0.2.tgz#f8c934b8e6a13f539e38b7098e2e36134f01e800"
integrity sha512-X2UW6Nw3n/aMgDVy+0rSqgHlv39WZAlZrXCdnbyEiKm17DSqHX4MmQMaST3FbeWR5FTuRcUwYAziZajji0Y7mg==
-resolve@^1.1.7, resolve@^1.10.0, resolve@^1.14.2, resolve@^1.20.0, resolve@^1.22.4:
+resolve@^1.1.7, resolve@^1.10.0, resolve@^1.14.2, resolve@^1.20.0, resolve@^1.22.4, resolve@^1.22.8:
version "1.22.8"
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
@@ -11127,6 +11127,14 @@ stylelint-scss@^6.0.0:
postcss-selector-parser "^6.1.2"
postcss-value-parser "^4.2.0"
+stylelint-value-no-unknown-custom-properties@^6.0.1:
+ version "6.0.1"
+ resolved "https://registry.yarnpkg.com/stylelint-value-no-unknown-custom-properties/-/stylelint-value-no-unknown-custom-properties-6.0.1.tgz#526cc20344f4fc5e33231152767a432b6ed8f957"
+ integrity sha512-N60PTdaTknB35j6D4FhW0GL2LlBRV++bRpXMMldWMQZ240yFQaoltzlLY4lXXs7Z0J5mNUYZQ/gjyVtU2DhCMA==
+ dependencies:
+ postcss-value-parser "^4.2.0"
+ resolve "^1.22.8"
+
stylelint@^16.1.0:
version "16.10.0"
resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-16.10.0.tgz#452b42a5d82f2ad910954eb2ba2b3a2ec583cd75"