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

@@ -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",
+                ],
+            },
+        ],
     },
 };

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

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

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

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

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 {

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. */
 

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

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 {

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;

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;

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"