From 01f4bb8c78f840d41dcaee6816c4570c86f7ddec Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 15 Jul 2022 14:53:23 +0100
Subject: [PATCH] Rename PostCSS files to `.pcss` (#9013)

* Rename PostCSS files to `.pcss`

* Make Stylelint happy

* Delint

* Rename new files too

* delint

* Fix bad comment placement
---
 .stylelintrc.js                               |  24 +-
 docs/icons.md                                 |   4 +-
 package.json                                  |  12 +-
 .../{_animations.scss => _animations.pcss}    |   0
 res/css/{_common.scss => _common.pcss}        |  70 +--
 res/css/_components.pcss                      | 339 +++++++++++
 res/css/_components.scss                      | 339 -----------
 .../{_font-sizes.scss => _font-sizes.pcss}    |   0
 ...{_font-weights.scss => _font-weights.pcss} |   0
 res/css/{_spacing.scss => _spacing.pcss}      |   0
 ...aconListItem.scss => _BeaconListItem.pcss} |   0
 ...{_BeaconStatus.scss => _BeaconStatus.pcss} |   0
 ...Tooltip.scss => _BeaconStatusTooltip.pcss} |   0
 ...ViewDialog.scss => _BeaconViewDialog.pcss} |   0
 ...tatus.scss => _DialogOwnBeaconStatus.pcss} |   0
 ...DialogSidebar.scss => _DialogSidebar.pcss} |   0
 ...g.scss => _LeftPanelLiveShareWarning.pcss} |   0
 ...Remaining.scss => _LiveTimeRemaining.pcss} |   0
 ...eaconStatus.scss => _OwnBeaconStatus.pcss} |   0
 ...arning.scss => _RoomLiveShareWarning.pcss} |   0
 ...ocation.scss => _ShareLatestLocation.pcss} |   0
 ...onIcon.scss => _StyledLiveBeaconIcon.pcss} |   0
 ...leLiveShare.scss => _EnableLiveShare.pcss} |   0
 ...opdown.scss => _LiveDurationDropdown.pcss} |   0
 ...ShareMenu.scss => _LocationShareMenu.pcss} |   0
 .../{_MapError.scss => _MapError.pcss}        |   0
 .../{_MapFallback.scss => _MapFallback.pcss}  |   0
 .../location/{_Marker.scss => _Marker.pcss}   |   0
 ...gButtons.scss => _ShareDialogButtons.pcss} |   0
 .../{_ShareType.scss => _ShareType.pcss}      |   0
 .../{_ZoomButtons.scss => _ZoomButtons.pcss}  |   0
 .../{_MBeaconBody.scss => _MBeaconBody.pcss}  |   0
 ...gError.scss => _MediaProcessingError.pcss} |   0
 ...Switcher.scss => _QuickThemeSwitcher.pcss} |   0
 res/css/rethemendex.sh                        |   4 +-
 ...Scrollbar.scss => _AutoHideScrollbar.pcss} |   0
 ...BackdropPanel.scss => _BackdropPanel.pcss} |   0
 ...ilityPage.scss => _CompatibilityPage.pcss} |   0
 ...ntextualMenu.scss => _ContextualMenu.pcss} |   0
 ...leDropTarget.scss => _FileDropTarget.pcss} |   0
 .../{_FilePanel.scss => _FilePanel.pcss}      |   2 +-
 ...ownMenu.scss => _GenericDropdownMenu.pcss} |   2 +-
 ...cErrorPage.scss => _GenericErrorPage.pcss} |   0
 ...HeaderButtons.scss => _HeaderButtons.pcss} |   0
 .../{_HomePage.scss => _HomePage.pcss}        |   0
 .../{_LeftPanel.scss => _LeftPanel.pcss}      |   0
 .../{_MainSplit.scss => _MainSplit.pcss}      |   4 +-
 .../{_MatrixChat.scss => _MatrixChat.pcss}    |   6 +-
 ...ner.scss => _NonUrgentToastContainer.pcss} |   0
 ...tionPanel.scss => _NotificationPanel.pcss} |   0
 ...sButton.scss => _QuickSettingsButton.pcss} |   0
 .../{_RightPanel.scss => _RightPanel.pcss}    |   0
 ...RoomDirectory.scss => _RoomDirectory.pcss} |   0
 .../{_RoomSearch.scss => _RoomSearch.pcss}    |   0
 ...RoomStatusBar.scss => _RoomStatusBar.pcss} |   0
 .../{_RoomView.scss => _RoomView.pcss}        |   0
 .../{_ScrollPanel.scss => _ScrollPanel.pcss}  |   0
 .../{_SearchBox.scss => _SearchBox.pcss}      |   0
 ...aceHierarchy.scss => _SpaceHierarchy.pcss} |   0
 .../{_SpacePanel.scss => _SpacePanel.pcss}    |   0
 ...SpaceRoomView.scss => _SpaceRoomView.pcss} |   0
 .../{_SplashPage.scss => _SplashPage.pcss}    |  16 +-
 .../{_TabbedView.scss => _TabbedView.pcss}    |   0
 ...astContainer.scss => _ToastContainer.pcss} |   0
 .../{_UploadBar.scss => _UploadBar.pcss}      |   0
 .../{_UserMenu.scss => _UserMenu.pcss}        |   0
 ...VideoRoomView.scss => _VideoRoomView.pcss} |   0
 .../{_ViewSource.scss => _ViewSource.pcss}    |   0
 ...teSecurity.scss => _CompleteSecurity.pcss} |   0
 .../auth/{_Login.scss => _Login.pcss}         |   0
 ...{_Registration.scss => _Registration.pcss} |   0
 ...ionBody.scss => _SetupEncryptionBody.pcss} |   0
 .../{_AudioPlayer.scss => _AudioPlayer.pcss}  |   0
 ...PauseButton.scss => _PlayPauseButton.pcss} |   0
 ...Container.scss => _PlaybackContainer.pcss} |   0
 .../{_SeekBar.scss => _SeekBar.pcss}          |   0
 .../{_Waveform.scss => _Waveform.pcss}        |   0
 .../auth/{_AuthBody.scss => _AuthBody.pcss}   |   4 +-
 .../{_AuthButtons.scss => _AuthButtons.pcss}  |   0
 .../{_AuthFooter.scss => _AuthFooter.pcss}    |   0
 .../{_AuthHeader.scss => _AuthHeader.pcss}    |   0
 ...thHeaderLogo.scss => _AuthHeaderLogo.pcss} |   0
 .../auth/{_AuthPage.scss => _AuthPage.pcss}   |   0
 ...tyBody.scss => _CompleteSecurityBody.pcss} |   0
 ...tryDropdown.scss => _CountryDropdown.pcss} |   0
 ...s => _InteractiveAuthEntryComponents.pcss} |   0
 ...geSelector.scss => _LanguageSelector.pcss} |   0
 ...phraseField.scss => _PassphraseField.pcss} |   0
 .../auth/{_Welcome.scss => _Welcome.pcss}     |   0
 .../{_BaseAvatar.scss => _BaseAvatar.pcss}    |   0
 ...mAvatar.scss => _DecoratedRoomAvatar.pcss} |   0
 ...{_WidgetAvatar.scss => _WidgetAvatar.pcss} |   0
 .../beta/{_BetaCard.scss => _BetaCard.pcss}   |   0
 ...ContextMenu.scss => _CallContextMenu.pcss} |   0
 ...ntextMenu.scss => _DeviceContextMenu.pcss} |   0
 ...extMenu.scss => _IconizedContextMenu.pcss} |   0
 ...textMenu.scss => _MessageContextMenu.pcss} |   0
 ...Menu.scss => _RoomGeneralContextMenu.pcss} |   0
 ...scss => _RoomNotificationContextMenu.pcss} |   0
 ...og.scss => _AddExistingToSpaceDialog.pcss} |   0
 ...og.scss => _AnalyticsLearnMoreDialog.pcss} |   0
 ...eportDialog.scss => _BugReportDialog.pcss} |   0
 ...dactDialog.scss => _BulkRedactDialog.pcss} |   0
 ...gelogDialog.scss => _ChangelogDialog.pcss} |   0
 ...scss => _ChatCreateOrReuseChatDialog.pcss} |   0
 ...mpoundDialog.scss => _CompoundDialog.pcss} |   0
 ...css => _ConfirmSpaceUserActionDialog.pcss} |   0
 ...log.scss => _ConfirmUserActionDialog.pcss} |   0
 ...RoomDialog.scss => _CreateRoomDialog.pcss} |   2 +-
 ...Dialog.scss => _CreateSubspaceDialog.pcss} |   0
 ...log.scss => _DeactivateAccountDialog.pcss} |   0
 ...vtoolsDialog.scss => _DevtoolsDialog.pcss} |   0
 ...{_ExportDialog.scss => _ExportDialog.pcss} |   2 +-
 ...edbackDialog.scss => _FeedbackDialog.pcss} |   0
 ...ForwardDialog.scss => _ForwardDialog.pcss} |   2 +-
 ...css => _GenericFeatureFeedbackDialog.pcss} |   0
 ...gnupDialog.scss => _HostSignupDialog.pcss} |   0
 ...SasDialog.scss => _IncomingSasDialog.pcss} |   0
 ...{_InviteDialog.scss => _InviteDialog.pcss} |   3 +-
 ...leDropdown.scss => _JoinRuleDropdown.pcss} |   0
 ...paceDialog.scss => _LeaveSpaceDialog.pcss} |   0
 ...ewDialog.scss => _LocationViewDialog.pcss} |   0
 ...s => _ManageRestrictedJoinRuleDialog.pcss} |   0
 ...og.scss => _MessageEditHistoryDialog.pcss} |   4 +-
 ...getDialog.scss => _ModalWidgetDialog.pcss} |   0
 ...alog.scss => _NewSessionReviewDialog.pcss} |   0
 ...eateDialog.scss => _PollCreateDialog.pcss} |   0
 ...ss => _RegistrationEmailPromptDialog.pcss} |   0
 ...gsDialog.scss => _RoomSettingsDialog.pcss} |   0
 ...s.scss => _RoomSettingsDialogBridges.pcss} |   0
 ...adeDialog.scss => _RoomUpgradeDialog.pcss} |   0
 ...og.scss => _RoomUpgradeWarningDialog.pcss} |   0
 ...eDialog.scss => _ServerOfflineDialog.pcss} |   0
 ...erDialog.scss => _ServerPickerDialog.pcss} |   0
 ...tEmailDialog.scss => _SetEmailDialog.pcss} |   0
 ...ttingsDialog.scss => _SettingsDialog.pcss} |   0
 .../{_ShareDialog.scss => _ShareDialog.pcss}  |   0
 ...alog.scss => _SlashCommandHelpDialog.pcss} |   0
 ...alog.scss => _SpacePreferencesDialog.pcss} |   0
 ...sDialog.scss => _SpaceSettingsDialog.pcss} |   0
 ...lightDialog.scss => _SpotlightDialog.pcss} |   8 +-
 .../{_TermsDialog.scss => _TermsDialog.pcss}  |   0
 ...ialog.scss => _UntrustedDeviceDialog.pcss} |   0
 ...mDialog.scss => _UploadConfirmDialog.pcss} |   0
 ...gsDialog.scss => _UserSettingsDialog.pcss} |   0
 ...s => _WidgetCapabilitiesPromptDialog.pcss} |   0
 ...g.scss => _AccessSecretStorageDialog.pcss} |   0
 ...og.scss => _CreateCrossSigningDialog.pcss} |   0
 ...ialog.scss => _CreateKeyBackupDialog.pcss} |   0
 ...g.scss => _CreateSecretStorageDialog.pcss} |   0
 ...ialog.scss => _KeyBackupFailedDialog.pcss} |   0
 ...alog.scss => _RestoreKeyBackupDialog.pcss} |   0
 ...orkDropdown.scss => _NetworkDropdown.pcss} |   0
 ...ibleButton.scss => _AccessibleButton.pcss} |   0
 ...{_CopyableText.scss => _CopyableText.pcss} |   0
 ...scss => _DesktopCapturerSourcePicker.pcss} |   0
 ...tton.scss => _DialPadBackspaceButton.pcss} |   0
 ...earchBox.scss => _DirectorySearchBox.pcss} |   0
 .../{_Dropdown.scss => _Dropdown.pcss}        |   0
 ...leItemList.scss => _EditableItemList.pcss} |   0
 ...ErrorBoundary.scss => _ErrorBoundary.pcss} |   0
 ...ilePreview.scss => _EventTilePreview.pcss} |   0
 ...{_ExternalLink.scss => _ExternalLink.pcss} |   0
 .../{_FacePile.scss => _FacePile.pcss}        |   0
 .../elements/{_Field.scss => _Field.pcss}     |   2 +-
 ...ary.scss => _GenericEventListSummary.pcss} |  16 +-
 .../{_ImageView.scss => _ImageView.pcss}      |   0
 .../{_InfoTooltip.scss => _InfoTooltip.pcss}  |   0
 ...InlineSpinner.scss => _InlineSpinner.pcss} |   0
 ...eTooltip.scss => _InteractiveTooltip.pcss} |   0
 ...{_InviteReason.scss => _InviteReason.pcss} |   0
 ...edCheckbox.scss => _LabelledCheckbox.pcss} |   0
 ...gsButton.scss => _ManageIntegsButton.pcss} |   0
 ...Uploader.scss => _MiniAvatarUploader.pcss} |   0
 .../views/elements/{_Pill.scss => _Pill.pcss} |   0
 ...PowerSelector.scss => _PowerSelector.pcss} |   0
 .../{_ProgressBar.scss => _ProgressBar.pcss}  |   0
 .../elements/{_QRCode.scss => _QRCode.pcss}   |   0
 .../{_ReplyChain.scss => _ReplyChain.pcss}    |   0
 ...{_ResizeHandle.scss => _ResizeHandle.pcss} |   0
 .../{_RichText.scss => _RichText.pcss}        |   0
 .../{_RoleButton.scss => _RoleButton.pcss}    |   0
 ...omAliasField.scss => _RoomAliasField.pcss} |   0
 .../{_SSOButtons.scss => _SSOButtons.pcss}    |   0
 ...SearchWarning.scss => _SearchWarning.pcss} |   0
 ...{_ServerPicker.scss => _ServerPicker.pcss} |   0
 ...{_SettingsFlag.scss => _SettingsFlag.pcss} |   0
 .../elements/{_Slider.scss => _Slider.pcss}   |   0
 .../elements/{_Spinner.scss => _Spinner.pcss} |   0
 ...yledCheckbox.scss => _StyledCheckbox.pcss} |   6 +-
 ...dioButton.scss => _StyledRadioButton.pcss} |   2 +-
 ...axHighlight.scss => _SyntaxHighlight.pcss} |   0
 .../{_TagComposer.scss => _TagComposer.pcss}  |   0
 ...WithTooltip.scss => _TextWithTooltip.pcss} |   0
 ...{_ToggleSwitch.scss => _ToggleSwitch.pcss} |   0
 .../elements/{_Tooltip.scss => _Tooltip.pcss} |   0
 ...TooltipButton.scss => _TooltipButton.pcss} |   0
 ...eSelection.scss => _UseCaseSelection.pcss} |   0
 ...tton.scss => _UseCaseSelectionButton.pcss} |   0
 .../{_Validation.scss => _Validation.pcss}    |   0
 .../{_EmojiPicker.scss => _EmojiPicker.pcss}  |   0
 ...cationPicker.scss => _LocationPicker.pcss} |   0
 .../{_CallEvent.scss => _CallEvent.pcss}      |   0
 .../{_CreateEvent.scss => _CreateEvent.pcss}  |   0
 ...DateSeparator.scss => _DateSeparator.pcss} |   0
 ...rofile.scss => _DisambiguatedProfile.pcss} |   0
 ...tTileBubble.scss => _EventTileBubble.pcss} |   0
 .../{_HiddenBody.scss => _HiddenBody.pcss}    |   0
 ...DatePicker.scss => _JumpToDatePicker.pcss} |   2 +-
 .../{_MEmoteBody.scss => _MEmoteBody.pcss}    |   0
 .../{_MFileBody.scss => _MFileBody.pcss}      |   0
 .../{_MImageBody.scss => _MImageBody.pcss}    |   0
 ...geReplyBody.scss => _MImageReplyBody.pcss} |   0
 ...dgetEvent.scss => _MJitsiWidgetEvent.pcss} |   0
 ...MLocationBody.scss => _MLocationBody.pcss} |   0
 .../{_MNoticeBody.scss => _MNoticeBody.pcss}  |   0
 .../{_MPollBody.scss => _MPollBody.pcss}      |   0
 ...{_MStickerBody.scss => _MStickerBody.pcss} |   0
 .../{_MTextBody.scss => _MTextBody.pcss}      |   0
 .../{_MVideoBody.scss => _MVideoBody.pcss}    |   0
 .../{_MediaBody.scss => _MediaBody.pcss}      |   0
 ...eActionBar.scss => _MessageActionBar.pcss} |   0
 ...eTimestamp.scss => _MessageTimestamp.pcss} |   0
 .../{_MjolnirBody.scss => _MjolnirBody.pcss}  |   0
 ...{_ReactionsRow.scss => _ReactionsRow.pcss} |   0
 ...owButton.scss => _ReactionsRowButton.pcss} |   0
 ...{_RedactedBody.scss => _RedactedBody.pcss} |   0
 ...AvatarEvent.scss => _RoomAvatarEvent.pcss} |   0
 ...{_TextualEvent.scss => _TextualEvent.pcss} |   0
 .../{_UnknownBody.scss => _UnknownBody.pcss}  |   0
 ...SourceEvent.scss => _ViewSourceEvent.pcss} |   0
 ...ptoEvent.scss => _common_CryptoEvent.pcss} |   0
 .../{_BaseCard.scss => _BaseCard.pcss}        |   0
 ...cryptionInfo.scss => _EncryptionInfo.pcss} |   0
 ...agesCard.scss => _PinnedMessagesCard.pcss} |   0
 ...SummaryCard.scss => _RoomSummaryCard.pcss} |   0
 .../{_ThreadPanel.scss => _ThreadPanel.pcss}  |   8 +-
 ...{_TimelineCard.scss => _TimelineCard.pcss} |  26 +-
 .../{_UserInfo.scss => _UserInfo.pcss}        |   0
 ...tionPanel.scss => _VerificationPanel.pcss} |   0
 .../{_WidgetCard.scss => _WidgetCard.pcss}    |   0
 ...AliasSettings.scss => _AliasSettings.pcss} |   0
 .../{_AppsDrawer.scss => _AppsDrawer.pcss}    |   3 +-
 ...{_Autocomplete.scss => _Autocomplete.pcss} |   0
 .../rooms/{_AuxPanel.scss => _AuxPanel.pcss}  |   8 +-
 ...mposer.scss => _BasicMessageComposer.pcss} |   0
 .../rooms/{_E2EIcon.scss => _E2EIcon.pcss}    |   0
 ...omposer.scss => _EditMessageComposer.pcss} |   0
 .../{_EntityTile.scss => _EntityTile.pcss}    |   0
 ...tBubbleTile.scss => _EventBubbleTile.pcss} |  55 +-
 .../{_EventTile.scss => _EventTile.pcss}      | 104 ++--
 .../{_HistoryTile.scss => _HistoryTile.pcss}  |   0
 .../{_IRCLayout.scss => _IRCLayout.pcss}      |   0
 ...omButton.scss => _JumpToBottomButton.pcss} |   0
 ...eviewGroup.scss => _LinkPreviewGroup.pcss} |   0
 ...iewWidget.scss => _LinkPreviewWidget.pcss} |   0
 .../{_MemberInfo.scss => _MemberInfo.pcss}    |   0
 .../{_MemberList.scss => _MemberList.pcss}    |   2 +-
 ...ageComposer.scss => _MessageComposer.pcss} |   0
 ...ar.scss => _MessageComposerFormatBar.pcss} |   0
 ...{_NewRoomIntro.scss => _NewRoomIntro.pcss} |   0
 ...tionBadge.scss => _NotificationBadge.pcss} |   1 -
 ...edEventTile.scss => _PinnedEventTile.pcss} |   2 -
 ...PresenceLabel.scss => _PresenceLabel.pcss} |   0
 ...ceiptGroup.scss => _ReadReceiptGroup.pcss} |   0
 ...Button.scss => _RecentlyViewedButton.pcss} |   0
 ...{_ReplyPreview.scss => _ReplyPreview.pcss} |   0
 .../{_ReplyTile.scss => _ReplyTile.pcss}      |   0
 ...Breadcrumbs.scss => _RoomBreadcrumbs.pcss} |   0
 .../{_RoomHeader.scss => _RoomHeader.pcss}    |   2 +-
 ...{_RoomInfoLine.scss => _RoomInfoLine.pcss} |   0
 .../rooms/{_RoomList.scss => _RoomList.pcss}  |   0
 ...omListHeader.scss => _RoomListHeader.pcss} |   2 +-
 ...omPreviewBar.scss => _RoomPreviewBar.pcss} |   2 +-
 ...PreviewCard.scss => _RoomPreviewCard.pcss} |   0
 .../{_RoomSublist.scss => _RoomSublist.pcss}  |   0
 .../rooms/{_RoomTile.scss => _RoomTile.pcss}  |   0
 ...ngBar.scss => _RoomUpgradeWarningBar.pcss} |   0
 .../{_SearchBar.scss => _SearchBar.pcss}      |   0
 ...omposer.scss => _SendMessageComposer.pcss} |   0
 .../rooms/{_Stickers.scss => _Stickers.pcss}  |   0
 ...ThreadSummary.scss => _ThreadSummary.pcss} |   3 +-
 ...gesBar.scss => _TopUnreadMessagesBar.pcss} |   0
 ...oomSummary.scss => _VideoRoomSummary.pcss} |   0
 ...ile.scss => _VoiceRecordComposerTile.pcss} |   2 +-
 ...sTypingTile.scss => _WhoIsTypingTile.pcss} |   2 +-
 ...AvatarSetting.scss => _AvatarSetting.pcss} |   0
 ...ningPanel.scss => _CrossSigningPanel.pcss} |   0
 ...aphyPanel.scss => _CryptographyPanel.pcss} |   0
 ...{_DevicesPanel.scss => _DevicesPanel.pcss} |   0
 ...ailAddresses.scss => _EmailAddresses.pcss} |   0
 ...alingPanel.scss => _FontScalingPanel.pcss} |   2 +-
 ...ageSizePanel.scss => _ImageSizePanel.pcss} |   0
 ...nManager.scss => _IntegrationManager.pcss} |   0
 ...leSettings.scss => _JoinRuleSettings.pcss} |   0
 ...rdShortcut.scss => _KeyboardShortcut.pcss} |   0
 ...youtSwitcher.scss => _LayoutSwitcher.pcss} |   6 +-
 ...Notifications.scss => _Notifications.pcss} |   0
 ...{_PhoneNumbers.scss => _PhoneNumbers.pcss} |   0
 ...ileSettings.scss => _ProfileSettings.pcss} |   0
 ...ckupPanel.scss => _SecureBackupPanel.pcss} |   0
 .../{_SetIdServer.scss => _SetIdServer.pcss}  |   0
 ...nager.scss => _SetIntegrationManager.pcss} |   0
 ...gsFieldset.scss => _SettingsFieldset.pcss} |   0
 ...nguages.scss => _SpellCheckLanguages.pcss} |   0
 ...hoicePanel.scss => _ThemeChoicePanel.pcss} |   0
 ...eckButton.scss => _UpdateCheckButton.pcss} |   0
 .../{_SettingsTab.scss => _SettingsTab.pcss}  |   0
 ...sTab.scss => _GeneralRoomSettingsTab.pcss} |   0
 ...Tab.scss => _NotificationSettingsTab.pcss} |   0
 ...ngsTab.scss => _RolesRoomSettingsTab.pcss} |   0
 ...Tab.scss => _SecurityRoomSettingsTab.pcss} |   0
 ...b.scss => _AppearanceUserSettingsTab.pcss} |   0
 ...sTab.scss => _GeneralUserSettingsTab.pcss} |   0
 ...ingsTab.scss => _HelpUserSettingsTab.pcss} |   0
 ...Tab.scss => _KeyboardUserSettingsTab.pcss} |   0
 ...ingsTab.scss => _LabsUserSettingsTab.pcss} |   0
 ...sTab.scss => _MjolnirUserSettingsTab.pcss} |   0
 ....scss => _PreferencesUserSettingsTab.pcss} |   0
 ...Tab.scss => _SecurityUserSettingsTab.pcss} |   0
 ...sTab.scss => _SidebarUserSettingsTab.pcss} |   0
 ...ngsTab.scss => _VoiceUserSettingsTab.pcss} |   0
 ...Settings.scss => _SpaceBasicSettings.pcss} |   2 +-
 ...nPicker.scss => _SpaceChildrenPicker.pcss} |   0
 ...eCreateMenu.scss => _SpaceCreateMenu.pcss} |   0
 ...ublicShare.scss => _SpacePublicShare.pcss} |   0
 ...eement.scss => _InlineTermsAgreement.pcss} |   0
 ...alyticsToast.scss => _AnalyticsToast.pcss} |   0
 ...CallToast.scss => _IncomingCallToast.pcss} |   0
 ...t.scss => _NonUrgentEchoFailureToast.pcss} |   0
 .../{_Heading.scss => _Heading.pcss}          |   0
 ...ShowSas.scss => _VerificationShowSas.pcss} |   0
 ...ViewButtons.scss => _CallViewButtons.pcss} |   0
 .../{_CallPreview.scss => _CallPreview.pcss}  |   0
 .../voip/{_CallView.scss => _CallView.pcss}   |   0
 ...ViewForRoom.scss => _CallViewForRoom.pcss} |   0
 ...llViewHeader.scss => _CallViewHeader.pcss} |   0
 ...ViewSidebar.scss => _CallViewSidebar.pcss} |   0
 .../voip/{_DialPad.scss => _DialPad.pcss}     |   0
 ...textMenu.scss => _DialPadContextMenu.pcss} |   0
 ...{_DialPadModal.scss => _DialPadModal.pcss} |   0
 ...{_PiPContainer.scss => _PiPContainer.pcss} |   0
 .../voip/{_VideoFeed.scss => _VideoFeed.pcss} |   0
 .../{_VideoLobby.scss => _VideoLobby.pcss}    |   0
 res/themes/dark-custom/css/dark-custom.pcss   |   7 +
 res/themes/dark-custom/css/dark-custom.scss   |   7 -
 .../dark/css/{_dark.scss => _dark.pcss}       |   0
 res/themes/dark/css/dark.pcss                 |   8 +
 res/themes/dark/css/dark.scss                 |   8 -
 .../{_legacy-dark.scss => _legacy-dark.pcss}  |   0
 res/themes/legacy-dark/css/legacy-dark.pcss   |   7 +
 res/themes/legacy-dark/css/legacy-dark.scss   |   7 -
 .../css/{_fonts.scss => _fonts.pcss}          |   2 +-
 ...{_legacy-light.scss => _legacy-light.pcss} |   0
 .../css/{_paths.scss => _paths.pcss}          |   2 +-
 res/themes/legacy-light/css/legacy-light.pcss |   6 +
 res/themes/legacy-light/css/legacy-light.scss |   6 -
 .../css/{_custom.scss => _custom.pcss}        |   0
 res/themes/light-custom/css/light-custom.pcss |   6 +
 res/themes/light-custom/css/light-custom.scss |   6 -
 ...ontrast.scss => _light-high-contrast.pcss} |  10 +-
 .../css/light-high-contrast.pcss              |   8 +
 .../css/light-high-contrast.scss              |   8 -
 .../light/css/{_fonts.scss => _fonts.pcss}    |   0
 .../light/css/{_light.scss => _light.pcss}    |   0
 .../light/css/{_mods.scss => _mods.pcss}      |   0
 .../light/css/{_paths.scss => _paths.pcss}    |   2 +-
 res/themes/light/css/light.pcss               |   7 +
 res/themes/light/css/light.scss               |   7 -
 scripts/make-react-component.js               |   4 +-
 yarn.lock                                     | 560 ++++--------------
 371 files changed, 740 insertions(+), 1045 deletions(-)
 rename res/css/{_animations.scss => _animations.pcss} (100%)
 rename res/css/{_common.scss => _common.pcss} (92%)
 create mode 100644 res/css/_components.pcss
 delete mode 100644 res/css/_components.scss
 rename res/css/{_font-sizes.scss => _font-sizes.pcss} (100%)
 rename res/css/{_font-weights.scss => _font-weights.pcss} (100%)
 rename res/css/{_spacing.scss => _spacing.pcss} (100%)
 rename res/css/components/views/beacon/{_BeaconListItem.scss => _BeaconListItem.pcss} (100%)
 rename res/css/components/views/beacon/{_BeaconStatus.scss => _BeaconStatus.pcss} (100%)
 rename res/css/components/views/beacon/{_BeaconStatusTooltip.scss => _BeaconStatusTooltip.pcss} (100%)
 rename res/css/components/views/beacon/{_BeaconViewDialog.scss => _BeaconViewDialog.pcss} (100%)
 rename res/css/components/views/beacon/{_DialogOwnBeaconStatus.scss => _DialogOwnBeaconStatus.pcss} (100%)
 rename res/css/components/views/beacon/{_DialogSidebar.scss => _DialogSidebar.pcss} (100%)
 rename res/css/components/views/beacon/{_LeftPanelLiveShareWarning.scss => _LeftPanelLiveShareWarning.pcss} (100%)
 rename res/css/components/views/beacon/{_LiveTimeRemaining.scss => _LiveTimeRemaining.pcss} (100%)
 rename res/css/components/views/beacon/{_OwnBeaconStatus.scss => _OwnBeaconStatus.pcss} (100%)
 rename res/css/components/views/beacon/{_RoomLiveShareWarning.scss => _RoomLiveShareWarning.pcss} (100%)
 rename res/css/components/views/beacon/{_ShareLatestLocation.scss => _ShareLatestLocation.pcss} (100%)
 rename res/css/components/views/beacon/{_StyledLiveBeaconIcon.scss => _StyledLiveBeaconIcon.pcss} (100%)
 rename res/css/components/views/location/{_EnableLiveShare.scss => _EnableLiveShare.pcss} (100%)
 rename res/css/components/views/location/{_LiveDurationDropdown.scss => _LiveDurationDropdown.pcss} (100%)
 rename res/css/components/views/location/{_LocationShareMenu.scss => _LocationShareMenu.pcss} (100%)
 rename res/css/components/views/location/{_MapError.scss => _MapError.pcss} (100%)
 rename res/css/components/views/location/{_MapFallback.scss => _MapFallback.pcss} (100%)
 rename res/css/components/views/location/{_Marker.scss => _Marker.pcss} (100%)
 rename res/css/components/views/location/{_ShareDialogButtons.scss => _ShareDialogButtons.pcss} (100%)
 rename res/css/components/views/location/{_ShareType.scss => _ShareType.pcss} (100%)
 rename res/css/components/views/location/{_ZoomButtons.scss => _ZoomButtons.pcss} (100%)
 rename res/css/components/views/messages/{_MBeaconBody.scss => _MBeaconBody.pcss} (100%)
 rename res/css/components/views/messages/shared/{_MediaProcessingError.scss => _MediaProcessingError.pcss} (100%)
 rename res/css/components/views/spaces/{_QuickThemeSwitcher.scss => _QuickThemeSwitcher.pcss} (100%)
 rename res/css/structures/{_AutoHideScrollbar.scss => _AutoHideScrollbar.pcss} (100%)
 rename res/css/structures/{_BackdropPanel.scss => _BackdropPanel.pcss} (100%)
 rename res/css/structures/{_CompatibilityPage.scss => _CompatibilityPage.pcss} (100%)
 rename res/css/structures/{_ContextualMenu.scss => _ContextualMenu.pcss} (100%)
 rename res/css/structures/{_FileDropTarget.scss => _FileDropTarget.pcss} (100%)
 rename res/css/structures/{_FilePanel.scss => _FilePanel.pcss} (98%)
 rename res/css/structures/{_GenericDropdownMenu.scss => _GenericDropdownMenu.pcss} (98%)
 rename res/css/structures/{_GenericErrorPage.scss => _GenericErrorPage.pcss} (100%)
 rename res/css/structures/{_HeaderButtons.scss => _HeaderButtons.pcss} (100%)
 rename res/css/structures/{_HomePage.scss => _HomePage.pcss} (100%)
 rename res/css/structures/{_LeftPanel.scss => _LeftPanel.pcss} (100%)
 rename res/css/structures/{_MainSplit.scss => _MainSplit.pcss} (86%)
 rename res/css/structures/{_MatrixChat.scss => _MatrixChat.pcss} (93%)
 rename res/css/structures/{_NonUrgentToastContainer.scss => _NonUrgentToastContainer.pcss} (100%)
 rename res/css/structures/{_NotificationPanel.scss => _NotificationPanel.pcss} (100%)
 rename res/css/structures/{_QuickSettingsButton.scss => _QuickSettingsButton.pcss} (100%)
 rename res/css/structures/{_RightPanel.scss => _RightPanel.pcss} (100%)
 rename res/css/structures/{_RoomDirectory.scss => _RoomDirectory.pcss} (100%)
 rename res/css/structures/{_RoomSearch.scss => _RoomSearch.pcss} (100%)
 rename res/css/structures/{_RoomStatusBar.scss => _RoomStatusBar.pcss} (100%)
 rename res/css/structures/{_RoomView.scss => _RoomView.pcss} (100%)
 rename res/css/structures/{_ScrollPanel.scss => _ScrollPanel.pcss} (100%)
 rename res/css/structures/{_SearchBox.scss => _SearchBox.pcss} (100%)
 rename res/css/structures/{_SpaceHierarchy.scss => _SpaceHierarchy.pcss} (100%)
 rename res/css/structures/{_SpacePanel.scss => _SpacePanel.pcss} (100%)
 rename res/css/structures/{_SpaceRoomView.scss => _SpaceRoomView.pcss} (100%)
 rename res/css/structures/{_SplashPage.scss => _SplashPage.pcss} (81%)
 rename res/css/structures/{_TabbedView.scss => _TabbedView.pcss} (100%)
 rename res/css/structures/{_ToastContainer.scss => _ToastContainer.pcss} (100%)
 rename res/css/structures/{_UploadBar.scss => _UploadBar.pcss} (100%)
 rename res/css/structures/{_UserMenu.scss => _UserMenu.pcss} (100%)
 rename res/css/structures/{_VideoRoomView.scss => _VideoRoomView.pcss} (100%)
 rename res/css/structures/{_ViewSource.scss => _ViewSource.pcss} (100%)
 rename res/css/structures/auth/{_CompleteSecurity.scss => _CompleteSecurity.pcss} (100%)
 rename res/css/structures/auth/{_Login.scss => _Login.pcss} (100%)
 rename res/css/structures/auth/{_Registration.scss => _Registration.pcss} (100%)
 rename res/css/structures/auth/{_SetupEncryptionBody.scss => _SetupEncryptionBody.pcss} (100%)
 rename res/css/views/audio_messages/{_AudioPlayer.scss => _AudioPlayer.pcss} (100%)
 rename res/css/views/audio_messages/{_PlayPauseButton.scss => _PlayPauseButton.pcss} (100%)
 rename res/css/views/audio_messages/{_PlaybackContainer.scss => _PlaybackContainer.pcss} (100%)
 rename res/css/views/audio_messages/{_SeekBar.scss => _SeekBar.pcss} (100%)
 rename res/css/views/audio_messages/{_Waveform.scss => _Waveform.pcss} (100%)
 rename res/css/views/auth/{_AuthBody.scss => _AuthBody.pcss} (98%)
 rename res/css/views/auth/{_AuthButtons.scss => _AuthButtons.pcss} (100%)
 rename res/css/views/auth/{_AuthFooter.scss => _AuthFooter.pcss} (100%)
 rename res/css/views/auth/{_AuthHeader.scss => _AuthHeader.pcss} (100%)
 rename res/css/views/auth/{_AuthHeaderLogo.scss => _AuthHeaderLogo.pcss} (100%)
 rename res/css/views/auth/{_AuthPage.scss => _AuthPage.pcss} (100%)
 rename res/css/views/auth/{_CompleteSecurityBody.scss => _CompleteSecurityBody.pcss} (100%)
 rename res/css/views/auth/{_CountryDropdown.scss => _CountryDropdown.pcss} (100%)
 rename res/css/views/auth/{_InteractiveAuthEntryComponents.scss => _InteractiveAuthEntryComponents.pcss} (100%)
 rename res/css/views/auth/{_LanguageSelector.scss => _LanguageSelector.pcss} (100%)
 rename res/css/views/auth/{_PassphraseField.scss => _PassphraseField.pcss} (100%)
 rename res/css/views/auth/{_Welcome.scss => _Welcome.pcss} (100%)
 rename res/css/views/avatars/{_BaseAvatar.scss => _BaseAvatar.pcss} (100%)
 rename res/css/views/avatars/{_DecoratedRoomAvatar.scss => _DecoratedRoomAvatar.pcss} (100%)
 rename res/css/views/avatars/{_WidgetAvatar.scss => _WidgetAvatar.pcss} (100%)
 rename res/css/views/beta/{_BetaCard.scss => _BetaCard.pcss} (100%)
 rename res/css/views/context_menus/{_CallContextMenu.scss => _CallContextMenu.pcss} (100%)
 rename res/css/views/context_menus/{_DeviceContextMenu.scss => _DeviceContextMenu.pcss} (100%)
 rename res/css/views/context_menus/{_IconizedContextMenu.scss => _IconizedContextMenu.pcss} (100%)
 rename res/css/views/context_menus/{_MessageContextMenu.scss => _MessageContextMenu.pcss} (100%)
 rename res/css/views/context_menus/{_RoomGeneralContextMenu.scss => _RoomGeneralContextMenu.pcss} (100%)
 rename res/css/views/context_menus/{_RoomNotificationContextMenu.scss => _RoomNotificationContextMenu.pcss} (100%)
 rename res/css/views/dialogs/{_AddExistingToSpaceDialog.scss => _AddExistingToSpaceDialog.pcss} (100%)
 rename res/css/views/dialogs/{_AnalyticsLearnMoreDialog.scss => _AnalyticsLearnMoreDialog.pcss} (100%)
 rename res/css/views/dialogs/{_BugReportDialog.scss => _BugReportDialog.pcss} (100%)
 rename res/css/views/dialogs/{_BulkRedactDialog.scss => _BulkRedactDialog.pcss} (100%)
 rename res/css/views/dialogs/{_ChangelogDialog.scss => _ChangelogDialog.pcss} (100%)
 rename res/css/views/dialogs/{_ChatCreateOrReuseChatDialog.scss => _ChatCreateOrReuseChatDialog.pcss} (100%)
 rename res/css/views/dialogs/{_CompoundDialog.scss => _CompoundDialog.pcss} (100%)
 rename res/css/views/dialogs/{_ConfirmSpaceUserActionDialog.scss => _ConfirmSpaceUserActionDialog.pcss} (100%)
 rename res/css/views/dialogs/{_ConfirmUserActionDialog.scss => _ConfirmUserActionDialog.pcss} (100%)
 rename res/css/views/dialogs/{_CreateRoomDialog.scss => _CreateRoomDialog.pcss} (98%)
 rename res/css/views/dialogs/{_CreateSubspaceDialog.scss => _CreateSubspaceDialog.pcss} (100%)
 rename res/css/views/dialogs/{_DeactivateAccountDialog.scss => _DeactivateAccountDialog.pcss} (100%)
 rename res/css/views/dialogs/{_DevtoolsDialog.scss => _DevtoolsDialog.pcss} (100%)
 rename res/css/views/dialogs/{_ExportDialog.scss => _ExportDialog.pcss} (97%)
 rename res/css/views/dialogs/{_FeedbackDialog.scss => _FeedbackDialog.pcss} (100%)
 rename res/css/views/dialogs/{_ForwardDialog.scss => _ForwardDialog.pcss} (99%)
 rename res/css/views/dialogs/{_GenericFeatureFeedbackDialog.scss => _GenericFeatureFeedbackDialog.pcss} (100%)
 rename res/css/views/dialogs/{_HostSignupDialog.scss => _HostSignupDialog.pcss} (100%)
 rename res/css/views/dialogs/{_IncomingSasDialog.scss => _IncomingSasDialog.pcss} (100%)
 rename res/css/views/dialogs/{_InviteDialog.scss => _InviteDialog.pcss} (98%)
 rename res/css/views/dialogs/{_JoinRuleDropdown.scss => _JoinRuleDropdown.pcss} (100%)
 rename res/css/views/dialogs/{_LeaveSpaceDialog.scss => _LeaveSpaceDialog.pcss} (100%)
 rename res/css/views/dialogs/{_LocationViewDialog.scss => _LocationViewDialog.pcss} (100%)
 rename res/css/views/dialogs/{_ManageRestrictedJoinRuleDialog.scss => _ManageRestrictedJoinRuleDialog.pcss} (100%)
 rename res/css/views/dialogs/{_MessageEditHistoryDialog.scss => _MessageEditHistoryDialog.pcss} (96%)
 rename res/css/views/dialogs/{_ModalWidgetDialog.scss => _ModalWidgetDialog.pcss} (100%)
 rename res/css/views/dialogs/{_NewSessionReviewDialog.scss => _NewSessionReviewDialog.pcss} (100%)
 rename res/css/views/dialogs/{_PollCreateDialog.scss => _PollCreateDialog.pcss} (100%)
 rename res/css/views/dialogs/{_RegistrationEmailPromptDialog.scss => _RegistrationEmailPromptDialog.pcss} (100%)
 rename res/css/views/dialogs/{_RoomSettingsDialog.scss => _RoomSettingsDialog.pcss} (100%)
 rename res/css/views/dialogs/{_RoomSettingsDialogBridges.scss => _RoomSettingsDialogBridges.pcss} (100%)
 rename res/css/views/dialogs/{_RoomUpgradeDialog.scss => _RoomUpgradeDialog.pcss} (100%)
 rename res/css/views/dialogs/{_RoomUpgradeWarningDialog.scss => _RoomUpgradeWarningDialog.pcss} (100%)
 rename res/css/views/dialogs/{_ServerOfflineDialog.scss => _ServerOfflineDialog.pcss} (100%)
 rename res/css/views/dialogs/{_ServerPickerDialog.scss => _ServerPickerDialog.pcss} (100%)
 rename res/css/views/dialogs/{_SetEmailDialog.scss => _SetEmailDialog.pcss} (100%)
 rename res/css/views/dialogs/{_SettingsDialog.scss => _SettingsDialog.pcss} (100%)
 rename res/css/views/dialogs/{_ShareDialog.scss => _ShareDialog.pcss} (100%)
 rename res/css/views/dialogs/{_SlashCommandHelpDialog.scss => _SlashCommandHelpDialog.pcss} (100%)
 rename res/css/views/dialogs/{_SpacePreferencesDialog.scss => _SpacePreferencesDialog.pcss} (100%)
 rename res/css/views/dialogs/{_SpaceSettingsDialog.scss => _SpaceSettingsDialog.pcss} (100%)
 rename res/css/views/dialogs/{_SpotlightDialog.scss => _SpotlightDialog.pcss} (98%)
 rename res/css/views/dialogs/{_TermsDialog.scss => _TermsDialog.pcss} (100%)
 rename res/css/views/dialogs/{_UntrustedDeviceDialog.scss => _UntrustedDeviceDialog.pcss} (100%)
 rename res/css/views/dialogs/{_UploadConfirmDialog.scss => _UploadConfirmDialog.pcss} (100%)
 rename res/css/views/dialogs/{_UserSettingsDialog.scss => _UserSettingsDialog.pcss} (100%)
 rename res/css/views/dialogs/{_WidgetCapabilitiesPromptDialog.scss => _WidgetCapabilitiesPromptDialog.pcss} (100%)
 rename res/css/views/dialogs/security/{_AccessSecretStorageDialog.scss => _AccessSecretStorageDialog.pcss} (100%)
 rename res/css/views/dialogs/security/{_CreateCrossSigningDialog.scss => _CreateCrossSigningDialog.pcss} (100%)
 rename res/css/views/dialogs/security/{_CreateKeyBackupDialog.scss => _CreateKeyBackupDialog.pcss} (100%)
 rename res/css/views/dialogs/security/{_CreateSecretStorageDialog.scss => _CreateSecretStorageDialog.pcss} (100%)
 rename res/css/views/dialogs/security/{_KeyBackupFailedDialog.scss => _KeyBackupFailedDialog.pcss} (100%)
 rename res/css/views/dialogs/security/{_RestoreKeyBackupDialog.scss => _RestoreKeyBackupDialog.pcss} (100%)
 rename res/css/views/directory/{_NetworkDropdown.scss => _NetworkDropdown.pcss} (100%)
 rename res/css/views/elements/{_AccessibleButton.scss => _AccessibleButton.pcss} (100%)
 rename res/css/views/elements/{_CopyableText.scss => _CopyableText.pcss} (100%)
 rename res/css/views/elements/{_DesktopCapturerSourcePicker.scss => _DesktopCapturerSourcePicker.pcss} (100%)
 rename res/css/views/elements/{_DialPadBackspaceButton.scss => _DialPadBackspaceButton.pcss} (100%)
 rename res/css/views/elements/{_DirectorySearchBox.scss => _DirectorySearchBox.pcss} (100%)
 rename res/css/views/elements/{_Dropdown.scss => _Dropdown.pcss} (100%)
 rename res/css/views/elements/{_EditableItemList.scss => _EditableItemList.pcss} (100%)
 rename res/css/views/elements/{_ErrorBoundary.scss => _ErrorBoundary.pcss} (100%)
 rename res/css/views/elements/{_EventTilePreview.scss => _EventTilePreview.pcss} (100%)
 rename res/css/views/elements/{_ExternalLink.scss => _ExternalLink.pcss} (100%)
 rename res/css/views/elements/{_FacePile.scss => _FacePile.pcss} (100%)
 rename res/css/views/elements/{_Field.scss => _Field.pcss} (98%)
 rename res/css/views/elements/{_GenericEventListSummary.scss => _GenericEventListSummary.pcss} (91%)
 rename res/css/views/elements/{_ImageView.scss => _ImageView.pcss} (100%)
 rename res/css/views/elements/{_InfoTooltip.scss => _InfoTooltip.pcss} (100%)
 rename res/css/views/elements/{_InlineSpinner.scss => _InlineSpinner.pcss} (100%)
 rename res/css/views/elements/{_InteractiveTooltip.scss => _InteractiveTooltip.pcss} (100%)
 rename res/css/views/elements/{_InviteReason.scss => _InviteReason.pcss} (100%)
 rename res/css/views/elements/{_LabelledCheckbox.scss => _LabelledCheckbox.pcss} (100%)
 rename res/css/views/elements/{_ManageIntegsButton.scss => _ManageIntegsButton.pcss} (100%)
 rename res/css/views/elements/{_MiniAvatarUploader.scss => _MiniAvatarUploader.pcss} (100%)
 rename res/css/views/elements/{_Pill.scss => _Pill.pcss} (100%)
 rename res/css/views/elements/{_PowerSelector.scss => _PowerSelector.pcss} (100%)
 rename res/css/views/elements/{_ProgressBar.scss => _ProgressBar.pcss} (100%)
 rename res/css/views/elements/{_QRCode.scss => _QRCode.pcss} (100%)
 rename res/css/views/elements/{_ReplyChain.scss => _ReplyChain.pcss} (100%)
 rename res/css/views/elements/{_ResizeHandle.scss => _ResizeHandle.pcss} (100%)
 rename res/css/views/elements/{_RichText.scss => _RichText.pcss} (100%)
 rename res/css/views/elements/{_RoleButton.scss => _RoleButton.pcss} (100%)
 rename res/css/views/elements/{_RoomAliasField.scss => _RoomAliasField.pcss} (100%)
 rename res/css/views/elements/{_SSOButtons.scss => _SSOButtons.pcss} (100%)
 rename res/css/views/elements/{_SearchWarning.scss => _SearchWarning.pcss} (100%)
 rename res/css/views/elements/{_ServerPicker.scss => _ServerPicker.pcss} (100%)
 rename res/css/views/elements/{_SettingsFlag.scss => _SettingsFlag.pcss} (100%)
 rename res/css/views/elements/{_Slider.scss => _Slider.pcss} (100%)
 rename res/css/views/elements/{_Spinner.scss => _Spinner.pcss} (100%)
 rename res/css/views/elements/{_StyledCheckbox.scss => _StyledCheckbox.pcss} (94%)
 rename res/css/views/elements/{_StyledRadioButton.scss => _StyledRadioButton.pcss} (99%)
 rename res/css/views/elements/{_SyntaxHighlight.scss => _SyntaxHighlight.pcss} (100%)
 rename res/css/views/elements/{_TagComposer.scss => _TagComposer.pcss} (100%)
 rename res/css/views/elements/{_TextWithTooltip.scss => _TextWithTooltip.pcss} (100%)
 rename res/css/views/elements/{_ToggleSwitch.scss => _ToggleSwitch.pcss} (100%)
 rename res/css/views/elements/{_Tooltip.scss => _Tooltip.pcss} (100%)
 rename res/css/views/elements/{_TooltipButton.scss => _TooltipButton.pcss} (100%)
 rename res/css/views/elements/{_UseCaseSelection.scss => _UseCaseSelection.pcss} (100%)
 rename res/css/views/elements/{_UseCaseSelectionButton.scss => _UseCaseSelectionButton.pcss} (100%)
 rename res/css/views/elements/{_Validation.scss => _Validation.pcss} (100%)
 rename res/css/views/emojipicker/{_EmojiPicker.scss => _EmojiPicker.pcss} (100%)
 rename res/css/views/location/{_LocationPicker.scss => _LocationPicker.pcss} (100%)
 rename res/css/views/messages/{_CallEvent.scss => _CallEvent.pcss} (100%)
 rename res/css/views/messages/{_CreateEvent.scss => _CreateEvent.pcss} (100%)
 rename res/css/views/messages/{_DateSeparator.scss => _DateSeparator.pcss} (100%)
 rename res/css/views/messages/{_DisambiguatedProfile.scss => _DisambiguatedProfile.pcss} (100%)
 rename res/css/views/messages/{_EventTileBubble.scss => _EventTileBubble.pcss} (100%)
 rename res/css/views/messages/{_HiddenBody.scss => _HiddenBody.pcss} (100%)
 rename res/css/views/messages/{_JumpToDatePicker.scss => _JumpToDatePicker.pcss} (95%)
 rename res/css/views/messages/{_MEmoteBody.scss => _MEmoteBody.pcss} (100%)
 rename res/css/views/messages/{_MFileBody.scss => _MFileBody.pcss} (100%)
 rename res/css/views/messages/{_MImageBody.scss => _MImageBody.pcss} (100%)
 rename res/css/views/messages/{_MImageReplyBody.scss => _MImageReplyBody.pcss} (100%)
 rename res/css/views/messages/{_MJitsiWidgetEvent.scss => _MJitsiWidgetEvent.pcss} (100%)
 rename res/css/views/messages/{_MLocationBody.scss => _MLocationBody.pcss} (100%)
 rename res/css/views/messages/{_MNoticeBody.scss => _MNoticeBody.pcss} (100%)
 rename res/css/views/messages/{_MPollBody.scss => _MPollBody.pcss} (100%)
 rename res/css/views/messages/{_MStickerBody.scss => _MStickerBody.pcss} (100%)
 rename res/css/views/messages/{_MTextBody.scss => _MTextBody.pcss} (100%)
 rename res/css/views/messages/{_MVideoBody.scss => _MVideoBody.pcss} (100%)
 rename res/css/views/messages/{_MediaBody.scss => _MediaBody.pcss} (100%)
 rename res/css/views/messages/{_MessageActionBar.scss => _MessageActionBar.pcss} (100%)
 rename res/css/views/messages/{_MessageTimestamp.scss => _MessageTimestamp.pcss} (100%)
 rename res/css/views/messages/{_MjolnirBody.scss => _MjolnirBody.pcss} (100%)
 rename res/css/views/messages/{_ReactionsRow.scss => _ReactionsRow.pcss} (100%)
 rename res/css/views/messages/{_ReactionsRowButton.scss => _ReactionsRowButton.pcss} (100%)
 rename res/css/views/messages/{_RedactedBody.scss => _RedactedBody.pcss} (100%)
 rename res/css/views/messages/{_RoomAvatarEvent.scss => _RoomAvatarEvent.pcss} (100%)
 rename res/css/views/messages/{_TextualEvent.scss => _TextualEvent.pcss} (100%)
 rename res/css/views/messages/{_UnknownBody.scss => _UnknownBody.pcss} (100%)
 rename res/css/views/messages/{_ViewSourceEvent.scss => _ViewSourceEvent.pcss} (100%)
 rename res/css/views/messages/{_common_CryptoEvent.scss => _common_CryptoEvent.pcss} (100%)
 rename res/css/views/right_panel/{_BaseCard.scss => _BaseCard.pcss} (100%)
 rename res/css/views/right_panel/{_EncryptionInfo.scss => _EncryptionInfo.pcss} (100%)
 rename res/css/views/right_panel/{_PinnedMessagesCard.scss => _PinnedMessagesCard.pcss} (100%)
 rename res/css/views/right_panel/{_RoomSummaryCard.scss => _RoomSummaryCard.pcss} (100%)
 rename res/css/views/right_panel/{_ThreadPanel.scss => _ThreadPanel.pcss} (97%)
 rename res/css/views/right_panel/{_TimelineCard.scss => _TimelineCard.pcss} (88%)
 rename res/css/views/right_panel/{_UserInfo.scss => _UserInfo.pcss} (100%)
 rename res/css/views/right_panel/{_VerificationPanel.scss => _VerificationPanel.pcss} (100%)
 rename res/css/views/right_panel/{_WidgetCard.scss => _WidgetCard.pcss} (100%)
 rename res/css/views/room_settings/{_AliasSettings.scss => _AliasSettings.pcss} (100%)
 rename res/css/views/rooms/{_AppsDrawer.scss => _AppsDrawer.pcss} (98%)
 rename res/css/views/rooms/{_Autocomplete.scss => _Autocomplete.pcss} (100%)
 rename res/css/views/rooms/{_AuxPanel.scss => _AuxPanel.pcss} (80%)
 rename res/css/views/rooms/{_BasicMessageComposer.scss => _BasicMessageComposer.pcss} (100%)
 rename res/css/views/rooms/{_E2EIcon.scss => _E2EIcon.pcss} (100%)
 rename res/css/views/rooms/{_EditMessageComposer.scss => _EditMessageComposer.pcss} (100%)
 rename res/css/views/rooms/{_EntityTile.scss => _EntityTile.pcss} (100%)
 rename res/css/views/rooms/{_EventBubbleTile.scss => _EventBubbleTile.pcss} (91%)
 rename res/css/views/rooms/{_EventTile.scss => _EventTile.pcss} (92%)
 rename res/css/views/rooms/{_HistoryTile.scss => _HistoryTile.pcss} (100%)
 rename res/css/views/rooms/{_IRCLayout.scss => _IRCLayout.pcss} (100%)
 rename res/css/views/rooms/{_JumpToBottomButton.scss => _JumpToBottomButton.pcss} (100%)
 rename res/css/views/rooms/{_LinkPreviewGroup.scss => _LinkPreviewGroup.pcss} (100%)
 rename res/css/views/rooms/{_LinkPreviewWidget.scss => _LinkPreviewWidget.pcss} (100%)
 rename res/css/views/rooms/{_MemberInfo.scss => _MemberInfo.pcss} (100%)
 rename res/css/views/rooms/{_MemberList.scss => _MemberList.pcss} (97%)
 rename res/css/views/rooms/{_MessageComposer.scss => _MessageComposer.pcss} (100%)
 rename res/css/views/rooms/{_MessageComposerFormatBar.scss => _MessageComposerFormatBar.pcss} (100%)
 rename res/css/views/rooms/{_NewRoomIntro.scss => _NewRoomIntro.pcss} (100%)
 rename res/css/views/rooms/{_NotificationBadge.scss => _NotificationBadge.pcss} (99%)
 rename res/css/views/rooms/{_PinnedEventTile.scss => _PinnedEventTile.pcss} (98%)
 rename res/css/views/rooms/{_PresenceLabel.scss => _PresenceLabel.pcss} (100%)
 rename res/css/views/rooms/{_ReadReceiptGroup.scss => _ReadReceiptGroup.pcss} (100%)
 rename res/css/views/rooms/{_RecentlyViewedButton.scss => _RecentlyViewedButton.pcss} (100%)
 rename res/css/views/rooms/{_ReplyPreview.scss => _ReplyPreview.pcss} (100%)
 rename res/css/views/rooms/{_ReplyTile.scss => _ReplyTile.pcss} (100%)
 rename res/css/views/rooms/{_RoomBreadcrumbs.scss => _RoomBreadcrumbs.pcss} (100%)
 rename res/css/views/rooms/{_RoomHeader.scss => _RoomHeader.pcss} (99%)
 rename res/css/views/rooms/{_RoomInfoLine.scss => _RoomInfoLine.pcss} (100%)
 rename res/css/views/rooms/{_RoomList.scss => _RoomList.pcss} (100%)
 rename res/css/views/rooms/{_RoomListHeader.scss => _RoomListHeader.pcss} (98%)
 rename res/css/views/rooms/{_RoomPreviewBar.scss => _RoomPreviewBar.pcss} (98%)
 rename res/css/views/rooms/{_RoomPreviewCard.scss => _RoomPreviewCard.pcss} (100%)
 rename res/css/views/rooms/{_RoomSublist.scss => _RoomSublist.pcss} (100%)
 rename res/css/views/rooms/{_RoomTile.scss => _RoomTile.pcss} (100%)
 rename res/css/views/rooms/{_RoomUpgradeWarningBar.scss => _RoomUpgradeWarningBar.pcss} (100%)
 rename res/css/views/rooms/{_SearchBar.scss => _SearchBar.pcss} (100%)
 rename res/css/views/rooms/{_SendMessageComposer.scss => _SendMessageComposer.pcss} (100%)
 rename res/css/views/rooms/{_Stickers.scss => _Stickers.pcss} (100%)
 rename res/css/views/rooms/{_ThreadSummary.scss => _ThreadSummary.pcss} (98%)
 rename res/css/views/rooms/{_TopUnreadMessagesBar.scss => _TopUnreadMessagesBar.pcss} (100%)
 rename res/css/views/rooms/{_VideoRoomSummary.scss => _VideoRoomSummary.pcss} (100%)
 rename res/css/views/rooms/{_VoiceRecordComposerTile.scss => _VoiceRecordComposerTile.pcss} (99%)
 rename res/css/views/rooms/{_WhoIsTypingTile.scss => _WhoIsTypingTile.pcss} (95%)
 rename res/css/views/settings/{_AvatarSetting.scss => _AvatarSetting.pcss} (100%)
 rename res/css/views/settings/{_CrossSigningPanel.scss => _CrossSigningPanel.pcss} (100%)
 rename res/css/views/settings/{_CryptographyPanel.scss => _CryptographyPanel.pcss} (100%)
 rename res/css/views/settings/{_DevicesPanel.scss => _DevicesPanel.pcss} (100%)
 rename res/css/views/settings/{_EmailAddresses.scss => _EmailAddresses.pcss} (100%)
 rename res/css/views/settings/{_FontScalingPanel.scss => _FontScalingPanel.pcss} (98%)
 rename res/css/views/settings/{_ImageSizePanel.scss => _ImageSizePanel.pcss} (100%)
 rename res/css/views/settings/{_IntegrationManager.scss => _IntegrationManager.pcss} (100%)
 rename res/css/views/settings/{_JoinRuleSettings.scss => _JoinRuleSettings.pcss} (100%)
 rename res/css/views/settings/{_KeyboardShortcut.scss => _KeyboardShortcut.pcss} (100%)
 rename res/css/views/settings/{_LayoutSwitcher.scss => _LayoutSwitcher.pcss} (94%)
 rename res/css/views/settings/{_Notifications.scss => _Notifications.pcss} (100%)
 rename res/css/views/settings/{_PhoneNumbers.scss => _PhoneNumbers.pcss} (100%)
 rename res/css/views/settings/{_ProfileSettings.scss => _ProfileSettings.pcss} (100%)
 rename res/css/views/settings/{_SecureBackupPanel.scss => _SecureBackupPanel.pcss} (100%)
 rename res/css/views/settings/{_SetIdServer.scss => _SetIdServer.pcss} (100%)
 rename res/css/views/settings/{_SetIntegrationManager.scss => _SetIntegrationManager.pcss} (100%)
 rename res/css/views/settings/{_SettingsFieldset.scss => _SettingsFieldset.pcss} (100%)
 rename res/css/views/settings/{_SpellCheckLanguages.scss => _SpellCheckLanguages.pcss} (100%)
 rename res/css/views/settings/{_ThemeChoicePanel.scss => _ThemeChoicePanel.pcss} (100%)
 rename res/css/views/settings/{_UpdateCheckButton.scss => _UpdateCheckButton.pcss} (100%)
 rename res/css/views/settings/tabs/{_SettingsTab.scss => _SettingsTab.pcss} (100%)
 rename res/css/views/settings/tabs/room/{_GeneralRoomSettingsTab.scss => _GeneralRoomSettingsTab.pcss} (100%)
 rename res/css/views/settings/tabs/room/{_NotificationSettingsTab.scss => _NotificationSettingsTab.pcss} (100%)
 rename res/css/views/settings/tabs/room/{_RolesRoomSettingsTab.scss => _RolesRoomSettingsTab.pcss} (100%)
 rename res/css/views/settings/tabs/room/{_SecurityRoomSettingsTab.scss => _SecurityRoomSettingsTab.pcss} (100%)
 rename res/css/views/settings/tabs/user/{_AppearanceUserSettingsTab.scss => _AppearanceUserSettingsTab.pcss} (100%)
 rename res/css/views/settings/tabs/user/{_GeneralUserSettingsTab.scss => _GeneralUserSettingsTab.pcss} (100%)
 rename res/css/views/settings/tabs/user/{_HelpUserSettingsTab.scss => _HelpUserSettingsTab.pcss} (100%)
 rename res/css/views/settings/tabs/user/{_KeyboardUserSettingsTab.scss => _KeyboardUserSettingsTab.pcss} (100%)
 rename res/css/views/settings/tabs/user/{_LabsUserSettingsTab.scss => _LabsUserSettingsTab.pcss} (100%)
 rename res/css/views/settings/tabs/user/{_MjolnirUserSettingsTab.scss => _MjolnirUserSettingsTab.pcss} (100%)
 rename res/css/views/settings/tabs/user/{_PreferencesUserSettingsTab.scss => _PreferencesUserSettingsTab.pcss} (100%)
 rename res/css/views/settings/tabs/user/{_SecurityUserSettingsTab.scss => _SecurityUserSettingsTab.pcss} (100%)
 rename res/css/views/settings/tabs/user/{_SidebarUserSettingsTab.scss => _SidebarUserSettingsTab.pcss} (100%)
 rename res/css/views/settings/tabs/user/{_VoiceUserSettingsTab.scss => _VoiceUserSettingsTab.pcss} (100%)
 rename res/css/views/spaces/{_SpaceBasicSettings.scss => _SpaceBasicSettings.pcss} (97%)
 rename res/css/views/spaces/{_SpaceChildrenPicker.scss => _SpaceChildrenPicker.pcss} (100%)
 rename res/css/views/spaces/{_SpaceCreateMenu.scss => _SpaceCreateMenu.pcss} (100%)
 rename res/css/views/spaces/{_SpacePublicShare.scss => _SpacePublicShare.pcss} (100%)
 rename res/css/views/terms/{_InlineTermsAgreement.scss => _InlineTermsAgreement.pcss} (100%)
 rename res/css/views/toasts/{_AnalyticsToast.scss => _AnalyticsToast.pcss} (100%)
 rename res/css/views/toasts/{_IncomingCallToast.scss => _IncomingCallToast.pcss} (100%)
 rename res/css/views/toasts/{_NonUrgentEchoFailureToast.scss => _NonUrgentEchoFailureToast.pcss} (100%)
 rename res/css/views/typography/{_Heading.scss => _Heading.pcss} (100%)
 rename res/css/views/verification/{_VerificationShowSas.scss => _VerificationShowSas.pcss} (100%)
 rename res/css/views/voip/CallView/{_CallViewButtons.scss => _CallViewButtons.pcss} (100%)
 rename res/css/views/voip/{_CallPreview.scss => _CallPreview.pcss} (100%)
 rename res/css/views/voip/{_CallView.scss => _CallView.pcss} (100%)
 rename res/css/views/voip/{_CallViewForRoom.scss => _CallViewForRoom.pcss} (100%)
 rename res/css/views/voip/{_CallViewHeader.scss => _CallViewHeader.pcss} (100%)
 rename res/css/views/voip/{_CallViewSidebar.scss => _CallViewSidebar.pcss} (100%)
 rename res/css/views/voip/{_DialPad.scss => _DialPad.pcss} (100%)
 rename res/css/views/voip/{_DialPadContextMenu.scss => _DialPadContextMenu.pcss} (100%)
 rename res/css/views/voip/{_DialPadModal.scss => _DialPadModal.pcss} (100%)
 rename res/css/views/voip/{_PiPContainer.scss => _PiPContainer.pcss} (100%)
 rename res/css/views/voip/{_VideoFeed.scss => _VideoFeed.pcss} (100%)
 rename res/css/views/voip/{_VideoLobby.scss => _VideoLobby.pcss} (100%)
 create mode 100644 res/themes/dark-custom/css/dark-custom.pcss
 delete mode 100644 res/themes/dark-custom/css/dark-custom.scss
 rename res/themes/dark/css/{_dark.scss => _dark.pcss} (100%)
 create mode 100644 res/themes/dark/css/dark.pcss
 delete mode 100644 res/themes/dark/css/dark.scss
 rename res/themes/legacy-dark/css/{_legacy-dark.scss => _legacy-dark.pcss} (100%)
 create mode 100644 res/themes/legacy-dark/css/legacy-dark.pcss
 delete mode 100644 res/themes/legacy-dark/css/legacy-dark.scss
 rename res/themes/legacy-light/css/{_fonts.scss => _fonts.pcss} (96%)
 rename res/themes/legacy-light/css/{_legacy-light.scss => _legacy-light.pcss} (100%)
 rename res/themes/legacy-light/css/{_paths.scss => _paths.pcss} (60%)
 create mode 100644 res/themes/legacy-light/css/legacy-light.pcss
 delete mode 100644 res/themes/legacy-light/css/legacy-light.scss
 rename res/themes/light-custom/css/{_custom.scss => _custom.pcss} (100%)
 create mode 100644 res/themes/light-custom/css/light-custom.pcss
 delete mode 100644 res/themes/light-custom/css/light-custom.scss
 rename res/themes/light-high-contrast/css/{_light-high-contrast.scss => _light-high-contrast.pcss} (97%)
 create mode 100644 res/themes/light-high-contrast/css/light-high-contrast.pcss
 delete mode 100644 res/themes/light-high-contrast/css/light-high-contrast.scss
 rename res/themes/light/css/{_fonts.scss => _fonts.pcss} (100%)
 rename res/themes/light/css/{_light.scss => _light.pcss} (100%)
 rename res/themes/light/css/{_mods.scss => _mods.pcss} (100%)
 rename res/themes/light/css/{_paths.scss => _paths.pcss} (60%)
 create mode 100644 res/themes/light/css/light.pcss
 delete mode 100644 res/themes/light/css/light.scss

diff --git a/.stylelintrc.js b/.stylelintrc.js
index e72e8ca55c..e965468486 100644
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@@ -1,5 +1,6 @@
 module.exports = {
     "extends": "stylelint-config-standard",
+    customSyntax: require('postcss-scss'),
     "plugins": [
         "stylelint-scss",
     ],
@@ -27,6 +28,25 @@ module.exports = {
         // rather than a CI thing. Shorthand selectors are harder to detect when searching for a
         // class name. This regex is trying to *allow* anything except `&words`, such as `&::before`,
         // `&.mx_Class`, etc.
-        "selector-nested-pattern": "^((&[ :.\\\[,])|([^&]))"
-    }
+        "selector-nested-pattern": "^((&[ :.\\\[,])|([^&]))",
+        "declaration-colon-space-after": "always-single-line",
+        // Disable some defaults
+        "selector-class-pattern": null,
+        "custom-property-pattern": null,
+        "selector-id-pattern": null,
+        "keyframes-name-pattern": null,
+        "string-quotes": null,
+        "alpha-value-notation": null,
+        "color-function-notation": null,
+        "selector-not-notation": null,
+        "import-notation": null,
+        "value-keyword-case": null,
+        "declaration-block-no-redundant-longhand-properties": null,
+        "shorthand-property-no-redundant-values": null,
+        "property-no-vendor-prefix": null,
+        "value-no-vendor-prefix": null,
+        "selector-no-vendor-prefix": null,
+        "media-feature-name-no-vendor-prefix": null,
+        "number-max-precision": null,
+    },
 }
diff --git a/docs/icons.md b/docs/icons.md
index d478b5407d..36ea54c550 100644
--- a/docs/icons.md
+++ b/docs/icons.md
@@ -22,7 +22,7 @@ const MyComponent = () => {
 Icon components are svg elements and can be styled as usual.
 
 ```
-// _MyComponents.scss
+// _MyComponents.pcss
 .mx_MyComponent-icon {
     height: 20px;
     width: 20px;
@@ -41,4 +41,4 @@ const MyComponent = () => {
         <FavoriteIcon className="mx_MyComponent-icon" role="img" aria-hidden="false">
     </>;
 }
-```
\ No newline at end of file
+```
diff --git a/package.json b/package.json
index eda0b3f639..e40d2d672c 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,8 @@
     "CONTRIBUTING.rst",
     "LICENSE",
     "README.md",
-    "package.json"
+    "package.json",
+    ".stylelintrc.js"
   ],
   "main": "./src/index.ts",
   "matrix_src_main": "./src/index.ts",
@@ -47,7 +48,7 @@
     "lint:js": "eslint --max-warnings 0 src test cypress",
     "lint:js-fix": "eslint --fix src test cypress",
     "lint:types": "tsc --noEmit --jsx react && tsc --noEmit --jsx react -p cypress",
-    "lint:style": "stylelint \"res/css/**/*.scss\"",
+    "lint:style": "stylelint \"res/css/**/*.pcss\"",
     "test": "jest",
     "test:cypress": "cypress run",
     "test:cypress:open": "cypress open",
@@ -193,13 +194,14 @@
     "matrix-mock-request": "^2.0.0",
     "matrix-react-test-utils": "^0.2.3",
     "matrix-web-i18n": "^1.3.0",
+    "postcss-scss": "^4.0.4",
     "raw-loader": "^4.0.2",
     "react-test-renderer": "^17.0.2",
     "rimraf": "^3.0.2",
     "rrweb-snapshot": "1.1.7",
-    "stylelint": "^13.9.0",
-    "stylelint-config-standard": "^20.0.0",
-    "stylelint-scss": "^3.18.0",
+    "stylelint": "^14.9.1",
+    "stylelint-config-standard": "^26.0.0",
+    "stylelint-scss": "^4.2.0",
     "typescript": "^4.7.4",
     "walk": "^2.3.14"
   },
diff --git a/res/css/_animations.scss b/res/css/_animations.pcss
similarity index 100%
rename from res/css/_animations.scss
rename to res/css/_animations.pcss
diff --git a/res/css/_common.scss b/res/css/_common.pcss
similarity index 92%
rename from res/css/_common.scss
rename to res/css/_common.pcss
index e04bf616f9..45e00d6ac7 100644
--- a/res/css/_common.scss
+++ b/res/css/_common.pcss
@@ -17,10 +17,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-@import "./_font-sizes.scss";
-@import "./_font-weights.scss";
-@import "./_animations.scss";
-@import "./_spacing.scss";
+@import "./_font-sizes.pcss";
+@import "./_font-weights.pcss";
+@import "./_animations.pcss";
+@import "./_spacing.pcss";
 @import url("maplibre-gl/dist/maplibre-gl.css");
 
 $hover-transition: 0.08s cubic-bezier(.46, .03, .52, .96); // quadratic
@@ -112,9 +112,9 @@ a:visited {
     color: $accent-alt;
 }
 
-input[type=text],
-input[type=search],
-input[type=password] {
+input[type="text"],
+input[type="search"],
+input[type="password"] {
     font-family: inherit;
     padding: 9px;
     font-size: $font-14px;
@@ -122,25 +122,25 @@ input[type=password] {
     min-width: 0;
 }
 
-input[type=text].mx_textinput_icon,
-input[type=search].mx_textinput_icon {
+input[type="text"].mx_textinput_icon,
+input[type="search"].mx_textinput_icon {
     padding-left: 36px;
     background-repeat: no-repeat;
     background-position: 10px center;
 }
 
 // FIXME THEME - Tint by CSS rather than referencing a duplicate asset
-input[type=text].mx_textinput_icon.mx_textinput_search,
-input[type=search].mx_textinput_icon.mx_textinput_search {
+input[type="text"].mx_textinput_icon.mx_textinput_search,
+input[type="search"].mx_textinput_icon.mx_textinput_search {
     background-image: url('$(res)/img/feather-customised/search-input.svg');
 }
 
 // dont search UI as not all browsers support it,
 // we implement it ourselves where needed instead
-input[type=search]::-webkit-search-decoration,
-input[type=search]::-webkit-search-cancel-button,
-input[type=search]::-webkit-search-results-button,
-input[type=search]::-webkit-search-results-decoration {
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
     display: none;
 }
 
@@ -150,7 +150,7 @@ textarea::placeholder {
     opacity: initial;
 }
 
-input[type=text], input[type=password], textarea {
+input[type="text"], input[type="password"], textarea {
     background-color: transparent;
     color: $primary-content;
 }
@@ -160,7 +160,7 @@ textarea {
     color: $primary-content;
 }
 
-input[type=text]:focus, input[type=password]:focus, textarea:focus {
+input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
     outline: none;
     box-shadow: none;
 }
@@ -194,15 +194,15 @@ legend {
 // appear to be part of the input
 
 .mx_Dialog, .mx_MatrixChat_wrapper {
-    .mx_textinput > input[type=text],
-    .mx_textinput > input[type=search] {
+    .mx_textinput > input[type="text"],
+    .mx_textinput > input[type="search"] {
         border: none;
         flex: 1;
         color: $primary-content;
     }
 
-    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
-    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
+    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"],
+    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"],
     .mx_textinput {
         display: block;
         box-sizing: border-box;
@@ -219,8 +219,8 @@ legend {
         align-items: center;
     }
 
-    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text]::placeholder,
-    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search]::placeholder,
+    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"]::placeholder,
+    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"]::placeholder,
     .mx_textinput input::placeholder {
         color: rgba($input-darker-fg-color, .75);
     }
@@ -230,8 +230,8 @@ legend {
 .dark-panel {
     background-color: $dark-panel-bg-color;
 
-    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
-    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
+    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"],
+    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"],
     .mx_textinput {
         color: $input-darker-fg-color;
         background-color: $background;
@@ -240,8 +240,8 @@ legend {
 }
 
 .light-panel {
-    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
-    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
+    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"],
+    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"],
     .mx_textinput {
         color: $input-darker-fg-color;
         background-color: $input-lighter-bg-color;
@@ -517,7 +517,7 @@ legend {
  * Elements that should not be styled like a dialog button are mentioned in a :not() pseudo-class.
  * For the widest browser support, we use multiple :not pseudo-classes instead of :not(.a, .b).
  */
-.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]):not(.mx_AccessibleButton),
+.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton),
 .mx_Dialog input[type="submit"],
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
 .mx_Dialog_buttons input[type="submit"] {
@@ -534,25 +534,25 @@ legend {
     font-family: inherit;
 }
 
-.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]):not(.mx_AccessibleButton):last-child {
+.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):last-child {
     margin-right: 0px;
 }
 
-.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]):not(.mx_AccessibleButton):hover,
+.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):hover,
 .mx_Dialog input[type="submit"]:hover,
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):hover,
 .mx_Dialog_buttons input[type="submit"]:hover {
     @mixin mx_DialogButton_hover;
 }
 
-.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]):not(.mx_AccessibleButton):focus,
+.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):focus,
 .mx_Dialog input[type="submit"]:focus,
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):focus,
 .mx_Dialog_buttons input[type="submit"]:focus {
     filter: brightness($focus-brightness);
 }
 
-.mx_Dialog button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]),
+.mx_Dialog button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]),
 .mx_Dialog input[type="submit"].mx_Dialog_primary,
 .mx_Dialog_buttons button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
 .mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
@@ -561,7 +561,7 @@ legend {
     min-width: 156px;
 }
 
-.mx_Dialog button.danger:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]),
+.mx_Dialog button.danger:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]),
 .mx_Dialog input[type="submit"].danger,
 .mx_Dialog_buttons button.danger:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
 .mx_Dialog_buttons input[type="submit"].danger {
@@ -570,13 +570,13 @@ legend {
     color: $accent-fg-color;
 }
 
-.mx_Dialog button.warning:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]),
+.mx_Dialog button.warning:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]),
 .mx_Dialog input[type="submit"].warning {
     border: solid 1px $alert;
     color: $alert;
 }
 
-.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|=maplibregl]):not(.mx_AccessibleButton):disabled,
+.mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):disabled,
 .mx_Dialog input[type="submit"]:disabled,
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):disabled,
 .mx_Dialog_buttons input[type="submit"]:disabled {
diff --git a/res/css/_components.pcss b/res/css/_components.pcss
new file mode 100644
index 0000000000..6903f473e1
--- /dev/null
+++ b/res/css/_components.pcss
@@ -0,0 +1,339 @@
+// autogenerated by rethemendex.sh
+@import "./_animations.pcss";
+@import "./_common.pcss";
+@import "./_font-sizes.pcss";
+@import "./_font-weights.pcss";
+@import "./_spacing.pcss";
+@import "./components/views/beacon/_BeaconListItem.pcss";
+@import "./components/views/beacon/_BeaconStatus.pcss";
+@import "./components/views/beacon/_BeaconStatusTooltip.pcss";
+@import "./components/views/beacon/_BeaconViewDialog.pcss";
+@import "./components/views/beacon/_DialogOwnBeaconStatus.pcss";
+@import "./components/views/beacon/_DialogSidebar.pcss";
+@import "./components/views/beacon/_LeftPanelLiveShareWarning.pcss";
+@import "./components/views/beacon/_LiveTimeRemaining.pcss";
+@import "./components/views/beacon/_OwnBeaconStatus.pcss";
+@import "./components/views/beacon/_RoomLiveShareWarning.pcss";
+@import "./components/views/beacon/_ShareLatestLocation.pcss";
+@import "./components/views/beacon/_StyledLiveBeaconIcon.pcss";
+@import "./components/views/location/_EnableLiveShare.pcss";
+@import "./components/views/location/_LiveDurationDropdown.pcss";
+@import "./components/views/location/_LocationShareMenu.pcss";
+@import "./components/views/location/_MapError.pcss";
+@import "./components/views/location/_MapFallback.pcss";
+@import "./components/views/location/_Marker.pcss";
+@import "./components/views/location/_ShareDialogButtons.pcss";
+@import "./components/views/location/_ShareType.pcss";
+@import "./components/views/location/_ZoomButtons.pcss";
+@import "./components/views/messages/_MBeaconBody.pcss";
+@import "./components/views/messages/shared/_MediaProcessingError.pcss";
+@import "./components/views/spaces/_QuickThemeSwitcher.pcss";
+@import "./structures/_AutoHideScrollbar.pcss";
+@import "./structures/_BackdropPanel.pcss";
+@import "./structures/_CompatibilityPage.pcss";
+@import "./structures/_ContextualMenu.pcss";
+@import "./structures/_FileDropTarget.pcss";
+@import "./structures/_FilePanel.pcss";
+@import "./structures/_GenericDropdownMenu.pcss";
+@import "./structures/_GenericErrorPage.pcss";
+@import "./structures/_HeaderButtons.pcss";
+@import "./structures/_HomePage.pcss";
+@import "./structures/_LeftPanel.pcss";
+@import "./structures/_MainSplit.pcss";
+@import "./structures/_MatrixChat.pcss";
+@import "./structures/_NonUrgentToastContainer.pcss";
+@import "./structures/_NotificationPanel.pcss";
+@import "./structures/_QuickSettingsButton.pcss";
+@import "./structures/_RightPanel.pcss";
+@import "./structures/_RoomDirectory.pcss";
+@import "./structures/_RoomSearch.pcss";
+@import "./structures/_RoomStatusBar.pcss";
+@import "./structures/_RoomView.pcss";
+@import "./structures/_ScrollPanel.pcss";
+@import "./structures/_SearchBox.pcss";
+@import "./structures/_SpaceHierarchy.pcss";
+@import "./structures/_SpacePanel.pcss";
+@import "./structures/_SpaceRoomView.pcss";
+@import "./structures/_SplashPage.pcss";
+@import "./structures/_TabbedView.pcss";
+@import "./structures/_ToastContainer.pcss";
+@import "./structures/_UploadBar.pcss";
+@import "./structures/_UserMenu.pcss";
+@import "./structures/_VideoRoomView.pcss";
+@import "./structures/_ViewSource.pcss";
+@import "./structures/auth/_CompleteSecurity.pcss";
+@import "./structures/auth/_Login.pcss";
+@import "./structures/auth/_Registration.pcss";
+@import "./structures/auth/_SetupEncryptionBody.pcss";
+@import "./views/audio_messages/_AudioPlayer.pcss";
+@import "./views/audio_messages/_PlayPauseButton.pcss";
+@import "./views/audio_messages/_PlaybackContainer.pcss";
+@import "./views/audio_messages/_SeekBar.pcss";
+@import "./views/audio_messages/_Waveform.pcss";
+@import "./views/auth/_AuthBody.pcss";
+@import "./views/auth/_AuthButtons.pcss";
+@import "./views/auth/_AuthFooter.pcss";
+@import "./views/auth/_AuthHeader.pcss";
+@import "./views/auth/_AuthHeaderLogo.pcss";
+@import "./views/auth/_AuthPage.pcss";
+@import "./views/auth/_CompleteSecurityBody.pcss";
+@import "./views/auth/_CountryDropdown.pcss";
+@import "./views/auth/_InteractiveAuthEntryComponents.pcss";
+@import "./views/auth/_LanguageSelector.pcss";
+@import "./views/auth/_PassphraseField.pcss";
+@import "./views/auth/_Welcome.pcss";
+@import "./views/avatars/_BaseAvatar.pcss";
+@import "./views/avatars/_DecoratedRoomAvatar.pcss";
+@import "./views/avatars/_WidgetAvatar.pcss";
+@import "./views/beta/_BetaCard.pcss";
+@import "./views/context_menus/_CallContextMenu.pcss";
+@import "./views/context_menus/_DeviceContextMenu.pcss";
+@import "./views/context_menus/_IconizedContextMenu.pcss";
+@import "./views/context_menus/_MessageContextMenu.pcss";
+@import "./views/context_menus/_RoomGeneralContextMenu.pcss";
+@import "./views/context_menus/_RoomNotificationContextMenu.pcss";
+@import "./views/dialogs/_AddExistingToSpaceDialog.pcss";
+@import "./views/dialogs/_AnalyticsLearnMoreDialog.pcss";
+@import "./views/dialogs/_BugReportDialog.pcss";
+@import "./views/dialogs/_BulkRedactDialog.pcss";
+@import "./views/dialogs/_ChangelogDialog.pcss";
+@import "./views/dialogs/_ChatCreateOrReuseChatDialog.pcss";
+@import "./views/dialogs/_CompoundDialog.pcss";
+@import "./views/dialogs/_ConfirmSpaceUserActionDialog.pcss";
+@import "./views/dialogs/_ConfirmUserActionDialog.pcss";
+@import "./views/dialogs/_CreateRoomDialog.pcss";
+@import "./views/dialogs/_CreateSubspaceDialog.pcss";
+@import "./views/dialogs/_DeactivateAccountDialog.pcss";
+@import "./views/dialogs/_DevtoolsDialog.pcss";
+@import "./views/dialogs/_ExportDialog.pcss";
+@import "./views/dialogs/_FeedbackDialog.pcss";
+@import "./views/dialogs/_ForwardDialog.pcss";
+@import "./views/dialogs/_GenericFeatureFeedbackDialog.pcss";
+@import "./views/dialogs/_HostSignupDialog.pcss";
+@import "./views/dialogs/_IncomingSasDialog.pcss";
+@import "./views/dialogs/_InviteDialog.pcss";
+@import "./views/dialogs/_JoinRuleDropdown.pcss";
+@import "./views/dialogs/_LeaveSpaceDialog.pcss";
+@import "./views/dialogs/_LocationViewDialog.pcss";
+@import "./views/dialogs/_ManageRestrictedJoinRuleDialog.pcss";
+@import "./views/dialogs/_MessageEditHistoryDialog.pcss";
+@import "./views/dialogs/_ModalWidgetDialog.pcss";
+@import "./views/dialogs/_NewSessionReviewDialog.pcss";
+@import "./views/dialogs/_PollCreateDialog.pcss";
+@import "./views/dialogs/_RegistrationEmailPromptDialog.pcss";
+@import "./views/dialogs/_RoomSettingsDialog.pcss";
+@import "./views/dialogs/_RoomSettingsDialogBridges.pcss";
+@import "./views/dialogs/_RoomUpgradeDialog.pcss";
+@import "./views/dialogs/_RoomUpgradeWarningDialog.pcss";
+@import "./views/dialogs/_ServerOfflineDialog.pcss";
+@import "./views/dialogs/_ServerPickerDialog.pcss";
+@import "./views/dialogs/_SetEmailDialog.pcss";
+@import "./views/dialogs/_SettingsDialog.pcss";
+@import "./views/dialogs/_ShareDialog.pcss";
+@import "./views/dialogs/_SlashCommandHelpDialog.pcss";
+@import "./views/dialogs/_SpacePreferencesDialog.pcss";
+@import "./views/dialogs/_SpaceSettingsDialog.pcss";
+@import "./views/dialogs/_SpotlightDialog.pcss";
+@import "./views/dialogs/_TermsDialog.pcss";
+@import "./views/dialogs/_UntrustedDeviceDialog.pcss";
+@import "./views/dialogs/_UploadConfirmDialog.pcss";
+@import "./views/dialogs/_UserSettingsDialog.pcss";
+@import "./views/dialogs/_WidgetCapabilitiesPromptDialog.pcss";
+@import "./views/dialogs/security/_AccessSecretStorageDialog.pcss";
+@import "./views/dialogs/security/_CreateCrossSigningDialog.pcss";
+@import "./views/dialogs/security/_CreateKeyBackupDialog.pcss";
+@import "./views/dialogs/security/_CreateSecretStorageDialog.pcss";
+@import "./views/dialogs/security/_KeyBackupFailedDialog.pcss";
+@import "./views/dialogs/security/_RestoreKeyBackupDialog.pcss";
+@import "./views/directory/_NetworkDropdown.pcss";
+@import "./views/elements/_AccessibleButton.pcss";
+@import "./views/elements/_CopyableText.pcss";
+@import "./views/elements/_DesktopCapturerSourcePicker.pcss";
+@import "./views/elements/_DialPadBackspaceButton.pcss";
+@import "./views/elements/_DirectorySearchBox.pcss";
+@import "./views/elements/_Dropdown.pcss";
+@import "./views/elements/_EditableItemList.pcss";
+@import "./views/elements/_ErrorBoundary.pcss";
+@import "./views/elements/_EventTilePreview.pcss";
+@import "./views/elements/_ExternalLink.pcss";
+@import "./views/elements/_FacePile.pcss";
+@import "./views/elements/_Field.pcss";
+@import "./views/elements/_GenericEventListSummary.pcss";
+@import "./views/elements/_ImageView.pcss";
+@import "./views/elements/_InfoTooltip.pcss";
+@import "./views/elements/_InlineSpinner.pcss";
+@import "./views/elements/_InteractiveTooltip.pcss";
+@import "./views/elements/_InviteReason.pcss";
+@import "./views/elements/_LabelledCheckbox.pcss";
+@import "./views/elements/_ManageIntegsButton.pcss";
+@import "./views/elements/_MiniAvatarUploader.pcss";
+@import "./views/elements/_Pill.pcss";
+@import "./views/elements/_PowerSelector.pcss";
+@import "./views/elements/_ProgressBar.pcss";
+@import "./views/elements/_QRCode.pcss";
+@import "./views/elements/_ReplyChain.pcss";
+@import "./views/elements/_ResizeHandle.pcss";
+@import "./views/elements/_RichText.pcss";
+@import "./views/elements/_RoleButton.pcss";
+@import "./views/elements/_RoomAliasField.pcss";
+@import "./views/elements/_SSOButtons.pcss";
+@import "./views/elements/_SearchWarning.pcss";
+@import "./views/elements/_ServerPicker.pcss";
+@import "./views/elements/_SettingsFlag.pcss";
+@import "./views/elements/_Slider.pcss";
+@import "./views/elements/_Spinner.pcss";
+@import "./views/elements/_StyledCheckbox.pcss";
+@import "./views/elements/_StyledRadioButton.pcss";
+@import "./views/elements/_SyntaxHighlight.pcss";
+@import "./views/elements/_TagComposer.pcss";
+@import "./views/elements/_TextWithTooltip.pcss";
+@import "./views/elements/_ToggleSwitch.pcss";
+@import "./views/elements/_Tooltip.pcss";
+@import "./views/elements/_TooltipButton.pcss";
+@import "./views/elements/_UseCaseSelection.pcss";
+@import "./views/elements/_UseCaseSelectionButton.pcss";
+@import "./views/elements/_Validation.pcss";
+@import "./views/emojipicker/_EmojiPicker.pcss";
+@import "./views/location/_LocationPicker.pcss";
+@import "./views/messages/_CallEvent.pcss";
+@import "./views/messages/_CreateEvent.pcss";
+@import "./views/messages/_DateSeparator.pcss";
+@import "./views/messages/_DisambiguatedProfile.pcss";
+@import "./views/messages/_EventTileBubble.pcss";
+@import "./views/messages/_HiddenBody.pcss";
+@import "./views/messages/_JumpToDatePicker.pcss";
+@import "./views/messages/_MEmoteBody.pcss";
+@import "./views/messages/_MFileBody.pcss";
+@import "./views/messages/_MImageBody.pcss";
+@import "./views/messages/_MImageReplyBody.pcss";
+@import "./views/messages/_MJitsiWidgetEvent.pcss";
+@import "./views/messages/_MLocationBody.pcss";
+@import "./views/messages/_MNoticeBody.pcss";
+@import "./views/messages/_MPollBody.pcss";
+@import "./views/messages/_MStickerBody.pcss";
+@import "./views/messages/_MTextBody.pcss";
+@import "./views/messages/_MVideoBody.pcss";
+@import "./views/messages/_MediaBody.pcss";
+@import "./views/messages/_MessageActionBar.pcss";
+@import "./views/messages/_MessageTimestamp.pcss";
+@import "./views/messages/_MjolnirBody.pcss";
+@import "./views/messages/_ReactionsRow.pcss";
+@import "./views/messages/_ReactionsRowButton.pcss";
+@import "./views/messages/_RedactedBody.pcss";
+@import "./views/messages/_RoomAvatarEvent.pcss";
+@import "./views/messages/_TextualEvent.pcss";
+@import "./views/messages/_UnknownBody.pcss";
+@import "./views/messages/_ViewSourceEvent.pcss";
+@import "./views/messages/_common_CryptoEvent.pcss";
+@import "./views/right_panel/_BaseCard.pcss";
+@import "./views/right_panel/_EncryptionInfo.pcss";
+@import "./views/right_panel/_PinnedMessagesCard.pcss";
+@import "./views/right_panel/_RoomSummaryCard.pcss";
+@import "./views/right_panel/_ThreadPanel.pcss";
+@import "./views/right_panel/_TimelineCard.pcss";
+@import "./views/right_panel/_UserInfo.pcss";
+@import "./views/right_panel/_VerificationPanel.pcss";
+@import "./views/right_panel/_WidgetCard.pcss";
+@import "./views/room_settings/_AliasSettings.pcss";
+@import "./views/rooms/_AppsDrawer.pcss";
+@import "./views/rooms/_Autocomplete.pcss";
+@import "./views/rooms/_AuxPanel.pcss";
+@import "./views/rooms/_BasicMessageComposer.pcss";
+@import "./views/rooms/_E2EIcon.pcss";
+@import "./views/rooms/_EditMessageComposer.pcss";
+@import "./views/rooms/_EntityTile.pcss";
+@import "./views/rooms/_EventBubbleTile.pcss";
+@import "./views/rooms/_EventTile.pcss";
+@import "./views/rooms/_HistoryTile.pcss";
+@import "./views/rooms/_IRCLayout.pcss";
+@import "./views/rooms/_JumpToBottomButton.pcss";
+@import "./views/rooms/_LinkPreviewGroup.pcss";
+@import "./views/rooms/_LinkPreviewWidget.pcss";
+@import "./views/rooms/_MemberInfo.pcss";
+@import "./views/rooms/_MemberList.pcss";
+@import "./views/rooms/_MessageComposer.pcss";
+@import "./views/rooms/_MessageComposerFormatBar.pcss";
+@import "./views/rooms/_NewRoomIntro.pcss";
+@import "./views/rooms/_NotificationBadge.pcss";
+@import "./views/rooms/_PinnedEventTile.pcss";
+@import "./views/rooms/_PresenceLabel.pcss";
+@import "./views/rooms/_ReadReceiptGroup.pcss";
+@import "./views/rooms/_RecentlyViewedButton.pcss";
+@import "./views/rooms/_ReplyPreview.pcss";
+@import "./views/rooms/_ReplyTile.pcss";
+@import "./views/rooms/_RoomBreadcrumbs.pcss";
+@import "./views/rooms/_RoomHeader.pcss";
+@import "./views/rooms/_RoomInfoLine.pcss";
+@import "./views/rooms/_RoomList.pcss";
+@import "./views/rooms/_RoomListHeader.pcss";
+@import "./views/rooms/_RoomPreviewBar.pcss";
+@import "./views/rooms/_RoomPreviewCard.pcss";
+@import "./views/rooms/_RoomSublist.pcss";
+@import "./views/rooms/_RoomTile.pcss";
+@import "./views/rooms/_RoomUpgradeWarningBar.pcss";
+@import "./views/rooms/_SearchBar.pcss";
+@import "./views/rooms/_SendMessageComposer.pcss";
+@import "./views/rooms/_Stickers.pcss";
+@import "./views/rooms/_ThreadSummary.pcss";
+@import "./views/rooms/_TopUnreadMessagesBar.pcss";
+@import "./views/rooms/_VideoRoomSummary.pcss";
+@import "./views/rooms/_VoiceRecordComposerTile.pcss";
+@import "./views/rooms/_WhoIsTypingTile.pcss";
+@import "./views/settings/_AvatarSetting.pcss";
+@import "./views/settings/_CrossSigningPanel.pcss";
+@import "./views/settings/_CryptographyPanel.pcss";
+@import "./views/settings/_DevicesPanel.pcss";
+@import "./views/settings/_EmailAddresses.pcss";
+@import "./views/settings/_FontScalingPanel.pcss";
+@import "./views/settings/_ImageSizePanel.pcss";
+@import "./views/settings/_IntegrationManager.pcss";
+@import "./views/settings/_JoinRuleSettings.pcss";
+@import "./views/settings/_KeyboardShortcut.pcss";
+@import "./views/settings/_LayoutSwitcher.pcss";
+@import "./views/settings/_Notifications.pcss";
+@import "./views/settings/_PhoneNumbers.pcss";
+@import "./views/settings/_ProfileSettings.pcss";
+@import "./views/settings/_SecureBackupPanel.pcss";
+@import "./views/settings/_SetIdServer.pcss";
+@import "./views/settings/_SetIntegrationManager.pcss";
+@import "./views/settings/_SettingsFieldset.pcss";
+@import "./views/settings/_SpellCheckLanguages.pcss";
+@import "./views/settings/_ThemeChoicePanel.pcss";
+@import "./views/settings/_UpdateCheckButton.pcss";
+@import "./views/settings/tabs/_SettingsTab.pcss";
+@import "./views/settings/tabs/room/_GeneralRoomSettingsTab.pcss";
+@import "./views/settings/tabs/room/_NotificationSettingsTab.pcss";
+@import "./views/settings/tabs/room/_RolesRoomSettingsTab.pcss";
+@import "./views/settings/tabs/room/_SecurityRoomSettingsTab.pcss";
+@import "./views/settings/tabs/user/_AppearanceUserSettingsTab.pcss";
+@import "./views/settings/tabs/user/_GeneralUserSettingsTab.pcss";
+@import "./views/settings/tabs/user/_HelpUserSettingsTab.pcss";
+@import "./views/settings/tabs/user/_KeyboardUserSettingsTab.pcss";
+@import "./views/settings/tabs/user/_LabsUserSettingsTab.pcss";
+@import "./views/settings/tabs/user/_MjolnirUserSettingsTab.pcss";
+@import "./views/settings/tabs/user/_PreferencesUserSettingsTab.pcss";
+@import "./views/settings/tabs/user/_SecurityUserSettingsTab.pcss";
+@import "./views/settings/tabs/user/_SidebarUserSettingsTab.pcss";
+@import "./views/settings/tabs/user/_VoiceUserSettingsTab.pcss";
+@import "./views/spaces/_SpaceBasicSettings.pcss";
+@import "./views/spaces/_SpaceChildrenPicker.pcss";
+@import "./views/spaces/_SpaceCreateMenu.pcss";
+@import "./views/spaces/_SpacePublicShare.pcss";
+@import "./views/terms/_InlineTermsAgreement.pcss";
+@import "./views/toasts/_AnalyticsToast.pcss";
+@import "./views/toasts/_IncomingCallToast.pcss";
+@import "./views/toasts/_NonUrgentEchoFailureToast.pcss";
+@import "./views/typography/_Heading.pcss";
+@import "./views/verification/_VerificationShowSas.pcss";
+@import "./views/voip/CallView/_CallViewButtons.pcss";
+@import "./views/voip/_CallPreview.pcss";
+@import "./views/voip/_CallView.pcss";
+@import "./views/voip/_CallViewForRoom.pcss";
+@import "./views/voip/_CallViewHeader.pcss";
+@import "./views/voip/_CallViewSidebar.pcss";
+@import "./views/voip/_DialPad.pcss";
+@import "./views/voip/_DialPadContextMenu.pcss";
+@import "./views/voip/_DialPadModal.pcss";
+@import "./views/voip/_PiPContainer.pcss";
+@import "./views/voip/_VideoFeed.pcss";
+@import "./views/voip/_VideoLobby.pcss";
diff --git a/res/css/_components.scss b/res/css/_components.scss
deleted file mode 100644
index 0e7187e646..0000000000
--- a/res/css/_components.scss
+++ /dev/null
@@ -1,339 +0,0 @@
-// autogenerated by rethemendex.sh
-@import "./_animations.scss";
-@import "./_common.scss";
-@import "./_font-sizes.scss";
-@import "./_font-weights.scss";
-@import "./_spacing.scss";
-@import "./components/views/beacon/_BeaconListItem.scss";
-@import "./components/views/beacon/_BeaconStatus.scss";
-@import "./components/views/beacon/_BeaconStatusTooltip.scss";
-@import "./components/views/beacon/_BeaconViewDialog.scss";
-@import "./components/views/beacon/_DialogOwnBeaconStatus.scss";
-@import "./components/views/beacon/_DialogSidebar.scss";
-@import "./components/views/beacon/_LeftPanelLiveShareWarning.scss";
-@import "./components/views/beacon/_LiveTimeRemaining.scss";
-@import "./components/views/beacon/_OwnBeaconStatus.scss";
-@import "./components/views/beacon/_RoomLiveShareWarning.scss";
-@import "./components/views/beacon/_ShareLatestLocation.scss";
-@import "./components/views/beacon/_StyledLiveBeaconIcon.scss";
-@import "./components/views/location/_EnableLiveShare.scss";
-@import "./components/views/location/_LiveDurationDropdown.scss";
-@import "./components/views/location/_LocationShareMenu.scss";
-@import "./components/views/location/_MapError.scss";
-@import "./components/views/location/_MapFallback.scss";
-@import "./components/views/location/_Marker.scss";
-@import "./components/views/location/_ShareDialogButtons.scss";
-@import "./components/views/location/_ShareType.scss";
-@import "./components/views/location/_ZoomButtons.scss";
-@import "./components/views/messages/_MBeaconBody.scss";
-@import "./components/views/messages/shared/_MediaProcessingError.scss";
-@import "./components/views/spaces/_QuickThemeSwitcher.scss";
-@import "./structures/_AutoHideScrollbar.scss";
-@import "./structures/_BackdropPanel.scss";
-@import "./structures/_CompatibilityPage.scss";
-@import "./structures/_ContextualMenu.scss";
-@import "./structures/_FileDropTarget.scss";
-@import "./structures/_FilePanel.scss";
-@import "./structures/_GenericDropdownMenu.scss";
-@import "./structures/_GenericErrorPage.scss";
-@import "./structures/_HeaderButtons.scss";
-@import "./structures/_HomePage.scss";
-@import "./structures/_LeftPanel.scss";
-@import "./structures/_MainSplit.scss";
-@import "./structures/_MatrixChat.scss";
-@import "./structures/_NonUrgentToastContainer.scss";
-@import "./structures/_NotificationPanel.scss";
-@import "./structures/_QuickSettingsButton.scss";
-@import "./structures/_RightPanel.scss";
-@import "./structures/_RoomDirectory.scss";
-@import "./structures/_RoomSearch.scss";
-@import "./structures/_RoomStatusBar.scss";
-@import "./structures/_RoomView.scss";
-@import "./structures/_ScrollPanel.scss";
-@import "./structures/_SearchBox.scss";
-@import "./structures/_SpaceHierarchy.scss";
-@import "./structures/_SpacePanel.scss";
-@import "./structures/_SpaceRoomView.scss";
-@import "./structures/_SplashPage.scss";
-@import "./structures/_TabbedView.scss";
-@import "./structures/_ToastContainer.scss";
-@import "./structures/_UploadBar.scss";
-@import "./structures/_UserMenu.scss";
-@import "./structures/_VideoRoomView.scss";
-@import "./structures/_ViewSource.scss";
-@import "./structures/auth/_CompleteSecurity.scss";
-@import "./structures/auth/_Login.scss";
-@import "./structures/auth/_Registration.scss";
-@import "./structures/auth/_SetupEncryptionBody.scss";
-@import "./views/audio_messages/_AudioPlayer.scss";
-@import "./views/audio_messages/_PlayPauseButton.scss";
-@import "./views/audio_messages/_PlaybackContainer.scss";
-@import "./views/audio_messages/_SeekBar.scss";
-@import "./views/audio_messages/_Waveform.scss";
-@import "./views/auth/_AuthBody.scss";
-@import "./views/auth/_AuthButtons.scss";
-@import "./views/auth/_AuthFooter.scss";
-@import "./views/auth/_AuthHeader.scss";
-@import "./views/auth/_AuthHeaderLogo.scss";
-@import "./views/auth/_AuthPage.scss";
-@import "./views/auth/_CompleteSecurityBody.scss";
-@import "./views/auth/_CountryDropdown.scss";
-@import "./views/auth/_InteractiveAuthEntryComponents.scss";
-@import "./views/auth/_LanguageSelector.scss";
-@import "./views/auth/_PassphraseField.scss";
-@import "./views/auth/_Welcome.scss";
-@import "./views/avatars/_BaseAvatar.scss";
-@import "./views/avatars/_DecoratedRoomAvatar.scss";
-@import "./views/avatars/_WidgetAvatar.scss";
-@import "./views/beta/_BetaCard.scss";
-@import "./views/context_menus/_CallContextMenu.scss";
-@import "./views/context_menus/_DeviceContextMenu.scss";
-@import "./views/context_menus/_IconizedContextMenu.scss";
-@import "./views/context_menus/_MessageContextMenu.scss";
-@import "./views/context_menus/_RoomGeneralContextMenu.scss";
-@import "./views/context_menus/_RoomNotificationContextMenu.scss";
-@import "./views/dialogs/_AddExistingToSpaceDialog.scss";
-@import "./views/dialogs/_AnalyticsLearnMoreDialog.scss";
-@import "./views/dialogs/_BugReportDialog.scss";
-@import "./views/dialogs/_BulkRedactDialog.scss";
-@import "./views/dialogs/_ChangelogDialog.scss";
-@import "./views/dialogs/_ChatCreateOrReuseChatDialog.scss";
-@import "./views/dialogs/_CompoundDialog.scss";
-@import "./views/dialogs/_ConfirmSpaceUserActionDialog.scss";
-@import "./views/dialogs/_ConfirmUserActionDialog.scss";
-@import "./views/dialogs/_CreateRoomDialog.scss";
-@import "./views/dialogs/_CreateSubspaceDialog.scss";
-@import "./views/dialogs/_DeactivateAccountDialog.scss";
-@import "./views/dialogs/_DevtoolsDialog.scss";
-@import "./views/dialogs/_ExportDialog.scss";
-@import "./views/dialogs/_FeedbackDialog.scss";
-@import "./views/dialogs/_ForwardDialog.scss";
-@import "./views/dialogs/_GenericFeatureFeedbackDialog.scss";
-@import "./views/dialogs/_HostSignupDialog.scss";
-@import "./views/dialogs/_IncomingSasDialog.scss";
-@import "./views/dialogs/_InviteDialog.scss";
-@import "./views/dialogs/_JoinRuleDropdown.scss";
-@import "./views/dialogs/_LeaveSpaceDialog.scss";
-@import "./views/dialogs/_LocationViewDialog.scss";
-@import "./views/dialogs/_ManageRestrictedJoinRuleDialog.scss";
-@import "./views/dialogs/_MessageEditHistoryDialog.scss";
-@import "./views/dialogs/_ModalWidgetDialog.scss";
-@import "./views/dialogs/_NewSessionReviewDialog.scss";
-@import "./views/dialogs/_PollCreateDialog.scss";
-@import "./views/dialogs/_RegistrationEmailPromptDialog.scss";
-@import "./views/dialogs/_RoomSettingsDialog.scss";
-@import "./views/dialogs/_RoomSettingsDialogBridges.scss";
-@import "./views/dialogs/_RoomUpgradeDialog.scss";
-@import "./views/dialogs/_RoomUpgradeWarningDialog.scss";
-@import "./views/dialogs/_ServerOfflineDialog.scss";
-@import "./views/dialogs/_ServerPickerDialog.scss";
-@import "./views/dialogs/_SetEmailDialog.scss";
-@import "./views/dialogs/_SettingsDialog.scss";
-@import "./views/dialogs/_ShareDialog.scss";
-@import "./views/dialogs/_SlashCommandHelpDialog.scss";
-@import "./views/dialogs/_SpacePreferencesDialog.scss";
-@import "./views/dialogs/_SpaceSettingsDialog.scss";
-@import "./views/dialogs/_SpotlightDialog.scss";
-@import "./views/dialogs/_TermsDialog.scss";
-@import "./views/dialogs/_UntrustedDeviceDialog.scss";
-@import "./views/dialogs/_UploadConfirmDialog.scss";
-@import "./views/dialogs/_UserSettingsDialog.scss";
-@import "./views/dialogs/_WidgetCapabilitiesPromptDialog.scss";
-@import "./views/dialogs/security/_AccessSecretStorageDialog.scss";
-@import "./views/dialogs/security/_CreateCrossSigningDialog.scss";
-@import "./views/dialogs/security/_CreateKeyBackupDialog.scss";
-@import "./views/dialogs/security/_CreateSecretStorageDialog.scss";
-@import "./views/dialogs/security/_KeyBackupFailedDialog.scss";
-@import "./views/dialogs/security/_RestoreKeyBackupDialog.scss";
-@import "./views/directory/_NetworkDropdown.scss";
-@import "./views/elements/_AccessibleButton.scss";
-@import "./views/elements/_CopyableText.scss";
-@import "./views/elements/_DesktopCapturerSourcePicker.scss";
-@import "./views/elements/_DialPadBackspaceButton.scss";
-@import "./views/elements/_DirectorySearchBox.scss";
-@import "./views/elements/_Dropdown.scss";
-@import "./views/elements/_EditableItemList.scss";
-@import "./views/elements/_ErrorBoundary.scss";
-@import "./views/elements/_EventTilePreview.scss";
-@import "./views/elements/_ExternalLink.scss";
-@import "./views/elements/_FacePile.scss";
-@import "./views/elements/_Field.scss";
-@import "./views/elements/_GenericEventListSummary.scss";
-@import "./views/elements/_ImageView.scss";
-@import "./views/elements/_InfoTooltip.scss";
-@import "./views/elements/_InlineSpinner.scss";
-@import "./views/elements/_InteractiveTooltip.scss";
-@import "./views/elements/_InviteReason.scss";
-@import "./views/elements/_LabelledCheckbox.scss";
-@import "./views/elements/_ManageIntegsButton.scss";
-@import "./views/elements/_MiniAvatarUploader.scss";
-@import "./views/elements/_Pill.scss";
-@import "./views/elements/_PowerSelector.scss";
-@import "./views/elements/_ProgressBar.scss";
-@import "./views/elements/_QRCode.scss";
-@import "./views/elements/_ReplyChain.scss";
-@import "./views/elements/_ResizeHandle.scss";
-@import "./views/elements/_RichText.scss";
-@import "./views/elements/_RoleButton.scss";
-@import "./views/elements/_RoomAliasField.scss";
-@import "./views/elements/_SSOButtons.scss";
-@import "./views/elements/_SearchWarning.scss";
-@import "./views/elements/_ServerPicker.scss";
-@import "./views/elements/_SettingsFlag.scss";
-@import "./views/elements/_Slider.scss";
-@import "./views/elements/_Spinner.scss";
-@import "./views/elements/_StyledCheckbox.scss";
-@import "./views/elements/_StyledRadioButton.scss";
-@import "./views/elements/_SyntaxHighlight.scss";
-@import "./views/elements/_TagComposer.scss";
-@import "./views/elements/_TextWithTooltip.scss";
-@import "./views/elements/_ToggleSwitch.scss";
-@import "./views/elements/_Tooltip.scss";
-@import "./views/elements/_TooltipButton.scss";
-@import "./views/elements/_UseCaseSelection.scss";
-@import "./views/elements/_UseCaseSelectionButton.scss";
-@import "./views/elements/_Validation.scss";
-@import "./views/emojipicker/_EmojiPicker.scss";
-@import "./views/location/_LocationPicker.scss";
-@import "./views/messages/_CallEvent.scss";
-@import "./views/messages/_CreateEvent.scss";
-@import "./views/messages/_DateSeparator.scss";
-@import "./views/messages/_DisambiguatedProfile.scss";
-@import "./views/messages/_EventTileBubble.scss";
-@import "./views/messages/_HiddenBody.scss";
-@import "./views/messages/_JumpToDatePicker.scss";
-@import "./views/messages/_MEmoteBody.scss";
-@import "./views/messages/_MFileBody.scss";
-@import "./views/messages/_MImageBody.scss";
-@import "./views/messages/_MImageReplyBody.scss";
-@import "./views/messages/_MJitsiWidgetEvent.scss";
-@import "./views/messages/_MLocationBody.scss";
-@import "./views/messages/_MNoticeBody.scss";
-@import "./views/messages/_MPollBody.scss";
-@import "./views/messages/_MStickerBody.scss";
-@import "./views/messages/_MTextBody.scss";
-@import "./views/messages/_MVideoBody.scss";
-@import "./views/messages/_MediaBody.scss";
-@import "./views/messages/_MessageActionBar.scss";
-@import "./views/messages/_MessageTimestamp.scss";
-@import "./views/messages/_MjolnirBody.scss";
-@import "./views/messages/_ReactionsRow.scss";
-@import "./views/messages/_ReactionsRowButton.scss";
-@import "./views/messages/_RedactedBody.scss";
-@import "./views/messages/_RoomAvatarEvent.scss";
-@import "./views/messages/_TextualEvent.scss";
-@import "./views/messages/_UnknownBody.scss";
-@import "./views/messages/_ViewSourceEvent.scss";
-@import "./views/messages/_common_CryptoEvent.scss";
-@import "./views/right_panel/_BaseCard.scss";
-@import "./views/right_panel/_EncryptionInfo.scss";
-@import "./views/right_panel/_PinnedMessagesCard.scss";
-@import "./views/right_panel/_RoomSummaryCard.scss";
-@import "./views/right_panel/_ThreadPanel.scss";
-@import "./views/right_panel/_TimelineCard.scss";
-@import "./views/right_panel/_UserInfo.scss";
-@import "./views/right_panel/_VerificationPanel.scss";
-@import "./views/right_panel/_WidgetCard.scss";
-@import "./views/room_settings/_AliasSettings.scss";
-@import "./views/rooms/_AppsDrawer.scss";
-@import "./views/rooms/_Autocomplete.scss";
-@import "./views/rooms/_AuxPanel.scss";
-@import "./views/rooms/_BasicMessageComposer.scss";
-@import "./views/rooms/_E2EIcon.scss";
-@import "./views/rooms/_EditMessageComposer.scss";
-@import "./views/rooms/_EntityTile.scss";
-@import "./views/rooms/_EventBubbleTile.scss";
-@import "./views/rooms/_EventTile.scss";
-@import "./views/rooms/_HistoryTile.scss";
-@import "./views/rooms/_IRCLayout.scss";
-@import "./views/rooms/_JumpToBottomButton.scss";
-@import "./views/rooms/_LinkPreviewGroup.scss";
-@import "./views/rooms/_LinkPreviewWidget.scss";
-@import "./views/rooms/_MemberInfo.scss";
-@import "./views/rooms/_MemberList.scss";
-@import "./views/rooms/_MessageComposer.scss";
-@import "./views/rooms/_MessageComposerFormatBar.scss";
-@import "./views/rooms/_NewRoomIntro.scss";
-@import "./views/rooms/_NotificationBadge.scss";
-@import "./views/rooms/_PinnedEventTile.scss";
-@import "./views/rooms/_PresenceLabel.scss";
-@import "./views/rooms/_ReadReceiptGroup.scss";
-@import "./views/rooms/_RecentlyViewedButton.scss";
-@import "./views/rooms/_ReplyPreview.scss";
-@import "./views/rooms/_ReplyTile.scss";
-@import "./views/rooms/_RoomBreadcrumbs.scss";
-@import "./views/rooms/_RoomHeader.scss";
-@import "./views/rooms/_RoomInfoLine.scss";
-@import "./views/rooms/_RoomList.scss";
-@import "./views/rooms/_RoomListHeader.scss";
-@import "./views/rooms/_RoomPreviewBar.scss";
-@import "./views/rooms/_RoomPreviewCard.scss";
-@import "./views/rooms/_RoomSublist.scss";
-@import "./views/rooms/_RoomTile.scss";
-@import "./views/rooms/_RoomUpgradeWarningBar.scss";
-@import "./views/rooms/_SearchBar.scss";
-@import "./views/rooms/_SendMessageComposer.scss";
-@import "./views/rooms/_Stickers.scss";
-@import "./views/rooms/_ThreadSummary.scss";
-@import "./views/rooms/_TopUnreadMessagesBar.scss";
-@import "./views/rooms/_VideoRoomSummary.scss";
-@import "./views/rooms/_VoiceRecordComposerTile.scss";
-@import "./views/rooms/_WhoIsTypingTile.scss";
-@import "./views/settings/_AvatarSetting.scss";
-@import "./views/settings/_CrossSigningPanel.scss";
-@import "./views/settings/_CryptographyPanel.scss";
-@import "./views/settings/_DevicesPanel.scss";
-@import "./views/settings/_EmailAddresses.scss";
-@import "./views/settings/_FontScalingPanel.scss";
-@import "./views/settings/_ImageSizePanel.scss";
-@import "./views/settings/_IntegrationManager.scss";
-@import "./views/settings/_JoinRuleSettings.scss";
-@import "./views/settings/_KeyboardShortcut.scss";
-@import "./views/settings/_LayoutSwitcher.scss";
-@import "./views/settings/_Notifications.scss";
-@import "./views/settings/_PhoneNumbers.scss";
-@import "./views/settings/_ProfileSettings.scss";
-@import "./views/settings/_SecureBackupPanel.scss";
-@import "./views/settings/_SetIdServer.scss";
-@import "./views/settings/_SetIntegrationManager.scss";
-@import "./views/settings/_SettingsFieldset.scss";
-@import "./views/settings/_SpellCheckLanguages.scss";
-@import "./views/settings/_ThemeChoicePanel.scss";
-@import "./views/settings/_UpdateCheckButton.scss";
-@import "./views/settings/tabs/_SettingsTab.scss";
-@import "./views/settings/tabs/room/_GeneralRoomSettingsTab.scss";
-@import "./views/settings/tabs/room/_NotificationSettingsTab.scss";
-@import "./views/settings/tabs/room/_RolesRoomSettingsTab.scss";
-@import "./views/settings/tabs/room/_SecurityRoomSettingsTab.scss";
-@import "./views/settings/tabs/user/_AppearanceUserSettingsTab.scss";
-@import "./views/settings/tabs/user/_GeneralUserSettingsTab.scss";
-@import "./views/settings/tabs/user/_HelpUserSettingsTab.scss";
-@import "./views/settings/tabs/user/_KeyboardUserSettingsTab.scss";
-@import "./views/settings/tabs/user/_LabsUserSettingsTab.scss";
-@import "./views/settings/tabs/user/_MjolnirUserSettingsTab.scss";
-@import "./views/settings/tabs/user/_PreferencesUserSettingsTab.scss";
-@import "./views/settings/tabs/user/_SecurityUserSettingsTab.scss";
-@import "./views/settings/tabs/user/_SidebarUserSettingsTab.scss";
-@import "./views/settings/tabs/user/_VoiceUserSettingsTab.scss";
-@import "./views/spaces/_SpaceBasicSettings.scss";
-@import "./views/spaces/_SpaceChildrenPicker.scss";
-@import "./views/spaces/_SpaceCreateMenu.scss";
-@import "./views/spaces/_SpacePublicShare.scss";
-@import "./views/terms/_InlineTermsAgreement.scss";
-@import "./views/toasts/_AnalyticsToast.scss";
-@import "./views/toasts/_IncomingCallToast.scss";
-@import "./views/toasts/_NonUrgentEchoFailureToast.scss";
-@import "./views/typography/_Heading.scss";
-@import "./views/verification/_VerificationShowSas.scss";
-@import "./views/voip/CallView/_CallViewButtons.scss";
-@import "./views/voip/_CallPreview.scss";
-@import "./views/voip/_CallView.scss";
-@import "./views/voip/_CallViewForRoom.scss";
-@import "./views/voip/_CallViewHeader.scss";
-@import "./views/voip/_CallViewSidebar.scss";
-@import "./views/voip/_DialPad.scss";
-@import "./views/voip/_DialPadContextMenu.scss";
-@import "./views/voip/_DialPadModal.scss";
-@import "./views/voip/_PiPContainer.scss";
-@import "./views/voip/_VideoFeed.scss";
-@import "./views/voip/_VideoLobby.scss";
diff --git a/res/css/_font-sizes.scss b/res/css/_font-sizes.pcss
similarity index 100%
rename from res/css/_font-sizes.scss
rename to res/css/_font-sizes.pcss
diff --git a/res/css/_font-weights.scss b/res/css/_font-weights.pcss
similarity index 100%
rename from res/css/_font-weights.scss
rename to res/css/_font-weights.pcss
diff --git a/res/css/_spacing.scss b/res/css/_spacing.pcss
similarity index 100%
rename from res/css/_spacing.scss
rename to res/css/_spacing.pcss
diff --git a/res/css/components/views/beacon/_BeaconListItem.scss b/res/css/components/views/beacon/_BeaconListItem.pcss
similarity index 100%
rename from res/css/components/views/beacon/_BeaconListItem.scss
rename to res/css/components/views/beacon/_BeaconListItem.pcss
diff --git a/res/css/components/views/beacon/_BeaconStatus.scss b/res/css/components/views/beacon/_BeaconStatus.pcss
similarity index 100%
rename from res/css/components/views/beacon/_BeaconStatus.scss
rename to res/css/components/views/beacon/_BeaconStatus.pcss
diff --git a/res/css/components/views/beacon/_BeaconStatusTooltip.scss b/res/css/components/views/beacon/_BeaconStatusTooltip.pcss
similarity index 100%
rename from res/css/components/views/beacon/_BeaconStatusTooltip.scss
rename to res/css/components/views/beacon/_BeaconStatusTooltip.pcss
diff --git a/res/css/components/views/beacon/_BeaconViewDialog.scss b/res/css/components/views/beacon/_BeaconViewDialog.pcss
similarity index 100%
rename from res/css/components/views/beacon/_BeaconViewDialog.scss
rename to res/css/components/views/beacon/_BeaconViewDialog.pcss
diff --git a/res/css/components/views/beacon/_DialogOwnBeaconStatus.scss b/res/css/components/views/beacon/_DialogOwnBeaconStatus.pcss
similarity index 100%
rename from res/css/components/views/beacon/_DialogOwnBeaconStatus.scss
rename to res/css/components/views/beacon/_DialogOwnBeaconStatus.pcss
diff --git a/res/css/components/views/beacon/_DialogSidebar.scss b/res/css/components/views/beacon/_DialogSidebar.pcss
similarity index 100%
rename from res/css/components/views/beacon/_DialogSidebar.scss
rename to res/css/components/views/beacon/_DialogSidebar.pcss
diff --git a/res/css/components/views/beacon/_LeftPanelLiveShareWarning.scss b/res/css/components/views/beacon/_LeftPanelLiveShareWarning.pcss
similarity index 100%
rename from res/css/components/views/beacon/_LeftPanelLiveShareWarning.scss
rename to res/css/components/views/beacon/_LeftPanelLiveShareWarning.pcss
diff --git a/res/css/components/views/beacon/_LiveTimeRemaining.scss b/res/css/components/views/beacon/_LiveTimeRemaining.pcss
similarity index 100%
rename from res/css/components/views/beacon/_LiveTimeRemaining.scss
rename to res/css/components/views/beacon/_LiveTimeRemaining.pcss
diff --git a/res/css/components/views/beacon/_OwnBeaconStatus.scss b/res/css/components/views/beacon/_OwnBeaconStatus.pcss
similarity index 100%
rename from res/css/components/views/beacon/_OwnBeaconStatus.scss
rename to res/css/components/views/beacon/_OwnBeaconStatus.pcss
diff --git a/res/css/components/views/beacon/_RoomLiveShareWarning.scss b/res/css/components/views/beacon/_RoomLiveShareWarning.pcss
similarity index 100%
rename from res/css/components/views/beacon/_RoomLiveShareWarning.scss
rename to res/css/components/views/beacon/_RoomLiveShareWarning.pcss
diff --git a/res/css/components/views/beacon/_ShareLatestLocation.scss b/res/css/components/views/beacon/_ShareLatestLocation.pcss
similarity index 100%
rename from res/css/components/views/beacon/_ShareLatestLocation.scss
rename to res/css/components/views/beacon/_ShareLatestLocation.pcss
diff --git a/res/css/components/views/beacon/_StyledLiveBeaconIcon.scss b/res/css/components/views/beacon/_StyledLiveBeaconIcon.pcss
similarity index 100%
rename from res/css/components/views/beacon/_StyledLiveBeaconIcon.scss
rename to res/css/components/views/beacon/_StyledLiveBeaconIcon.pcss
diff --git a/res/css/components/views/location/_EnableLiveShare.scss b/res/css/components/views/location/_EnableLiveShare.pcss
similarity index 100%
rename from res/css/components/views/location/_EnableLiveShare.scss
rename to res/css/components/views/location/_EnableLiveShare.pcss
diff --git a/res/css/components/views/location/_LiveDurationDropdown.scss b/res/css/components/views/location/_LiveDurationDropdown.pcss
similarity index 100%
rename from res/css/components/views/location/_LiveDurationDropdown.scss
rename to res/css/components/views/location/_LiveDurationDropdown.pcss
diff --git a/res/css/components/views/location/_LocationShareMenu.scss b/res/css/components/views/location/_LocationShareMenu.pcss
similarity index 100%
rename from res/css/components/views/location/_LocationShareMenu.scss
rename to res/css/components/views/location/_LocationShareMenu.pcss
diff --git a/res/css/components/views/location/_MapError.scss b/res/css/components/views/location/_MapError.pcss
similarity index 100%
rename from res/css/components/views/location/_MapError.scss
rename to res/css/components/views/location/_MapError.pcss
diff --git a/res/css/components/views/location/_MapFallback.scss b/res/css/components/views/location/_MapFallback.pcss
similarity index 100%
rename from res/css/components/views/location/_MapFallback.scss
rename to res/css/components/views/location/_MapFallback.pcss
diff --git a/res/css/components/views/location/_Marker.scss b/res/css/components/views/location/_Marker.pcss
similarity index 100%
rename from res/css/components/views/location/_Marker.scss
rename to res/css/components/views/location/_Marker.pcss
diff --git a/res/css/components/views/location/_ShareDialogButtons.scss b/res/css/components/views/location/_ShareDialogButtons.pcss
similarity index 100%
rename from res/css/components/views/location/_ShareDialogButtons.scss
rename to res/css/components/views/location/_ShareDialogButtons.pcss
diff --git a/res/css/components/views/location/_ShareType.scss b/res/css/components/views/location/_ShareType.pcss
similarity index 100%
rename from res/css/components/views/location/_ShareType.scss
rename to res/css/components/views/location/_ShareType.pcss
diff --git a/res/css/components/views/location/_ZoomButtons.scss b/res/css/components/views/location/_ZoomButtons.pcss
similarity index 100%
rename from res/css/components/views/location/_ZoomButtons.scss
rename to res/css/components/views/location/_ZoomButtons.pcss
diff --git a/res/css/components/views/messages/_MBeaconBody.scss b/res/css/components/views/messages/_MBeaconBody.pcss
similarity index 100%
rename from res/css/components/views/messages/_MBeaconBody.scss
rename to res/css/components/views/messages/_MBeaconBody.pcss
diff --git a/res/css/components/views/messages/shared/_MediaProcessingError.scss b/res/css/components/views/messages/shared/_MediaProcessingError.pcss
similarity index 100%
rename from res/css/components/views/messages/shared/_MediaProcessingError.scss
rename to res/css/components/views/messages/shared/_MediaProcessingError.pcss
diff --git a/res/css/components/views/spaces/_QuickThemeSwitcher.scss b/res/css/components/views/spaces/_QuickThemeSwitcher.pcss
similarity index 100%
rename from res/css/components/views/spaces/_QuickThemeSwitcher.scss
rename to res/css/components/views/spaces/_QuickThemeSwitcher.pcss
diff --git a/res/css/rethemendex.sh b/res/css/rethemendex.sh
index e6fb4b8007..1fc1bb84cc 100755
--- a/res/css/rethemendex.sh
+++ b/res/css/rethemendex.sh
@@ -8,8 +8,8 @@ cd `dirname $0`
     # we used to have exclude /themes from the find at this point.
     # as themes are no longer a spurious subdirectory of css/, we don't
     # need it any more.
-    find . -iname _\*.scss | fgrep -v _components.scss | LC_ALL=C sort |
+    find . -iname _\*.pcss | fgrep -v _components.pcss | LC_ALL=C sort |
         while read i; do
             echo "@import \"$i\";"
         done
-} > _components.scss
+} > _components.pcss
diff --git a/res/css/structures/_AutoHideScrollbar.scss b/res/css/structures/_AutoHideScrollbar.pcss
similarity index 100%
rename from res/css/structures/_AutoHideScrollbar.scss
rename to res/css/structures/_AutoHideScrollbar.pcss
diff --git a/res/css/structures/_BackdropPanel.scss b/res/css/structures/_BackdropPanel.pcss
similarity index 100%
rename from res/css/structures/_BackdropPanel.scss
rename to res/css/structures/_BackdropPanel.pcss
diff --git a/res/css/structures/_CompatibilityPage.scss b/res/css/structures/_CompatibilityPage.pcss
similarity index 100%
rename from res/css/structures/_CompatibilityPage.scss
rename to res/css/structures/_CompatibilityPage.pcss
diff --git a/res/css/structures/_ContextualMenu.scss b/res/css/structures/_ContextualMenu.pcss
similarity index 100%
rename from res/css/structures/_ContextualMenu.scss
rename to res/css/structures/_ContextualMenu.pcss
diff --git a/res/css/structures/_FileDropTarget.scss b/res/css/structures/_FileDropTarget.pcss
similarity index 100%
rename from res/css/structures/_FileDropTarget.scss
rename to res/css/structures/_FileDropTarget.pcss
diff --git a/res/css/structures/_FilePanel.scss b/res/css/structures/_FilePanel.pcss
similarity index 98%
rename from res/css/structures/_FilePanel.scss
rename to res/css/structures/_FilePanel.pcss
index 8f00d9f664..f270a01b71 100644
--- a/res/css/structures/_FilePanel.scss
+++ b/res/css/structures/_FilePanel.pcss
@@ -44,7 +44,7 @@ limitations under the License.
 
     .mx_EventTile {
         /* Overrides for the attachment body tiles */
-        &:not([data-layout=bubble]) {
+        &:not([data-layout="bubble"]) {
             word-break: break-word;
             margin-top: 10px;
             padding-top: 0;
diff --git a/res/css/structures/_GenericDropdownMenu.scss b/res/css/structures/_GenericDropdownMenu.pcss
similarity index 98%
rename from res/css/structures/_GenericDropdownMenu.scss
rename to res/css/structures/_GenericDropdownMenu.pcss
index e56ddbcefc..75805f1146 100644
--- a/res/css/structures/_GenericDropdownMenu.scss
+++ b/res/css/structures/_GenericDropdownMenu.pcss
@@ -24,7 +24,7 @@ limitations under the License.
 }
 
 .mx_GenericDropdownMenu_button:hover,
-.mx_GenericDropdownMenu_button[aria-expanded=true] {
+.mx_GenericDropdownMenu_button[aria-expanded="true"] {
     background: $quinary-content;
 }
 
diff --git a/res/css/structures/_GenericErrorPage.scss b/res/css/structures/_GenericErrorPage.pcss
similarity index 100%
rename from res/css/structures/_GenericErrorPage.scss
rename to res/css/structures/_GenericErrorPage.pcss
diff --git a/res/css/structures/_HeaderButtons.scss b/res/css/structures/_HeaderButtons.pcss
similarity index 100%
rename from res/css/structures/_HeaderButtons.scss
rename to res/css/structures/_HeaderButtons.pcss
diff --git a/res/css/structures/_HomePage.scss b/res/css/structures/_HomePage.pcss
similarity index 100%
rename from res/css/structures/_HomePage.scss
rename to res/css/structures/_HomePage.pcss
diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.pcss
similarity index 100%
rename from res/css/structures/_LeftPanel.scss
rename to res/css/structures/_LeftPanel.pcss
diff --git a/res/css/structures/_MainSplit.scss b/res/css/structures/_MainSplit.pcss
similarity index 86%
rename from res/css/structures/_MainSplit.scss
rename to res/css/structures/_MainSplit.pcss
index 1a0ad60781..00d3d3ca62 100644
--- a/res/css/structures/_MainSplit.scss
+++ b/res/css/structures/_MainSplit.pcss
@@ -24,7 +24,9 @@ limitations under the License.
 
 .mx_MainSplit > .mx_RightPanel_ResizeWrapper {
     padding: $container-gap-width;
-    padding-left: calc($container-gap-width / 2); // The resizer should be centered: only half of the gap-width is handled by the right panel. The other half by the RoomView.
+    // The resizer should be centered: only half of the gap-width is handled by the right panel.
+    // The other half by the RoomView.
+    padding-left: calc($container-gap-width / 2);
     height: calc(100vh - 51px); // height of .mx_RoomHeader.light-panel
 
     &:hover .mx_ResizeHandle_horizontal::before {
diff --git a/res/css/structures/_MatrixChat.scss b/res/css/structures/_MatrixChat.pcss
similarity index 93%
rename from res/css/structures/_MatrixChat.scss
rename to res/css/structures/_MatrixChat.pcss
index 0523e67761..9f1ce94b98 100644
--- a/res/css/structures/_MatrixChat.scss
+++ b/res/css/structures/_MatrixChat.pcss
@@ -82,9 +82,11 @@ limitations under the License.
 // https://github.com/vector-im/element-web/issues/19863 happens.
 .mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
     margin: 0 calc(-5.5px - $container-gap-width / 2) 0 calc(-6.5px + $container-gap-width / 2);
-    // The condition to prevent bleeding is: (margin-left + margin-right < -11px) (IF there is NO margin on the leftPanel_wrapper)
+    // The condition to prevent bleeding is: (margin-left + margin-right < -11px)
+    // (IF there is NO margin on the leftPanel_wrapper)
     // The resizeHandle does not change the gap between the left panel and the room view:
-    //  the resizeHandle width is: 11px =  10px (padding) + 1px (width) and the total negative margin is -12px -> the handle requires no space
+    //  the resizeHandle width is:
+    //      11px =  10px (padding) + 1px (width) and the total negative margin is -12px -> the handle requires no space
     // right: -6px left: -6px positions the element exactly on the edge of leftPanel.
     // left+=1 and right-=1 => resizeHandle moves 1px to the right closer to the center of the gap.
     // We want the handle to be in the middle of the gap so it is shifted by ($container-gap-width / 2)
diff --git a/res/css/structures/_NonUrgentToastContainer.scss b/res/css/structures/_NonUrgentToastContainer.pcss
similarity index 100%
rename from res/css/structures/_NonUrgentToastContainer.scss
rename to res/css/structures/_NonUrgentToastContainer.pcss
diff --git a/res/css/structures/_NotificationPanel.scss b/res/css/structures/_NotificationPanel.pcss
similarity index 100%
rename from res/css/structures/_NotificationPanel.scss
rename to res/css/structures/_NotificationPanel.pcss
diff --git a/res/css/structures/_QuickSettingsButton.scss b/res/css/structures/_QuickSettingsButton.pcss
similarity index 100%
rename from res/css/structures/_QuickSettingsButton.scss
rename to res/css/structures/_QuickSettingsButton.pcss
diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.pcss
similarity index 100%
rename from res/css/structures/_RightPanel.scss
rename to res/css/structures/_RightPanel.pcss
diff --git a/res/css/structures/_RoomDirectory.scss b/res/css/structures/_RoomDirectory.pcss
similarity index 100%
rename from res/css/structures/_RoomDirectory.scss
rename to res/css/structures/_RoomDirectory.pcss
diff --git a/res/css/structures/_RoomSearch.scss b/res/css/structures/_RoomSearch.pcss
similarity index 100%
rename from res/css/structures/_RoomSearch.scss
rename to res/css/structures/_RoomSearch.pcss
diff --git a/res/css/structures/_RoomStatusBar.scss b/res/css/structures/_RoomStatusBar.pcss
similarity index 100%
rename from res/css/structures/_RoomStatusBar.scss
rename to res/css/structures/_RoomStatusBar.pcss
diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.pcss
similarity index 100%
rename from res/css/structures/_RoomView.scss
rename to res/css/structures/_RoomView.pcss
diff --git a/res/css/structures/_ScrollPanel.scss b/res/css/structures/_ScrollPanel.pcss
similarity index 100%
rename from res/css/structures/_ScrollPanel.scss
rename to res/css/structures/_ScrollPanel.pcss
diff --git a/res/css/structures/_SearchBox.scss b/res/css/structures/_SearchBox.pcss
similarity index 100%
rename from res/css/structures/_SearchBox.scss
rename to res/css/structures/_SearchBox.pcss
diff --git a/res/css/structures/_SpaceHierarchy.scss b/res/css/structures/_SpaceHierarchy.pcss
similarity index 100%
rename from res/css/structures/_SpaceHierarchy.scss
rename to res/css/structures/_SpaceHierarchy.pcss
diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.pcss
similarity index 100%
rename from res/css/structures/_SpacePanel.scss
rename to res/css/structures/_SpacePanel.pcss
diff --git a/res/css/structures/_SpaceRoomView.scss b/res/css/structures/_SpaceRoomView.pcss
similarity index 100%
rename from res/css/structures/_SpaceRoomView.scss
rename to res/css/structures/_SpaceRoomView.pcss
diff --git a/res/css/structures/_SplashPage.scss b/res/css/structures/_SplashPage.pcss
similarity index 81%
rename from res/css/structures/_SplashPage.scss
rename to res/css/structures/_SplashPage.pcss
index 5a0c2324d9..cd918ed596 100644
--- a/res/css/structures/_SplashPage.scss
+++ b/res/css/structures/_SplashPage.pcss
@@ -27,23 +27,23 @@ limitations under the License.
         background-image:
             radial-gradient(
                 53.85% 66.75% at 87.55% 0%,
-                hsla(250, 76%, 71%, 0.261) 0%,
-                hsla(250, 100%, 88%, 0) 100%
+                hsla(250deg, 76%, 71%, 0.261) 0%,
+                hsla(250deg, 100%, 88%, 0) 100%
             ),
             radial-gradient(
                 41.93% 41.93% at 0% 0%,
-                hsla(222, 29%, 20%, 0.28) 0%,
-                hsla(250, 100%, 88%, 0) 100%
+                hsla(222deg, 29%, 20%, 0.28) 0%,
+                hsla(250deg, 100%, 88%, 0) 100%
             ),
             radial-gradient(
                 100% 100% at 0% 0%,
-                hsla(250, 100%, 88%, 0.174) 0%,
-                hsla(0, 100%, 86%, 0) 100%
+                hsla(250deg, 100%, 88%, 0.174) 0%,
+                hsla(0deg, 100%, 86%, 0) 100%
             ),
             radial-gradient(
                 106.35% 96.26% at 100% 0%,
-                hsla(250, 100%, 88%, 0.4) 0%,
-                hsla(167, 76%, 82%, 0) 100%
+                hsla(250deg, 100%, 88%, 0.4) 0%,
+                hsla(167deg, 76%, 82%, 0) 100%
             );
         /* blur to reduce color banding issues due to alpha-blending multiple gradients */
         filter: blur(8px);
diff --git a/res/css/structures/_TabbedView.scss b/res/css/structures/_TabbedView.pcss
similarity index 100%
rename from res/css/structures/_TabbedView.scss
rename to res/css/structures/_TabbedView.pcss
diff --git a/res/css/structures/_ToastContainer.scss b/res/css/structures/_ToastContainer.pcss
similarity index 100%
rename from res/css/structures/_ToastContainer.scss
rename to res/css/structures/_ToastContainer.pcss
diff --git a/res/css/structures/_UploadBar.scss b/res/css/structures/_UploadBar.pcss
similarity index 100%
rename from res/css/structures/_UploadBar.scss
rename to res/css/structures/_UploadBar.pcss
diff --git a/res/css/structures/_UserMenu.scss b/res/css/structures/_UserMenu.pcss
similarity index 100%
rename from res/css/structures/_UserMenu.scss
rename to res/css/structures/_UserMenu.pcss
diff --git a/res/css/structures/_VideoRoomView.scss b/res/css/structures/_VideoRoomView.pcss
similarity index 100%
rename from res/css/structures/_VideoRoomView.scss
rename to res/css/structures/_VideoRoomView.pcss
diff --git a/res/css/structures/_ViewSource.scss b/res/css/structures/_ViewSource.pcss
similarity index 100%
rename from res/css/structures/_ViewSource.scss
rename to res/css/structures/_ViewSource.pcss
diff --git a/res/css/structures/auth/_CompleteSecurity.scss b/res/css/structures/auth/_CompleteSecurity.pcss
similarity index 100%
rename from res/css/structures/auth/_CompleteSecurity.scss
rename to res/css/structures/auth/_CompleteSecurity.pcss
diff --git a/res/css/structures/auth/_Login.scss b/res/css/structures/auth/_Login.pcss
similarity index 100%
rename from res/css/structures/auth/_Login.scss
rename to res/css/structures/auth/_Login.pcss
diff --git a/res/css/structures/auth/_Registration.scss b/res/css/structures/auth/_Registration.pcss
similarity index 100%
rename from res/css/structures/auth/_Registration.scss
rename to res/css/structures/auth/_Registration.pcss
diff --git a/res/css/structures/auth/_SetupEncryptionBody.scss b/res/css/structures/auth/_SetupEncryptionBody.pcss
similarity index 100%
rename from res/css/structures/auth/_SetupEncryptionBody.scss
rename to res/css/structures/auth/_SetupEncryptionBody.pcss
diff --git a/res/css/views/audio_messages/_AudioPlayer.scss b/res/css/views/audio_messages/_AudioPlayer.pcss
similarity index 100%
rename from res/css/views/audio_messages/_AudioPlayer.scss
rename to res/css/views/audio_messages/_AudioPlayer.pcss
diff --git a/res/css/views/audio_messages/_PlayPauseButton.scss b/res/css/views/audio_messages/_PlayPauseButton.pcss
similarity index 100%
rename from res/css/views/audio_messages/_PlayPauseButton.scss
rename to res/css/views/audio_messages/_PlayPauseButton.pcss
diff --git a/res/css/views/audio_messages/_PlaybackContainer.scss b/res/css/views/audio_messages/_PlaybackContainer.pcss
similarity index 100%
rename from res/css/views/audio_messages/_PlaybackContainer.scss
rename to res/css/views/audio_messages/_PlaybackContainer.pcss
diff --git a/res/css/views/audio_messages/_SeekBar.scss b/res/css/views/audio_messages/_SeekBar.pcss
similarity index 100%
rename from res/css/views/audio_messages/_SeekBar.scss
rename to res/css/views/audio_messages/_SeekBar.pcss
diff --git a/res/css/views/audio_messages/_Waveform.scss b/res/css/views/audio_messages/_Waveform.pcss
similarity index 100%
rename from res/css/views/audio_messages/_Waveform.scss
rename to res/css/views/audio_messages/_Waveform.pcss
diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.pcss
similarity index 98%
rename from res/css/views/auth/_AuthBody.scss
rename to res/css/views/auth/_AuthBody.pcss
index 203e3ef61f..81c3dda6e7 100644
--- a/res/css/views/auth/_AuthBody.scss
+++ b/res/css/views/auth/_AuthBody.pcss
@@ -52,8 +52,8 @@ limitations under the License.
         @mixin mx_Dialog_link;
     }
 
-    input[type=text],
-    input[type=password] {
+    input[type="text"],
+    input[type="password"] {
         color: $authpage-primary-color;
     }
 
diff --git a/res/css/views/auth/_AuthButtons.scss b/res/css/views/auth/_AuthButtons.pcss
similarity index 100%
rename from res/css/views/auth/_AuthButtons.scss
rename to res/css/views/auth/_AuthButtons.pcss
diff --git a/res/css/views/auth/_AuthFooter.scss b/res/css/views/auth/_AuthFooter.pcss
similarity index 100%
rename from res/css/views/auth/_AuthFooter.scss
rename to res/css/views/auth/_AuthFooter.pcss
diff --git a/res/css/views/auth/_AuthHeader.scss b/res/css/views/auth/_AuthHeader.pcss
similarity index 100%
rename from res/css/views/auth/_AuthHeader.scss
rename to res/css/views/auth/_AuthHeader.pcss
diff --git a/res/css/views/auth/_AuthHeaderLogo.scss b/res/css/views/auth/_AuthHeaderLogo.pcss
similarity index 100%
rename from res/css/views/auth/_AuthHeaderLogo.scss
rename to res/css/views/auth/_AuthHeaderLogo.pcss
diff --git a/res/css/views/auth/_AuthPage.scss b/res/css/views/auth/_AuthPage.pcss
similarity index 100%
rename from res/css/views/auth/_AuthPage.scss
rename to res/css/views/auth/_AuthPage.pcss
diff --git a/res/css/views/auth/_CompleteSecurityBody.scss b/res/css/views/auth/_CompleteSecurityBody.pcss
similarity index 100%
rename from res/css/views/auth/_CompleteSecurityBody.scss
rename to res/css/views/auth/_CompleteSecurityBody.pcss
diff --git a/res/css/views/auth/_CountryDropdown.scss b/res/css/views/auth/_CountryDropdown.pcss
similarity index 100%
rename from res/css/views/auth/_CountryDropdown.scss
rename to res/css/views/auth/_CountryDropdown.pcss
diff --git a/res/css/views/auth/_InteractiveAuthEntryComponents.scss b/res/css/views/auth/_InteractiveAuthEntryComponents.pcss
similarity index 100%
rename from res/css/views/auth/_InteractiveAuthEntryComponents.scss
rename to res/css/views/auth/_InteractiveAuthEntryComponents.pcss
diff --git a/res/css/views/auth/_LanguageSelector.scss b/res/css/views/auth/_LanguageSelector.pcss
similarity index 100%
rename from res/css/views/auth/_LanguageSelector.scss
rename to res/css/views/auth/_LanguageSelector.pcss
diff --git a/res/css/views/auth/_PassphraseField.scss b/res/css/views/auth/_PassphraseField.pcss
similarity index 100%
rename from res/css/views/auth/_PassphraseField.scss
rename to res/css/views/auth/_PassphraseField.pcss
diff --git a/res/css/views/auth/_Welcome.scss b/res/css/views/auth/_Welcome.pcss
similarity index 100%
rename from res/css/views/auth/_Welcome.scss
rename to res/css/views/auth/_Welcome.pcss
diff --git a/res/css/views/avatars/_BaseAvatar.scss b/res/css/views/avatars/_BaseAvatar.pcss
similarity index 100%
rename from res/css/views/avatars/_BaseAvatar.scss
rename to res/css/views/avatars/_BaseAvatar.pcss
diff --git a/res/css/views/avatars/_DecoratedRoomAvatar.scss b/res/css/views/avatars/_DecoratedRoomAvatar.pcss
similarity index 100%
rename from res/css/views/avatars/_DecoratedRoomAvatar.scss
rename to res/css/views/avatars/_DecoratedRoomAvatar.pcss
diff --git a/res/css/views/avatars/_WidgetAvatar.scss b/res/css/views/avatars/_WidgetAvatar.pcss
similarity index 100%
rename from res/css/views/avatars/_WidgetAvatar.scss
rename to res/css/views/avatars/_WidgetAvatar.pcss
diff --git a/res/css/views/beta/_BetaCard.scss b/res/css/views/beta/_BetaCard.pcss
similarity index 100%
rename from res/css/views/beta/_BetaCard.scss
rename to res/css/views/beta/_BetaCard.pcss
diff --git a/res/css/views/context_menus/_CallContextMenu.scss b/res/css/views/context_menus/_CallContextMenu.pcss
similarity index 100%
rename from res/css/views/context_menus/_CallContextMenu.scss
rename to res/css/views/context_menus/_CallContextMenu.pcss
diff --git a/res/css/views/context_menus/_DeviceContextMenu.scss b/res/css/views/context_menus/_DeviceContextMenu.pcss
similarity index 100%
rename from res/css/views/context_menus/_DeviceContextMenu.scss
rename to res/css/views/context_menus/_DeviceContextMenu.pcss
diff --git a/res/css/views/context_menus/_IconizedContextMenu.scss b/res/css/views/context_menus/_IconizedContextMenu.pcss
similarity index 100%
rename from res/css/views/context_menus/_IconizedContextMenu.scss
rename to res/css/views/context_menus/_IconizedContextMenu.pcss
diff --git a/res/css/views/context_menus/_MessageContextMenu.scss b/res/css/views/context_menus/_MessageContextMenu.pcss
similarity index 100%
rename from res/css/views/context_menus/_MessageContextMenu.scss
rename to res/css/views/context_menus/_MessageContextMenu.pcss
diff --git a/res/css/views/context_menus/_RoomGeneralContextMenu.scss b/res/css/views/context_menus/_RoomGeneralContextMenu.pcss
similarity index 100%
rename from res/css/views/context_menus/_RoomGeneralContextMenu.scss
rename to res/css/views/context_menus/_RoomGeneralContextMenu.pcss
diff --git a/res/css/views/context_menus/_RoomNotificationContextMenu.scss b/res/css/views/context_menus/_RoomNotificationContextMenu.pcss
similarity index 100%
rename from res/css/views/context_menus/_RoomNotificationContextMenu.scss
rename to res/css/views/context_menus/_RoomNotificationContextMenu.pcss
diff --git a/res/css/views/dialogs/_AddExistingToSpaceDialog.scss b/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/_AddExistingToSpaceDialog.scss
rename to res/css/views/dialogs/_AddExistingToSpaceDialog.pcss
diff --git a/res/css/views/dialogs/_AnalyticsLearnMoreDialog.scss b/res/css/views/dialogs/_AnalyticsLearnMoreDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/_AnalyticsLearnMoreDialog.scss
rename to res/css/views/dialogs/_AnalyticsLearnMoreDialog.pcss
diff --git a/res/css/views/dialogs/_BugReportDialog.scss b/res/css/views/dialogs/_BugReportDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/_BugReportDialog.scss
rename to res/css/views/dialogs/_BugReportDialog.pcss
diff --git a/res/css/views/dialogs/_BulkRedactDialog.scss b/res/css/views/dialogs/_BulkRedactDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/_BulkRedactDialog.scss
rename to res/css/views/dialogs/_BulkRedactDialog.pcss
diff --git a/res/css/views/dialogs/_ChangelogDialog.scss b/res/css/views/dialogs/_ChangelogDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/_ChangelogDialog.scss
rename to res/css/views/dialogs/_ChangelogDialog.pcss
diff --git a/res/css/views/dialogs/_ChatCreateOrReuseChatDialog.scss b/res/css/views/dialogs/_ChatCreateOrReuseChatDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/_ChatCreateOrReuseChatDialog.scss
rename to res/css/views/dialogs/_ChatCreateOrReuseChatDialog.pcss
diff --git a/res/css/views/dialogs/_CompoundDialog.scss b/res/css/views/dialogs/_CompoundDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/_CompoundDialog.scss
rename to res/css/views/dialogs/_CompoundDialog.pcss
diff --git a/res/css/views/dialogs/_ConfirmSpaceUserActionDialog.scss b/res/css/views/dialogs/_ConfirmSpaceUserActionDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/_ConfirmSpaceUserActionDialog.scss
rename to res/css/views/dialogs/_ConfirmSpaceUserActionDialog.pcss
diff --git a/res/css/views/dialogs/_ConfirmUserActionDialog.scss b/res/css/views/dialogs/_ConfirmUserActionDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/_ConfirmUserActionDialog.scss
rename to res/css/views/dialogs/_ConfirmUserActionDialog.pcss
diff --git a/res/css/views/dialogs/_CreateRoomDialog.scss b/res/css/views/dialogs/_CreateRoomDialog.pcss
similarity index 98%
rename from res/css/views/dialogs/_CreateRoomDialog.scss
rename to res/css/views/dialogs/_CreateRoomDialog.pcss
index 064b64c24a..959b599808 100644
--- a/res/css/views/dialogs/_CreateRoomDialog.scss
+++ b/res/css/views/dialogs/_CreateRoomDialog.pcss
@@ -35,7 +35,7 @@ limitations under the License.
         align-items: flex-start;
         margin: 5px 0;
 
-        input[type=checkbox] {
+        input[type="checkbox"] {
             margin-right: 10px;
         }
     }
diff --git a/res/css/views/dialogs/_CreateSubspaceDialog.scss b/res/css/views/dialogs/_CreateSubspaceDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/_CreateSubspaceDialog.scss
rename to res/css/views/dialogs/_CreateSubspaceDialog.pcss
diff --git a/res/css/views/dialogs/_DeactivateAccountDialog.scss b/res/css/views/dialogs/_DeactivateAccountDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/_DeactivateAccountDialog.scss
rename to res/css/views/dialogs/_DeactivateAccountDialog.pcss
diff --git a/res/css/views/dialogs/_DevtoolsDialog.scss b/res/css/views/dialogs/_DevtoolsDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/_DevtoolsDialog.scss
rename to res/css/views/dialogs/_DevtoolsDialog.pcss
diff --git a/res/css/views/dialogs/_ExportDialog.scss b/res/css/views/dialogs/_ExportDialog.pcss
similarity index 97%
rename from res/css/views/dialogs/_ExportDialog.scss
rename to res/css/views/dialogs/_ExportDialog.pcss
index 71f4b32a03..5c9daeffbf 100644
--- a/res/css/views/dialogs/_ExportDialog.scss
+++ b/res/css/views/dialogs/_ExportDialog.pcss
@@ -38,7 +38,7 @@ limitations under the License.
             background: $info-plinth-fg-color;
         }
 
-        .mx_StyledRadioButton input[type=radio]:checked + div {
+        .mx_StyledRadioButton input[type="radio"]:checked + div {
             border-color: unset;
         }
 
diff --git a/res/css/views/dialogs/_FeedbackDialog.scss b/res/css/views/dialogs/_FeedbackDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/_FeedbackDialog.scss
rename to res/css/views/dialogs/_FeedbackDialog.pcss
diff --git a/res/css/views/dialogs/_ForwardDialog.scss b/res/css/views/dialogs/_ForwardDialog.pcss
similarity index 99%
rename from res/css/views/dialogs/_ForwardDialog.scss
rename to res/css/views/dialogs/_ForwardDialog.pcss
index 2cdec19ebf..8e6a7d0508 100644
--- a/res/css/views/dialogs/_ForwardDialog.scss
+++ b/res/css/views/dialogs/_ForwardDialog.pcss
@@ -36,7 +36,7 @@ limitations under the License.
         flex-shrink: 0;
         overflow-y: auto;
 
-        .mx_EventTile[data-layout=bubble] {
+        .mx_EventTile[data-layout="bubble"] {
             margin-top: 20px;
         }
 
diff --git a/res/css/views/dialogs/_GenericFeatureFeedbackDialog.scss b/res/css/views/dialogs/_GenericFeatureFeedbackDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/_GenericFeatureFeedbackDialog.scss
rename to res/css/views/dialogs/_GenericFeatureFeedbackDialog.pcss
diff --git a/res/css/views/dialogs/_HostSignupDialog.scss b/res/css/views/dialogs/_HostSignupDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/_HostSignupDialog.scss
rename to res/css/views/dialogs/_HostSignupDialog.pcss
diff --git a/res/css/views/dialogs/_IncomingSasDialog.scss b/res/css/views/dialogs/_IncomingSasDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/_IncomingSasDialog.scss
rename to res/css/views/dialogs/_IncomingSasDialog.pcss
diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.pcss
similarity index 98%
rename from res/css/views/dialogs/_InviteDialog.scss
rename to res/css/views/dialogs/_InviteDialog.pcss
index 4dbe9d344e..f529749eeb 100644
--- a/res/css/views/dialogs/_InviteDialog.scss
+++ b/res/css/views/dialogs/_InviteDialog.pcss
@@ -327,7 +327,8 @@ limitations under the License.
     align-items: center;
 
     &.mx_InviteDialog_tile--room {
-        grid-template-columns: min-content auto auto; // mx_InviteDialog_tile_avatarStack, mx_InviteDialog_tile_nameStack, time
+        // mx_InviteDialog_tile_avatarStack, mx_InviteDialog_tile_nameStack, time
+        grid-template-columns: min-content auto auto;
         padding: $spacing-4 $spacing-8;
 
         &:hover {
diff --git a/res/css/views/dialogs/_JoinRuleDropdown.scss b/res/css/views/dialogs/_JoinRuleDropdown.pcss
similarity index 100%
rename from res/css/views/dialogs/_JoinRuleDropdown.scss
rename to res/css/views/dialogs/_JoinRuleDropdown.pcss
diff --git a/res/css/views/dialogs/_LeaveSpaceDialog.scss b/res/css/views/dialogs/_LeaveSpaceDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/_LeaveSpaceDialog.scss
rename to res/css/views/dialogs/_LeaveSpaceDialog.pcss
diff --git a/res/css/views/dialogs/_LocationViewDialog.scss b/res/css/views/dialogs/_LocationViewDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/_LocationViewDialog.scss
rename to res/css/views/dialogs/_LocationViewDialog.pcss
diff --git a/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.scss b/res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.scss
rename to res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss
diff --git a/res/css/views/dialogs/_MessageEditHistoryDialog.scss b/res/css/views/dialogs/_MessageEditHistoryDialog.pcss
similarity index 96%
rename from res/css/views/dialogs/_MessageEditHistoryDialog.scss
rename to res/css/views/dialogs/_MessageEditHistoryDialog.pcss
index cee4888a61..95cde3041a 100644
--- a/res/css/views/dialogs/_MessageEditHistoryDialog.scss
+++ b/res/css/views/dialogs/_MessageEditHistoryDialog.pcss
@@ -51,9 +51,9 @@ limitations under the License.
         text-decoration: underline;
     }
 
-    // Emulate mx_EventTile[data-layout=group]
+    // Emulate mx_EventTile[data-layout="group"]
     .mx_EventTile {
-        padding-top: 0 !important; // Override mx_EventTile:not([data-layout=bubble])
+        padding-top: 0 !important; // Override mx_EventTile:not([data-layout="bubble"])
 
         .mx_MessageTimestamp {
             position: absolute;
diff --git a/res/css/views/dialogs/_ModalWidgetDialog.scss b/res/css/views/dialogs/_ModalWidgetDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/_ModalWidgetDialog.scss
rename to res/css/views/dialogs/_ModalWidgetDialog.pcss
diff --git a/res/css/views/dialogs/_NewSessionReviewDialog.scss b/res/css/views/dialogs/_NewSessionReviewDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/_NewSessionReviewDialog.scss
rename to res/css/views/dialogs/_NewSessionReviewDialog.pcss
diff --git a/res/css/views/dialogs/_PollCreateDialog.scss b/res/css/views/dialogs/_PollCreateDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/_PollCreateDialog.scss
rename to res/css/views/dialogs/_PollCreateDialog.pcss
diff --git a/res/css/views/dialogs/_RegistrationEmailPromptDialog.scss b/res/css/views/dialogs/_RegistrationEmailPromptDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/_RegistrationEmailPromptDialog.scss
rename to res/css/views/dialogs/_RegistrationEmailPromptDialog.pcss
diff --git a/res/css/views/dialogs/_RoomSettingsDialog.scss b/res/css/views/dialogs/_RoomSettingsDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/_RoomSettingsDialog.scss
rename to res/css/views/dialogs/_RoomSettingsDialog.pcss
diff --git a/res/css/views/dialogs/_RoomSettingsDialogBridges.scss b/res/css/views/dialogs/_RoomSettingsDialogBridges.pcss
similarity index 100%
rename from res/css/views/dialogs/_RoomSettingsDialogBridges.scss
rename to res/css/views/dialogs/_RoomSettingsDialogBridges.pcss
diff --git a/res/css/views/dialogs/_RoomUpgradeDialog.scss b/res/css/views/dialogs/_RoomUpgradeDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/_RoomUpgradeDialog.scss
rename to res/css/views/dialogs/_RoomUpgradeDialog.pcss
diff --git a/res/css/views/dialogs/_RoomUpgradeWarningDialog.scss b/res/css/views/dialogs/_RoomUpgradeWarningDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/_RoomUpgradeWarningDialog.scss
rename to res/css/views/dialogs/_RoomUpgradeWarningDialog.pcss
diff --git a/res/css/views/dialogs/_ServerOfflineDialog.scss b/res/css/views/dialogs/_ServerOfflineDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/_ServerOfflineDialog.scss
rename to res/css/views/dialogs/_ServerOfflineDialog.pcss
diff --git a/res/css/views/dialogs/_ServerPickerDialog.scss b/res/css/views/dialogs/_ServerPickerDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/_ServerPickerDialog.scss
rename to res/css/views/dialogs/_ServerPickerDialog.pcss
diff --git a/res/css/views/dialogs/_SetEmailDialog.scss b/res/css/views/dialogs/_SetEmailDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/_SetEmailDialog.scss
rename to res/css/views/dialogs/_SetEmailDialog.pcss
diff --git a/res/css/views/dialogs/_SettingsDialog.scss b/res/css/views/dialogs/_SettingsDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/_SettingsDialog.scss
rename to res/css/views/dialogs/_SettingsDialog.pcss
diff --git a/res/css/views/dialogs/_ShareDialog.scss b/res/css/views/dialogs/_ShareDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/_ShareDialog.scss
rename to res/css/views/dialogs/_ShareDialog.pcss
diff --git a/res/css/views/dialogs/_SlashCommandHelpDialog.scss b/res/css/views/dialogs/_SlashCommandHelpDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/_SlashCommandHelpDialog.scss
rename to res/css/views/dialogs/_SlashCommandHelpDialog.pcss
diff --git a/res/css/views/dialogs/_SpacePreferencesDialog.scss b/res/css/views/dialogs/_SpacePreferencesDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/_SpacePreferencesDialog.scss
rename to res/css/views/dialogs/_SpacePreferencesDialog.pcss
diff --git a/res/css/views/dialogs/_SpaceSettingsDialog.scss b/res/css/views/dialogs/_SpaceSettingsDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/_SpaceSettingsDialog.scss
rename to res/css/views/dialogs/_SpaceSettingsDialog.pcss
diff --git a/res/css/views/dialogs/_SpotlightDialog.scss b/res/css/views/dialogs/_SpotlightDialog.pcss
similarity index 98%
rename from res/css/views/dialogs/_SpotlightDialog.scss
rename to res/css/views/dialogs/_SpotlightDialog.pcss
index 00283dc165..9d1ebe2c86 100644
--- a/res/css/views/dialogs/_SpotlightDialog.scss
+++ b/res/css/views/dialogs/_SpotlightDialog.pcss
@@ -216,7 +216,7 @@ limitations under the License.
                     margin-left: $spacing-16;
                 }
 
-                &:hover, &[aria-selected=true] {
+                &:hover, &[aria-selected="true"] {
                     background-color: $quinary-content;
                 }
             }
@@ -339,7 +339,7 @@ limitations under the License.
                         background: $tertiary-content;
                     }
 
-                    &:hover::before, &[aria-selected=true]::before {
+                    &:hover::before, &[aria-selected="true"]::before {
                         background-color: $secondary-content;
                     }
                 }
@@ -348,7 +348,7 @@ limitations under the License.
                     mask-image: url('$(res)/img/element-icons/context-menu.svg');
                 }
 
-                &:hover, &[aria-selected=true] {
+                &:hover, &[aria-selected="true"] {
                     background-color: $system;
 
                     .mx_SpotlightDialog_option--menu,
@@ -357,7 +357,7 @@ limitations under the License.
                     }
                 }
 
-                &[aria-selected=true] .mx_SpotlightDialog_enterPrompt {
+                &[aria-selected="true"] .mx_SpotlightDialog_enterPrompt {
                     display: inline-block;
                 }
             }
diff --git a/res/css/views/dialogs/_TermsDialog.scss b/res/css/views/dialogs/_TermsDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/_TermsDialog.scss
rename to res/css/views/dialogs/_TermsDialog.pcss
diff --git a/res/css/views/dialogs/_UntrustedDeviceDialog.scss b/res/css/views/dialogs/_UntrustedDeviceDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/_UntrustedDeviceDialog.scss
rename to res/css/views/dialogs/_UntrustedDeviceDialog.pcss
diff --git a/res/css/views/dialogs/_UploadConfirmDialog.scss b/res/css/views/dialogs/_UploadConfirmDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/_UploadConfirmDialog.scss
rename to res/css/views/dialogs/_UploadConfirmDialog.pcss
diff --git a/res/css/views/dialogs/_UserSettingsDialog.scss b/res/css/views/dialogs/_UserSettingsDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/_UserSettingsDialog.scss
rename to res/css/views/dialogs/_UserSettingsDialog.pcss
diff --git a/res/css/views/dialogs/_WidgetCapabilitiesPromptDialog.scss b/res/css/views/dialogs/_WidgetCapabilitiesPromptDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/_WidgetCapabilitiesPromptDialog.scss
rename to res/css/views/dialogs/_WidgetCapabilitiesPromptDialog.pcss
diff --git a/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss b/res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/security/_AccessSecretStorageDialog.scss
rename to res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss
diff --git a/res/css/views/dialogs/security/_CreateCrossSigningDialog.scss b/res/css/views/dialogs/security/_CreateCrossSigningDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/security/_CreateCrossSigningDialog.scss
rename to res/css/views/dialogs/security/_CreateCrossSigningDialog.pcss
diff --git a/res/css/views/dialogs/security/_CreateKeyBackupDialog.scss b/res/css/views/dialogs/security/_CreateKeyBackupDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/security/_CreateKeyBackupDialog.scss
rename to res/css/views/dialogs/security/_CreateKeyBackupDialog.pcss
diff --git a/res/css/views/dialogs/security/_CreateSecretStorageDialog.scss b/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/security/_CreateSecretStorageDialog.scss
rename to res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss
diff --git a/res/css/views/dialogs/security/_KeyBackupFailedDialog.scss b/res/css/views/dialogs/security/_KeyBackupFailedDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/security/_KeyBackupFailedDialog.scss
rename to res/css/views/dialogs/security/_KeyBackupFailedDialog.pcss
diff --git a/res/css/views/dialogs/security/_RestoreKeyBackupDialog.scss b/res/css/views/dialogs/security/_RestoreKeyBackupDialog.pcss
similarity index 100%
rename from res/css/views/dialogs/security/_RestoreKeyBackupDialog.scss
rename to res/css/views/dialogs/security/_RestoreKeyBackupDialog.pcss
diff --git a/res/css/views/directory/_NetworkDropdown.scss b/res/css/views/directory/_NetworkDropdown.pcss
similarity index 100%
rename from res/css/views/directory/_NetworkDropdown.scss
rename to res/css/views/directory/_NetworkDropdown.pcss
diff --git a/res/css/views/elements/_AccessibleButton.scss b/res/css/views/elements/_AccessibleButton.pcss
similarity index 100%
rename from res/css/views/elements/_AccessibleButton.scss
rename to res/css/views/elements/_AccessibleButton.pcss
diff --git a/res/css/views/elements/_CopyableText.scss b/res/css/views/elements/_CopyableText.pcss
similarity index 100%
rename from res/css/views/elements/_CopyableText.scss
rename to res/css/views/elements/_CopyableText.pcss
diff --git a/res/css/views/elements/_DesktopCapturerSourcePicker.scss b/res/css/views/elements/_DesktopCapturerSourcePicker.pcss
similarity index 100%
rename from res/css/views/elements/_DesktopCapturerSourcePicker.scss
rename to res/css/views/elements/_DesktopCapturerSourcePicker.pcss
diff --git a/res/css/views/elements/_DialPadBackspaceButton.scss b/res/css/views/elements/_DialPadBackspaceButton.pcss
similarity index 100%
rename from res/css/views/elements/_DialPadBackspaceButton.scss
rename to res/css/views/elements/_DialPadBackspaceButton.pcss
diff --git a/res/css/views/elements/_DirectorySearchBox.scss b/res/css/views/elements/_DirectorySearchBox.pcss
similarity index 100%
rename from res/css/views/elements/_DirectorySearchBox.scss
rename to res/css/views/elements/_DirectorySearchBox.pcss
diff --git a/res/css/views/elements/_Dropdown.scss b/res/css/views/elements/_Dropdown.pcss
similarity index 100%
rename from res/css/views/elements/_Dropdown.scss
rename to res/css/views/elements/_Dropdown.pcss
diff --git a/res/css/views/elements/_EditableItemList.scss b/res/css/views/elements/_EditableItemList.pcss
similarity index 100%
rename from res/css/views/elements/_EditableItemList.scss
rename to res/css/views/elements/_EditableItemList.pcss
diff --git a/res/css/views/elements/_ErrorBoundary.scss b/res/css/views/elements/_ErrorBoundary.pcss
similarity index 100%
rename from res/css/views/elements/_ErrorBoundary.scss
rename to res/css/views/elements/_ErrorBoundary.pcss
diff --git a/res/css/views/elements/_EventTilePreview.scss b/res/css/views/elements/_EventTilePreview.pcss
similarity index 100%
rename from res/css/views/elements/_EventTilePreview.scss
rename to res/css/views/elements/_EventTilePreview.pcss
diff --git a/res/css/views/elements/_ExternalLink.scss b/res/css/views/elements/_ExternalLink.pcss
similarity index 100%
rename from res/css/views/elements/_ExternalLink.scss
rename to res/css/views/elements/_ExternalLink.pcss
diff --git a/res/css/views/elements/_FacePile.scss b/res/css/views/elements/_FacePile.pcss
similarity index 100%
rename from res/css/views/elements/_FacePile.scss
rename to res/css/views/elements/_FacePile.pcss
diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.pcss
similarity index 98%
rename from res/css/views/elements/_Field.scss
rename to res/css/views/elements/_Field.pcss
index a97e7ee949..b4738fb4a6 100644
--- a/res/css/views/elements/_Field.scss
+++ b/res/css/views/elements/_Field.pcss
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-/* TODO: Consider unifying with general input styles in _light.scss */
+/* TODO: Consider unifying with general input styles in _light.pcss */
 
 .mx_Field {
     display: flex;
diff --git a/res/css/views/elements/_GenericEventListSummary.scss b/res/css/views/elements/_GenericEventListSummary.pcss
similarity index 91%
rename from res/css/views/elements/_GenericEventListSummary.scss
rename to res/css/views/elements/_GenericEventListSummary.pcss
index 11963af423..9687105eb0 100644
--- a/res/css/views/elements/_GenericEventListSummary.scss
+++ b/res/css/views/elements/_GenericEventListSummary.pcss
@@ -21,19 +21,19 @@ limitations under the License.
         margin-right: $spacing-8;
     }
 
-    &[data-layout=irc],
-    &[data-layout=group] {
+    &[data-layout="irc"],
+    &[data-layout="group"] {
         .mx_GenericEventListSummary_toggle {
             float: right;
             margin-inline: 0 10px;
         }
     }
 
-    &[data-layout=group] {
+    &[data-layout="group"] {
         margin-top: $spacing-8;
     }
 
-    &[data-layout=bubble] {
+    &[data-layout="bubble"] {
         --maxWidth: 70%;
         display: flex;
         margin-left: calc(var(--avatarSize) + var(--gutterSize));
@@ -41,11 +41,11 @@ limitations under the License.
         .mx_GenericEventListSummary_toggle {
             margin-block: 0;
 
-            &[aria-expanded=false] {
+            &[aria-expanded="false"] {
                 order: 9; // TODO: Remove
             }
 
-            &[aria-expanded=true] {
+            &[aria-expanded="true"] {
                 margin-inline-start: auto; // reduce clickable area
                 margin-inline-end: var(--EventTile_bubble-margin-inline-end); // as the parent has zero margin
             }
@@ -55,7 +55,7 @@ limitations under the License.
             display: none;
         }
 
-        &[data-expanded=false] {
+        &[data-expanded="false"] {
             align-items: center;
             justify-content: space-between;
             column-gap: 5px;
@@ -63,7 +63,7 @@ limitations under the License.
 
         // ideally we'd use display=contents here for the layout to all work regardless of the *ELS but
         // that breaks ScrollPanel's reliance upon offsetTop so we have to have a bit more finesse.
-        &[data-expanded=true] {
+        &[data-expanded="true"] {
             flex-direction: column;
             margin: 0;
         }
diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.pcss
similarity index 100%
rename from res/css/views/elements/_ImageView.scss
rename to res/css/views/elements/_ImageView.pcss
diff --git a/res/css/views/elements/_InfoTooltip.scss b/res/css/views/elements/_InfoTooltip.pcss
similarity index 100%
rename from res/css/views/elements/_InfoTooltip.scss
rename to res/css/views/elements/_InfoTooltip.pcss
diff --git a/res/css/views/elements/_InlineSpinner.scss b/res/css/views/elements/_InlineSpinner.pcss
similarity index 100%
rename from res/css/views/elements/_InlineSpinner.scss
rename to res/css/views/elements/_InlineSpinner.pcss
diff --git a/res/css/views/elements/_InteractiveTooltip.scss b/res/css/views/elements/_InteractiveTooltip.pcss
similarity index 100%
rename from res/css/views/elements/_InteractiveTooltip.scss
rename to res/css/views/elements/_InteractiveTooltip.pcss
diff --git a/res/css/views/elements/_InviteReason.scss b/res/css/views/elements/_InviteReason.pcss
similarity index 100%
rename from res/css/views/elements/_InviteReason.scss
rename to res/css/views/elements/_InviteReason.pcss
diff --git a/res/css/views/elements/_LabelledCheckbox.scss b/res/css/views/elements/_LabelledCheckbox.pcss
similarity index 100%
rename from res/css/views/elements/_LabelledCheckbox.scss
rename to res/css/views/elements/_LabelledCheckbox.pcss
diff --git a/res/css/views/elements/_ManageIntegsButton.scss b/res/css/views/elements/_ManageIntegsButton.pcss
similarity index 100%
rename from res/css/views/elements/_ManageIntegsButton.scss
rename to res/css/views/elements/_ManageIntegsButton.pcss
diff --git a/res/css/views/elements/_MiniAvatarUploader.scss b/res/css/views/elements/_MiniAvatarUploader.pcss
similarity index 100%
rename from res/css/views/elements/_MiniAvatarUploader.scss
rename to res/css/views/elements/_MiniAvatarUploader.pcss
diff --git a/res/css/views/elements/_Pill.scss b/res/css/views/elements/_Pill.pcss
similarity index 100%
rename from res/css/views/elements/_Pill.scss
rename to res/css/views/elements/_Pill.pcss
diff --git a/res/css/views/elements/_PowerSelector.scss b/res/css/views/elements/_PowerSelector.pcss
similarity index 100%
rename from res/css/views/elements/_PowerSelector.scss
rename to res/css/views/elements/_PowerSelector.pcss
diff --git a/res/css/views/elements/_ProgressBar.scss b/res/css/views/elements/_ProgressBar.pcss
similarity index 100%
rename from res/css/views/elements/_ProgressBar.scss
rename to res/css/views/elements/_ProgressBar.pcss
diff --git a/res/css/views/elements/_QRCode.scss b/res/css/views/elements/_QRCode.pcss
similarity index 100%
rename from res/css/views/elements/_QRCode.scss
rename to res/css/views/elements/_QRCode.pcss
diff --git a/res/css/views/elements/_ReplyChain.scss b/res/css/views/elements/_ReplyChain.pcss
similarity index 100%
rename from res/css/views/elements/_ReplyChain.scss
rename to res/css/views/elements/_ReplyChain.pcss
diff --git a/res/css/views/elements/_ResizeHandle.scss b/res/css/views/elements/_ResizeHandle.pcss
similarity index 100%
rename from res/css/views/elements/_ResizeHandle.scss
rename to res/css/views/elements/_ResizeHandle.pcss
diff --git a/res/css/views/elements/_RichText.scss b/res/css/views/elements/_RichText.pcss
similarity index 100%
rename from res/css/views/elements/_RichText.scss
rename to res/css/views/elements/_RichText.pcss
diff --git a/res/css/views/elements/_RoleButton.scss b/res/css/views/elements/_RoleButton.pcss
similarity index 100%
rename from res/css/views/elements/_RoleButton.scss
rename to res/css/views/elements/_RoleButton.pcss
diff --git a/res/css/views/elements/_RoomAliasField.scss b/res/css/views/elements/_RoomAliasField.pcss
similarity index 100%
rename from res/css/views/elements/_RoomAliasField.scss
rename to res/css/views/elements/_RoomAliasField.pcss
diff --git a/res/css/views/elements/_SSOButtons.scss b/res/css/views/elements/_SSOButtons.pcss
similarity index 100%
rename from res/css/views/elements/_SSOButtons.scss
rename to res/css/views/elements/_SSOButtons.pcss
diff --git a/res/css/views/elements/_SearchWarning.scss b/res/css/views/elements/_SearchWarning.pcss
similarity index 100%
rename from res/css/views/elements/_SearchWarning.scss
rename to res/css/views/elements/_SearchWarning.pcss
diff --git a/res/css/views/elements/_ServerPicker.scss b/res/css/views/elements/_ServerPicker.pcss
similarity index 100%
rename from res/css/views/elements/_ServerPicker.scss
rename to res/css/views/elements/_ServerPicker.pcss
diff --git a/res/css/views/elements/_SettingsFlag.scss b/res/css/views/elements/_SettingsFlag.pcss
similarity index 100%
rename from res/css/views/elements/_SettingsFlag.scss
rename to res/css/views/elements/_SettingsFlag.pcss
diff --git a/res/css/views/elements/_Slider.scss b/res/css/views/elements/_Slider.pcss
similarity index 100%
rename from res/css/views/elements/_Slider.scss
rename to res/css/views/elements/_Slider.pcss
diff --git a/res/css/views/elements/_Spinner.scss b/res/css/views/elements/_Spinner.pcss
similarity index 100%
rename from res/css/views/elements/_Spinner.scss
rename to res/css/views/elements/_Spinner.pcss
diff --git a/res/css/views/elements/_StyledCheckbox.scss b/res/css/views/elements/_StyledCheckbox.pcss
similarity index 94%
rename from res/css/views/elements/_StyledCheckbox.scss
rename to res/css/views/elements/_StyledCheckbox.pcss
index be671f1e9c..ad784ee344 100644
--- a/res/css/views/elements/_StyledCheckbox.scss
+++ b/res/css/views/elements/_StyledCheckbox.pcss
@@ -22,7 +22,7 @@ limitations under the License.
     display: flex;
     align-items: flex-start;
 
-    input[type=checkbox] {
+    input[type="checkbox"] {
         appearance: none;
         margin: 0;
         padding: 0;
@@ -81,7 +81,7 @@ limitations under the License.
     }
 }
 
-.mx_Checkbox.mx_Checkbox_kind_solid input[type=checkbox] {
+.mx_Checkbox.mx_Checkbox_kind_solid input[type="checkbox"] {
     & + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
         background: #ffffff;
     }
@@ -92,7 +92,7 @@ limitations under the License.
     }
 }
 
-.mx_Checkbox.mx_Checkbox_kind_outline input[type=checkbox] {
+.mx_Checkbox.mx_Checkbox_kind_outline input[type="checkbox"] {
     & + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
         background: $accent;
     }
diff --git a/res/css/views/elements/_StyledRadioButton.scss b/res/css/views/elements/_StyledRadioButton.pcss
similarity index 99%
rename from res/css/views/elements/_StyledRadioButton.scss
rename to res/css/views/elements/_StyledRadioButton.pcss
index f733fd6c8b..47f01cb2a7 100644
--- a/res/css/views/elements/_StyledRadioButton.scss
+++ b/res/css/views/elements/_StyledRadioButton.pcss
@@ -46,7 +46,7 @@ limitations under the License.
         width: $font-16px;
     }
 
-    input[type=radio] {
+    input[type="radio"] {
         // Remove the OS's representation
         margin: 0;
         padding: 0;
diff --git a/res/css/views/elements/_SyntaxHighlight.scss b/res/css/views/elements/_SyntaxHighlight.pcss
similarity index 100%
rename from res/css/views/elements/_SyntaxHighlight.scss
rename to res/css/views/elements/_SyntaxHighlight.pcss
diff --git a/res/css/views/elements/_TagComposer.scss b/res/css/views/elements/_TagComposer.pcss
similarity index 100%
rename from res/css/views/elements/_TagComposer.scss
rename to res/css/views/elements/_TagComposer.pcss
diff --git a/res/css/views/elements/_TextWithTooltip.scss b/res/css/views/elements/_TextWithTooltip.pcss
similarity index 100%
rename from res/css/views/elements/_TextWithTooltip.scss
rename to res/css/views/elements/_TextWithTooltip.pcss
diff --git a/res/css/views/elements/_ToggleSwitch.scss b/res/css/views/elements/_ToggleSwitch.pcss
similarity index 100%
rename from res/css/views/elements/_ToggleSwitch.scss
rename to res/css/views/elements/_ToggleSwitch.pcss
diff --git a/res/css/views/elements/_Tooltip.scss b/res/css/views/elements/_Tooltip.pcss
similarity index 100%
rename from res/css/views/elements/_Tooltip.scss
rename to res/css/views/elements/_Tooltip.pcss
diff --git a/res/css/views/elements/_TooltipButton.scss b/res/css/views/elements/_TooltipButton.pcss
similarity index 100%
rename from res/css/views/elements/_TooltipButton.scss
rename to res/css/views/elements/_TooltipButton.pcss
diff --git a/res/css/views/elements/_UseCaseSelection.scss b/res/css/views/elements/_UseCaseSelection.pcss
similarity index 100%
rename from res/css/views/elements/_UseCaseSelection.scss
rename to res/css/views/elements/_UseCaseSelection.pcss
diff --git a/res/css/views/elements/_UseCaseSelectionButton.scss b/res/css/views/elements/_UseCaseSelectionButton.pcss
similarity index 100%
rename from res/css/views/elements/_UseCaseSelectionButton.scss
rename to res/css/views/elements/_UseCaseSelectionButton.pcss
diff --git a/res/css/views/elements/_Validation.scss b/res/css/views/elements/_Validation.pcss
similarity index 100%
rename from res/css/views/elements/_Validation.scss
rename to res/css/views/elements/_Validation.pcss
diff --git a/res/css/views/emojipicker/_EmojiPicker.scss b/res/css/views/emojipicker/_EmojiPicker.pcss
similarity index 100%
rename from res/css/views/emojipicker/_EmojiPicker.scss
rename to res/css/views/emojipicker/_EmojiPicker.pcss
diff --git a/res/css/views/location/_LocationPicker.scss b/res/css/views/location/_LocationPicker.pcss
similarity index 100%
rename from res/css/views/location/_LocationPicker.scss
rename to res/css/views/location/_LocationPicker.pcss
diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.pcss
similarity index 100%
rename from res/css/views/messages/_CallEvent.scss
rename to res/css/views/messages/_CallEvent.pcss
diff --git a/res/css/views/messages/_CreateEvent.scss b/res/css/views/messages/_CreateEvent.pcss
similarity index 100%
rename from res/css/views/messages/_CreateEvent.scss
rename to res/css/views/messages/_CreateEvent.pcss
diff --git a/res/css/views/messages/_DateSeparator.scss b/res/css/views/messages/_DateSeparator.pcss
similarity index 100%
rename from res/css/views/messages/_DateSeparator.scss
rename to res/css/views/messages/_DateSeparator.pcss
diff --git a/res/css/views/messages/_DisambiguatedProfile.scss b/res/css/views/messages/_DisambiguatedProfile.pcss
similarity index 100%
rename from res/css/views/messages/_DisambiguatedProfile.scss
rename to res/css/views/messages/_DisambiguatedProfile.pcss
diff --git a/res/css/views/messages/_EventTileBubble.scss b/res/css/views/messages/_EventTileBubble.pcss
similarity index 100%
rename from res/css/views/messages/_EventTileBubble.scss
rename to res/css/views/messages/_EventTileBubble.pcss
diff --git a/res/css/views/messages/_HiddenBody.scss b/res/css/views/messages/_HiddenBody.pcss
similarity index 100%
rename from res/css/views/messages/_HiddenBody.scss
rename to res/css/views/messages/_HiddenBody.pcss
diff --git a/res/css/views/messages/_JumpToDatePicker.scss b/res/css/views/messages/_JumpToDatePicker.pcss
similarity index 95%
rename from res/css/views/messages/_JumpToDatePicker.scss
rename to res/css/views/messages/_JumpToDatePicker.pcss
index d9b6fb9e91..ae8646764d 100644
--- a/res/css/views/messages/_JumpToDatePicker.scss
+++ b/res/css/views/messages/_JumpToDatePicker.pcss
@@ -17,7 +17,7 @@ limitations under the License.
 .mx_JumpToDatePicker_form {
     display: flex;
     // This matches the default padding of IconizedContextMenuOption
-    // (see context_menus/_IconizedContextMenu.scss)
+    // (see context_menus/_IconizedContextMenu.pcss)
     padding-top: 12px;
     padding-bottom: 12px;
 }
diff --git a/res/css/views/messages/_MEmoteBody.scss b/res/css/views/messages/_MEmoteBody.pcss
similarity index 100%
rename from res/css/views/messages/_MEmoteBody.scss
rename to res/css/views/messages/_MEmoteBody.pcss
diff --git a/res/css/views/messages/_MFileBody.scss b/res/css/views/messages/_MFileBody.pcss
similarity index 100%
rename from res/css/views/messages/_MFileBody.scss
rename to res/css/views/messages/_MFileBody.pcss
diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.pcss
similarity index 100%
rename from res/css/views/messages/_MImageBody.scss
rename to res/css/views/messages/_MImageBody.pcss
diff --git a/res/css/views/messages/_MImageReplyBody.scss b/res/css/views/messages/_MImageReplyBody.pcss
similarity index 100%
rename from res/css/views/messages/_MImageReplyBody.scss
rename to res/css/views/messages/_MImageReplyBody.pcss
diff --git a/res/css/views/messages/_MJitsiWidgetEvent.scss b/res/css/views/messages/_MJitsiWidgetEvent.pcss
similarity index 100%
rename from res/css/views/messages/_MJitsiWidgetEvent.scss
rename to res/css/views/messages/_MJitsiWidgetEvent.pcss
diff --git a/res/css/views/messages/_MLocationBody.scss b/res/css/views/messages/_MLocationBody.pcss
similarity index 100%
rename from res/css/views/messages/_MLocationBody.scss
rename to res/css/views/messages/_MLocationBody.pcss
diff --git a/res/css/views/messages/_MNoticeBody.scss b/res/css/views/messages/_MNoticeBody.pcss
similarity index 100%
rename from res/css/views/messages/_MNoticeBody.scss
rename to res/css/views/messages/_MNoticeBody.pcss
diff --git a/res/css/views/messages/_MPollBody.scss b/res/css/views/messages/_MPollBody.pcss
similarity index 100%
rename from res/css/views/messages/_MPollBody.scss
rename to res/css/views/messages/_MPollBody.pcss
diff --git a/res/css/views/messages/_MStickerBody.scss b/res/css/views/messages/_MStickerBody.pcss
similarity index 100%
rename from res/css/views/messages/_MStickerBody.scss
rename to res/css/views/messages/_MStickerBody.pcss
diff --git a/res/css/views/messages/_MTextBody.scss b/res/css/views/messages/_MTextBody.pcss
similarity index 100%
rename from res/css/views/messages/_MTextBody.scss
rename to res/css/views/messages/_MTextBody.pcss
diff --git a/res/css/views/messages/_MVideoBody.scss b/res/css/views/messages/_MVideoBody.pcss
similarity index 100%
rename from res/css/views/messages/_MVideoBody.scss
rename to res/css/views/messages/_MVideoBody.pcss
diff --git a/res/css/views/messages/_MediaBody.scss b/res/css/views/messages/_MediaBody.pcss
similarity index 100%
rename from res/css/views/messages/_MediaBody.scss
rename to res/css/views/messages/_MediaBody.pcss
diff --git a/res/css/views/messages/_MessageActionBar.scss b/res/css/views/messages/_MessageActionBar.pcss
similarity index 100%
rename from res/css/views/messages/_MessageActionBar.scss
rename to res/css/views/messages/_MessageActionBar.pcss
diff --git a/res/css/views/messages/_MessageTimestamp.scss b/res/css/views/messages/_MessageTimestamp.pcss
similarity index 100%
rename from res/css/views/messages/_MessageTimestamp.scss
rename to res/css/views/messages/_MessageTimestamp.pcss
diff --git a/res/css/views/messages/_MjolnirBody.scss b/res/css/views/messages/_MjolnirBody.pcss
similarity index 100%
rename from res/css/views/messages/_MjolnirBody.scss
rename to res/css/views/messages/_MjolnirBody.pcss
diff --git a/res/css/views/messages/_ReactionsRow.scss b/res/css/views/messages/_ReactionsRow.pcss
similarity index 100%
rename from res/css/views/messages/_ReactionsRow.scss
rename to res/css/views/messages/_ReactionsRow.pcss
diff --git a/res/css/views/messages/_ReactionsRowButton.scss b/res/css/views/messages/_ReactionsRowButton.pcss
similarity index 100%
rename from res/css/views/messages/_ReactionsRowButton.scss
rename to res/css/views/messages/_ReactionsRowButton.pcss
diff --git a/res/css/views/messages/_RedactedBody.scss b/res/css/views/messages/_RedactedBody.pcss
similarity index 100%
rename from res/css/views/messages/_RedactedBody.scss
rename to res/css/views/messages/_RedactedBody.pcss
diff --git a/res/css/views/messages/_RoomAvatarEvent.scss b/res/css/views/messages/_RoomAvatarEvent.pcss
similarity index 100%
rename from res/css/views/messages/_RoomAvatarEvent.scss
rename to res/css/views/messages/_RoomAvatarEvent.pcss
diff --git a/res/css/views/messages/_TextualEvent.scss b/res/css/views/messages/_TextualEvent.pcss
similarity index 100%
rename from res/css/views/messages/_TextualEvent.scss
rename to res/css/views/messages/_TextualEvent.pcss
diff --git a/res/css/views/messages/_UnknownBody.scss b/res/css/views/messages/_UnknownBody.pcss
similarity index 100%
rename from res/css/views/messages/_UnknownBody.scss
rename to res/css/views/messages/_UnknownBody.pcss
diff --git a/res/css/views/messages/_ViewSourceEvent.scss b/res/css/views/messages/_ViewSourceEvent.pcss
similarity index 100%
rename from res/css/views/messages/_ViewSourceEvent.scss
rename to res/css/views/messages/_ViewSourceEvent.pcss
diff --git a/res/css/views/messages/_common_CryptoEvent.scss b/res/css/views/messages/_common_CryptoEvent.pcss
similarity index 100%
rename from res/css/views/messages/_common_CryptoEvent.scss
rename to res/css/views/messages/_common_CryptoEvent.pcss
diff --git a/res/css/views/right_panel/_BaseCard.scss b/res/css/views/right_panel/_BaseCard.pcss
similarity index 100%
rename from res/css/views/right_panel/_BaseCard.scss
rename to res/css/views/right_panel/_BaseCard.pcss
diff --git a/res/css/views/right_panel/_EncryptionInfo.scss b/res/css/views/right_panel/_EncryptionInfo.pcss
similarity index 100%
rename from res/css/views/right_panel/_EncryptionInfo.scss
rename to res/css/views/right_panel/_EncryptionInfo.pcss
diff --git a/res/css/views/right_panel/_PinnedMessagesCard.scss b/res/css/views/right_panel/_PinnedMessagesCard.pcss
similarity index 100%
rename from res/css/views/right_panel/_PinnedMessagesCard.scss
rename to res/css/views/right_panel/_PinnedMessagesCard.pcss
diff --git a/res/css/views/right_panel/_RoomSummaryCard.scss b/res/css/views/right_panel/_RoomSummaryCard.pcss
similarity index 100%
rename from res/css/views/right_panel/_RoomSummaryCard.scss
rename to res/css/views/right_panel/_RoomSummaryCard.pcss
diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.pcss
similarity index 97%
rename from res/css/views/right_panel/_ThreadPanel.scss
rename to res/css/views/right_panel/_ThreadPanel.pcss
index d83b51272e..2b2bd120be 100644
--- a/res/css/views/right_panel/_ThreadPanel.scss
+++ b/res/css/views/right_panel/_ThreadPanel.pcss
@@ -32,7 +32,7 @@ limitations under the License.
                 user-select: none;
 
                 &:hover,
-                &[aria-expanded=true] {
+                &[aria-expanded="true"] {
                     background: $quinary-content;
                 }
 
@@ -59,15 +59,15 @@ limitations under the License.
         height: 100%;
     }
 
-    .mx_EventTile[data-layout=group] {
+    .mx_EventTile[data-layout="group"] {
         .mx_MessageActionBar {
             right: 0;
             top: -36px; // 2px above EventTile
-            z-index: 10; // See _EventTile.scss
+            z-index: 10; // See _EventTile.pcss
         }
     }
 
-    // For style rules of EventTile in a thread, see _EventTile.scss
+    // For style rules of EventTile in a thread, see _EventTile.pcss
     &.mx_ThreadView {
         max-height: 100%;
 
diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.pcss
similarity index 88%
rename from res/css/views/right_panel/_TimelineCard.scss
rename to res/css/views/right_panel/_TimelineCard.pcss
index 6380a64526..84c890d685 100644
--- a/res/css/views/right_panel/_TimelineCard.scss
+++ b/res/css/views/right_panel/_TimelineCard.pcss
@@ -48,8 +48,8 @@ limitations under the License.
             }
         }
 
-        &[data-layout=irc],
-        &[data-layout=group] {
+        &[data-layout="irc"],
+        &[data-layout="group"] {
             --TimelineCard_ReadReceiptGroup-inset-block-start: -6px;
 
             &.mx_EventTile_info .mx_EventTile_line,
@@ -101,7 +101,8 @@ limitations under the License.
             }
 
             .mx_ReactionsRow {
-                margin-inline-end: $spacing-8; // See: var(--ThreadView_group_spacing-end) for ReactionsRow on _EventTile.scss
+                // See: var(--ThreadView_group_spacing-end) for ReactionsRow on _EventTile.pcss
+                margin-inline-end: $spacing-8;
             }
 
             .mx_ThreadSummary {
@@ -110,14 +111,14 @@ limitations under the License.
             }
         }
 
-        &[data-layout=irc] {
+        &[data-layout="irc"] {
             .mx_EventTile_avatar,
             .mx_MessageTimestamp {
                 position: absolute;
             }
         }
 
-        &[data-layout=group] {
+        &[data-layout="group"] {
             // Read receipt group on compact modern layout
             // This is required because mx_TimelineCard is a child element wrapped by mx_MatrixChat_useCompactLayout,
             // which specifies the default position of mx_ReadReceiptGroup on compact modern layout.
@@ -126,13 +127,14 @@ limitations under the License.
             }
         }
 
-        &[data-layout=bubble] {
+        &[data-layout="bubble"] {
             &::before {
                 z-index: auto; // enable background color on hover
             }
 
             &.mx_EventTile_info .mx_MessageActionBar {
-                inset-inline-end: calc($container-gap-width + var(--BaseCard_padding-inline) + 1px); // 1px: border width
+                // 1px: border width
+                inset-inline-end: calc($container-gap-width + var(--BaseCard_padding-inline) + 1px);
             }
 
             .mx_ReactionsRow {
@@ -150,8 +152,8 @@ limitations under the License.
     }
 
     .mx_GenericEventListSummary {
-        &[data-layout=irc],
-        &[data-layout=group] {
+        &[data-layout="irc"],
+        &[data-layout="group"] {
             .mx_EventTile_line,
             .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line {
                 padding-inline-start: var(--BaseCard_EventTile-spacing-inline);
@@ -170,10 +172,12 @@ limitations under the License.
 
     .mx_GenericEventListSummary_unstyledList, // RR next to a message on the event list summary
     .mx_RoomView_MessageList {                // RR next to a message on the messsge list
-        .mx_EventTile[data-layout=bubble] {
+        .mx_EventTile[data-layout="bubble"] {
             .mx_ReadReceiptGroup {
                 // 6px: scroll bar width (magic number)
-                inset-inline-end: calc(-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end) + $container-gap-width + 6px);
+                /* stylelint-disable-next-line declaration-colon-space-after */
+                inset-inline-end:
+                    calc(-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end) + $container-gap-width + 6px);
             }
 
             &.mx_EventTile_info {
diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.pcss
similarity index 100%
rename from res/css/views/right_panel/_UserInfo.scss
rename to res/css/views/right_panel/_UserInfo.pcss
diff --git a/res/css/views/right_panel/_VerificationPanel.scss b/res/css/views/right_panel/_VerificationPanel.pcss
similarity index 100%
rename from res/css/views/right_panel/_VerificationPanel.scss
rename to res/css/views/right_panel/_VerificationPanel.pcss
diff --git a/res/css/views/right_panel/_WidgetCard.scss b/res/css/views/right_panel/_WidgetCard.pcss
similarity index 100%
rename from res/css/views/right_panel/_WidgetCard.scss
rename to res/css/views/right_panel/_WidgetCard.pcss
diff --git a/res/css/views/room_settings/_AliasSettings.scss b/res/css/views/room_settings/_AliasSettings.pcss
similarity index 100%
rename from res/css/views/room_settings/_AliasSettings.scss
rename to res/css/views/room_settings/_AliasSettings.pcss
diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.pcss
similarity index 98%
rename from res/css/views/rooms/_AppsDrawer.scss
rename to res/css/views/rooms/_AppsDrawer.pcss
index 19a3c8efe7..22fe00393a 100644
--- a/res/css/views/rooms/_AppsDrawer.scss
+++ b/res/css/views/rooms/_AppsDrawer.pcss
@@ -21,7 +21,8 @@ $MinWidth: 240px;
 
 .mx_AppsDrawer {
     margin: $container-gap-width;
-    margin-right: calc($container-gap-width / 2); // The left side gap is fully handled by this margin. To prohibit bleeding on webkit browser.
+    // The left side gap is fully handled by this margin. To prohibit bleeding on webkit browser.
+    margin-right: calc($container-gap-width / 2);
     margin-bottom: 0; // No bottom margin for the correct gap to the CallView below.
     position: relative;
     display: flex;
diff --git a/res/css/views/rooms/_Autocomplete.scss b/res/css/views/rooms/_Autocomplete.pcss
similarity index 100%
rename from res/css/views/rooms/_Autocomplete.scss
rename to res/css/views/rooms/_Autocomplete.pcss
diff --git a/res/css/views/rooms/_AuxPanel.scss b/res/css/views/rooms/_AuxPanel.pcss
similarity index 80%
rename from res/css/views/rooms/_AuxPanel.scss
rename to res/css/views/rooms/_AuxPanel.pcss
index 17a6294bf0..04d17c63b9 100644
--- a/res/css/views/rooms/_AuxPanel.scss
+++ b/res/css/views/rooms/_AuxPanel.pcss
@@ -25,21 +25,21 @@ limitations under the License.
     color: inherit;
 }
 
-.m_RoomView_auxPanel_stateViews_span[data-severity=warning] {
+.m_RoomView_auxPanel_stateViews_span[data-severity="warning"] {
     font-weight: bold;
     color: orange;
 }
 
-.m_RoomView_auxPanel_stateViews_span[data-severity=alert] {
+.m_RoomView_auxPanel_stateViews_span[data-severity="alert"] {
     font-weight: bold;
     color: red;
 }
 
-.m_RoomView_auxPanel_stateViews_span[data-severity=normal] {
+.m_RoomView_auxPanel_stateViews_span[data-severity="normal"] {
     font-weight: normal;
 }
 
-.m_RoomView_auxPanel_stateViews_span[data-severity=notice] {
+.m_RoomView_auxPanel_stateViews_span[data-severity="notice"] {
     font-weight: normal;
     color: $settings-grey-fg-color;
 }
diff --git a/res/css/views/rooms/_BasicMessageComposer.scss b/res/css/views/rooms/_BasicMessageComposer.pcss
similarity index 100%
rename from res/css/views/rooms/_BasicMessageComposer.scss
rename to res/css/views/rooms/_BasicMessageComposer.pcss
diff --git a/res/css/views/rooms/_E2EIcon.scss b/res/css/views/rooms/_E2EIcon.pcss
similarity index 100%
rename from res/css/views/rooms/_E2EIcon.scss
rename to res/css/views/rooms/_E2EIcon.pcss
diff --git a/res/css/views/rooms/_EditMessageComposer.scss b/res/css/views/rooms/_EditMessageComposer.pcss
similarity index 100%
rename from res/css/views/rooms/_EditMessageComposer.scss
rename to res/css/views/rooms/_EditMessageComposer.pcss
diff --git a/res/css/views/rooms/_EntityTile.scss b/res/css/views/rooms/_EntityTile.pcss
similarity index 100%
rename from res/css/views/rooms/_EntityTile.scss
rename to res/css/views/rooms/_EntityTile.pcss
diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.pcss
similarity index 91%
rename from res/css/views/rooms/_EventBubbleTile.scss
rename to res/css/views/rooms/_EventBubbleTile.pcss
index 939d2ddcd5..f04b15be28 100644
--- a/res/css/views/rooms/_EventBubbleTile.scss
+++ b/res/css/views/rooms/_EventBubbleTile.pcss
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_RoomView_body[data-layout=bubble] {
+.mx_RoomView_body[data-layout="bubble"] {
     .mx_RoomView_timeline, .mx_RoomView_statusArea, .mx_MessageComposer {
         width: 100%;
         max-width: 1200px;
@@ -22,8 +22,8 @@ limitations under the License.
     }
 }
 
-.mx_EventTile[data-layout=bubble],
-.mx_GenericEventListSummary[data-layout=bubble] {
+.mx_EventTile[data-layout="bubble"],
+.mx_GenericEventListSummary[data-layout="bubble"] {
     --avatarSize: 32px;
     --gutterSize: 11px;
     --cornerRadius: 12px;
@@ -37,7 +37,7 @@ limitations under the License.
     margin-inline-end: var(--EventTile_bubble-margin-inline-end);
 }
 
-.mx_EventTile[data-layout=bubble] {
+.mx_EventTile[data-layout="bubble"] {
     --EventTile_bubble_line-margin-inline-start: -9px;
     --EventTile_bubble_line-margin-inline-end: -12px;
     --EventTile_bubble_gap-inline: 5px;
@@ -120,7 +120,7 @@ limitations under the License.
         }
 
         .mx_DisambiguatedProfile_mxid {
-            margin-inline-start: 0; // Align mxid with truncated displayName inside mx_EventTile[data-layout=bubble]
+            margin-inline-start: 0; // Align mxid with truncated displayName inside mx_EventTile[data-layout="bubble"]
         }
     }
 
@@ -165,7 +165,7 @@ limitations under the License.
         margin-inline: var(--EventTile_bubble_line-margin-inline-start) var(--EventTile_bubble_line-margin-inline-end);
     }
 
-    &[data-self=false] {
+    &[data-self="false"] {
         .mx_EventTile_line {
             border-bottom-right-radius: var(--cornerRadius);
 
@@ -200,7 +200,7 @@ limitations under the License.
         --backgroundColor: $eventbubble-others-bg;
     }
 
-    &[data-self=true] {
+    &[data-self="true"] {
         .mx_EventTile_line {
             margin-inline-start: auto;
             border-bottom-left-radius: var(--cornerRadius);
@@ -360,7 +360,7 @@ limitations under the License.
         }
     }
 
-    &.mx_EventTile_continuation[data-self=false] .mx_EventTile_line {
+    &.mx_EventTile_continuation[data-self="false"] .mx_EventTile_line {
         border-top-left-radius: 0;
 
         .mx_MImageBody .mx_MImageBody_thumbnail_container,
@@ -372,7 +372,7 @@ limitations under the License.
             border-top-left-radius: 0;
         }
     }
-    &.mx_EventTile_lastInSection[data-self=false] .mx_EventTile_line {
+    &.mx_EventTile_lastInSection[data-self="false"] .mx_EventTile_line {
         border-bottom-left-radius: var(--cornerRadius);
 
         .mx_MImageBody .mx_MImageBody_thumbnail_container,
@@ -385,7 +385,7 @@ limitations under the License.
         }
     }
 
-    &.mx_EventTile_continuation[data-self=true] .mx_EventTile_line {
+    &.mx_EventTile_continuation[data-self="true"] .mx_EventTile_line {
         border-top-right-radius: 0;
 
         .mx_MImageBody .mx_MImageBody_thumbnail_container,
@@ -397,7 +397,7 @@ limitations under the License.
             border-top-right-radius: 0;
         }
     }
-    &.mx_EventTile_lastInSection[data-self=true] .mx_EventTile_line {
+    &.mx_EventTile_lastInSection[data-self="true"] .mx_EventTile_line {
         border-bottom-right-radius: var(--cornerRadius);
 
         .mx_MImageBody .mx_MImageBody_thumbnail_container,
@@ -432,7 +432,7 @@ limitations under the License.
         line-height: 1;
     }
 
-    &[data-has-reply=true] {
+    &[data-has-reply="true"] {
         > .mx_EventTile_line {
             flex-direction: column;
         }
@@ -536,7 +536,7 @@ limitations under the License.
     }
 }
 
-.mx_EventTile.mx_EventTile_noBubble[data-layout=bubble] {
+.mx_EventTile.mx_EventTile_noBubble[data-layout="bubble"] {
     --backgroundColor: transparent;
 
     .mx_EventTile_line.mx_EventTile_emote {
@@ -556,17 +556,17 @@ limitations under the License.
     }
 }
 
-.mx_EventTile.mx_EventTile_bubbleContainer[data-layout=bubble],
-.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout=bubble] {
+.mx_EventTile.mx_EventTile_bubbleContainer[data-layout="bubble"],
+.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout="bubble"] {
     .mx_EventTile_line > a {
         // hide this timestamp as the tile will render its own
         display: none;
     }
 }
 
-.mx_EventTile.mx_EventTile_bubbleContainer[data-layout=bubble],
-.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout=bubble],
-.mx_EventTile.mx_EventTile_info[data-layout=bubble] {
+.mx_EventTile.mx_EventTile_bubbleContainer[data-layout="bubble"],
+.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout="bubble"],
+.mx_EventTile.mx_EventTile_info[data-layout="bubble"] {
     padding: 5px 0;
     display: flex;
     align-items: center;
@@ -580,10 +580,10 @@ limitations under the License.
     }
 }
 
-.mx_EventTile.mx_EventTile_bubbleContainer[data-layout=bubble],
-.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout=bubble],
-.mx_EventTile.mx_EventTile_info[data-layout=bubble],
-.mx_GenericEventListSummary[data-layout=bubble][data-expanded=false] {
+.mx_EventTile.mx_EventTile_bubbleContainer[data-layout="bubble"],
+.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout="bubble"],
+.mx_EventTile.mx_EventTile_info[data-layout="bubble"],
+.mx_GenericEventListSummary[data-layout="bubble"][data-expanded="false"] {
     --backgroundColor: transparent;
     --gutterSize: 0;
 
@@ -613,7 +613,7 @@ limitations under the License.
     }
 }
 
-.mx_GenericEventListSummary[data-layout=bubble] {
+.mx_GenericEventListSummary[data-layout="bubble"] {
     .mx_EventTile.mx_EventTile_info .mx_EventTile_line {
         // Avoid overflow of event info by cancelling width settings
         width: 100%;
@@ -622,16 +622,17 @@ limitations under the License.
     }
 
     // increase margin between ELS and the next Event to not have our user avatar overlap the expand/collapse button
-    &[data-expanded=false] + .mx_EventTile[data-layout=bubble][data-self=true] {
+    &[data-expanded="false"] + .mx_EventTile[data-layout="bubble"][data-self="true"] {
         margin-top: 20px;
     }
 
-    &[data-expanded=true] .mx_EventTile_info {
+    &[data-expanded="true"] .mx_EventTile_info {
         padding: 2px 0;
         margin-right: 0;
 
         .mx_MessageActionBar {
-            inset-inline-start: initial; // Reset .mx_EventTile[data-layout="bubble"][data-self="false"] .mx_MessageActionBar
+            // Reset .mx_EventTile[data-layout="bubble"][data-self="false"] .mx_MessageActionBar
+            inset-inline-start: initial;
             inset-inline-end: 48px; // align with that of right-column bubbles
         }
 
@@ -646,6 +647,6 @@ limitations under the License.
     }
 }
 
-.mx_EventTile_tileError[data-layout=bubble] .mx_EventTile_line {
+.mx_EventTile_tileError[data-layout="bubble"] .mx_EventTile_line {
     flex-direction: column; // restore the centering
 }
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.pcss
similarity index 92%
rename from res/css/views/rooms/_EventTile.scss
rename to res/css/views/rooms/_EventTile.pcss
index 8c9a2c3737..fb02089d6f 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.pcss
@@ -119,7 +119,8 @@ $left-gutter: 64px;
         }
 
         .mx_EventTile_collapsedCodeBlock {
-            display: block !important; // !important needed due to .mx_ReplyTile .mx_EventTile_content .mx_EventTile_pre_container > pre
+            // !important needed due to .mx_ReplyTile .mx_EventTile_content .mx_EventTile_pre_container > pre
+            display: block !important;
         }
     }
 
@@ -160,12 +161,11 @@ $left-gutter: 64px;
         visibility: hidden;
     }
 
-    &[data-layout=irc],
-    &[data-layout=group] {
+    &[data-layout="irc"],
+    &[data-layout="group"] {
         // TODO: adjust the values for IRC layout
         --EventTile-box-shadow-offset-x: calc(50px + $selected-message-border-width);
         --EventTile-box-shadow-spread-radius: -50px;
-
         .mx_EventTile_e2eIcon {
             position: absolute;
         }
@@ -225,7 +225,9 @@ $left-gutter: 64px;
         &.mx_EventTile_selected {
             > .mx_EventTile_line {
                 // TODO: ultimately we probably want some transition on here.
-                box-shadow: inset var(--EventTile-box-shadow-offset-x) 0 0 var(--EventTile-box-shadow-spread-radius) $accent;
+                box-shadow:
+                    inset var(--EventTile-box-shadow-offset-x) 0 0
+                    var(--EventTile-box-shadow-spread-radius) $accent;
             }
         }
 
@@ -245,27 +247,33 @@ $left-gutter: 64px;
             }
 
             &.mx_EventTile_verified .mx_EventTile_line {
-                box-shadow: inset var(--EventTile-box-shadow-offset-x) 0 0 var(--EventTile-box-shadow-spread-radius) $e2e-verified-color;
+                box-shadow:
+                    inset var(--EventTile-box-shadow-offset-x) 0 0
+                    var(--EventTile-box-shadow-spread-radius) $e2e-verified-color;
             }
 
             &.mx_EventTile_unverified .mx_EventTile_line {
-                box-shadow: inset var(--EventTile-box-shadow-offset-x) 0 0 var(--EventTile-box-shadow-spread-radius) $e2e-unverified-color;
+                box-shadow:
+                    inset var(--EventTile-box-shadow-offset-x) 0 0
+                    var(--EventTile-box-shadow-spread-radius) $e2e-unverified-color;
             }
 
             &.mx_EventTile_unknown .mx_EventTile_line {
-                box-shadow: inset var(--EventTile-box-shadow-offset-x) 0 0 var(--EventTile-box-shadow-spread-radius) $e2e-unknown-color;
+                box-shadow:
+                    inset var(--EventTile-box-shadow-offset-x) 0 0
+                    var(--EventTile-box-shadow-spread-radius) $e2e-unknown-color;
             }
         }
     }
 
-    &[data-layout=bubble],
-    &[data-layout=group] {
+    &[data-layout="bubble"],
+    &[data-layout="group"] {
         .mx_EventTileBubble {
             margin-inline: auto;
         }
     }
 
-    &[data-layout=irc] {
+    &[data-layout="irc"] {
         --EventTile_irc_line_info-inset-inline-start: calc(var(--name-width) + 10px + var(--icon-width));
 
         .mx_EventTile_msgOption {
@@ -308,7 +316,7 @@ $left-gutter: 64px;
         }
     }
 
-    &[data-layout=group] {
+    &[data-layout="group"] {
         .mx_EventTile_avatar {
             top: 14px;
             left: $spacing-8;
@@ -374,10 +382,12 @@ $left-gutter: 64px;
             }
 
             .mx_ThreadSummary {
-                max-width: min(calc(100% - $left-gutter - $inline-end-margin), 600px); // leave space on both left & right gutters
+                // leave space on both left & right gutters
+                max-width: min(calc(100% - $left-gutter - $inline-end-margin), 600px);
             }
 
-            // on ELS we need the margin to allow interaction with the expand/collapse button which is normally in the RR gutter
+            // on ELS we need the margin to allow interaction with the expand/collapse button
+            // which is normally in the RR gutter
         }
 
         &.mx_EventTile_continuation {
@@ -403,7 +413,8 @@ $left-gutter: 64px;
 
             .mx_EventTile_line {
                 padding-block: $spacing-block-start $spacing-block-end;
-                padding-inline-start: calc(var(--EventTile_group_line-spacing-inline-start) + 20px); // 20px: avatar area
+                // 20px: avatar area
+                padding-inline-start: calc(var(--EventTile_group_line-spacing-inline-start) + 20px);
 
                 .mx_MessageTimestamp {
                     top: 0;
@@ -420,7 +431,7 @@ $left-gutter: 64px;
         }
     }
 
-    &[data-layout=bubble] {
+    &[data-layout="bubble"] {
         .mx_EventTile_msgOption {
             .mx_ReadReceiptGroup {
                 position: absolute;
@@ -434,7 +445,6 @@ $left-gutter: 64px;
                 inset-block-end: calc(($font-18px - 24px) / 2);
             }
         }
-
         .mx_EventTileBubble {
             // Timestamps are inside the tile, so the width can be less constrained
             max-width: 600px;
@@ -446,7 +456,7 @@ $left-gutter: 64px;
     }
 }
 
-.mx_EventTile:not([data-layout=bubble]) {
+.mx_EventTile:not([data-layout="bubble"]) {
     max-width: 100%;
     clear: both;
     padding-top: 18px;
@@ -459,14 +469,14 @@ $left-gutter: 64px;
 }
 
 .mx_GenericEventListSummary {
-    &[data-layout=irc],
-    &[data-layout=group] {
+    &[data-layout="irc"],
+    &[data-layout="group"] {
         .mx_EventTile_line .mx_RedactedBody {
             line-height: 1; // remove spacing between lines
         }
     }
 
-    &[data-layout=irc] {
+    &[data-layout="irc"] {
         .mx_EventTile_line .mx_RedactedBody {
             padding-left: 24px; // 25px - 1px
 
@@ -477,11 +487,14 @@ $left-gutter: 64px;
 
         // Apply only collapsed events block
         > .mx_EventTile_line {
-            padding-left: calc(var(--name-width) + var(--icon-width) + $MessageTimestamp_width + 3 * var(--right-padding)); // 15 px of padding
+            /* stylelint-disable-next-line declaration-colon-space-after */
+            padding-left:
+                // 15 px of padding
+                calc(var(--name-width) + var(--icon-width) + $MessageTimestamp_width + 3 * var(--right-padding));
         }
     }
 
-    &[data-layout=group] {
+    &[data-layout="group"] {
         .mx_EventTile_line {
             padding-left: $left-gutter;
         }
@@ -825,13 +838,13 @@ $left-gutter: 64px;
 // 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 {
+.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="ThreadsList"] {
     --topOffset: $spacing-12;
     --leftOffset: 48px;
     $borderRadius: 8px;
@@ -879,11 +892,11 @@ $left-gutter: 64px;
         inset: $notification-inset-block-start $spacing-8 auto auto;
     }
 
-    &[data-notification=total]::before {
+    &[data-notification="total"]::before {
         background-color: $room-icon-unread-color;
     }
 
-    &[data-notification=highlight]::before {
+    &[data-notification="highlight"]::before {
         background-color: $alert;
     }
 
@@ -970,7 +983,7 @@ $left-gutter: 64px;
     }
 
     // ThreadsList has always group layout
-    &[data-layout=group]:hover {
+    &[data-layout="group"]:hover {
         .mx_EventTile_line {
             background-color: $system; // override $event-selected-color
             box-shadow: none; // don't show the verification left stroke in the thread list
@@ -978,7 +991,7 @@ $left-gutter: 64px;
     }
 }
 
-// For style rules of ThreadView, see _ThreadPanel.scss
+// For style rules of ThreadView, see _ThreadPanel.pcss
 .mx_ThreadView {
     --ThreadView_group_spacing-start: 56px; // 56px: 64px - 8px (padding)
     --ThreadView_group_spacing-end: 8px; // same as padding
@@ -1029,13 +1042,14 @@ $left-gutter: 64px;
                 .mx_EventTile_content,
                 .mx_RedactedBody {
                     width: auto;
-                    margin-inline-start: calc(var(--ThreadView_group_spacing-start) + 14px + 6px); // 14px: avatar width, 6px: 20px - 14px
+                    // 14px: avatar width, 6px: 20px - 14px
+                    margin-inline-start: calc(var(--ThreadView_group_spacing-start) + 14px + 6px);
                     font-size: $line-height;
                 }
             }
 
-            &[data-layout=irc],
-            &[data-layout=group] {
+            &[data-layout="irc"],
+            &[data-layout="group"] {
                 padding-top: 0;
 
                 .mx_EventTile_avatar {
@@ -1048,15 +1062,15 @@ $left-gutter: 64px;
                 }
             }
 
-            &[data-layout=bubble] {
+            &[data-layout="bubble"] {
                 .mx_EventTile_avatar {
                     inset-inline-start: 0;
                 }
             }
         }
 
-        &[data-layout=irc],
-        &[data-layout=group] {
+        &[data-layout="irc"],
+        &[data-layout="group"] {
             padding-block-start: $spacing-16;
 
             .mx_EventTile_line {
@@ -1068,7 +1082,7 @@ $left-gutter: 64px;
             }
         }
 
-        &[data-layout=group] {
+        &[data-layout="group"] {
             width: 100%;
 
             .mx_EventTile_content,
@@ -1145,7 +1159,7 @@ $left-gutter: 64px;
             }
         }
 
-        &[data-layout=bubble] {
+        &[data-layout="bubble"] {
             margin-inline: var(--BaseCard_EventTile-spacing-inline);
 
             &::before {
@@ -1163,7 +1177,7 @@ $left-gutter: 64px;
                 max-width: var(--EventBubbleTile_line-max-width);
             }
 
-            &[data-self=true] {
+            &[data-self="true"] {
                 align-items: flex-end;
 
                 .mx_EventTile_line.mx_EventTile_mediaLine {
@@ -1174,8 +1188,8 @@ $left-gutter: 64px;
     }
 
     .mx_GenericEventListSummary {
-        &[data-layout=irc],
-        &[data-layout=group] {
+        &[data-layout="irc"],
+        &[data-layout="group"] {
             > .mx_EventTile_line {
                 padding-inline-start: var(--ThreadView_group_spacing-start); // align summary text with message text
                 padding-inline-end: var(--ThreadView_group_spacing-end); // align summary text with message text
@@ -1188,7 +1202,7 @@ $left-gutter: 64px;
 .mx_MatrixChat_useCompactLayout {
     .mx_EventTile {
         // Override :not([data-layout="bubble"])
-        &[data-layout=group] {
+        &[data-layout="group"] {
             --MatrixChat_useCompactLayout_group-padding-top: $spacing-4;
             --MatrixChat_useCompactLayout-top-avatar: 2px;
             --MatrixChat_useCompactLayout-top-e2eIcon: 3px;
@@ -1275,8 +1289,10 @@ $left-gutter: 64px;
             }
         }
 
-        &[data-shape=ThreadsList][data-notification]::before {
-            inset-block-start: calc($notification-inset-block-start - var(--MatrixChat_useCompactLayout_group-padding-top));
+        &[data-shape="ThreadsList"][data-notification]::before {
+            /* stylelint-disable-next-line declaration-colon-space-after */
+            inset-block-start:
+                calc($notification-inset-block-start - var(--MatrixChat_useCompactLayout_group-padding-top));
         }
     }
 }
diff --git a/res/css/views/rooms/_HistoryTile.scss b/res/css/views/rooms/_HistoryTile.pcss
similarity index 100%
rename from res/css/views/rooms/_HistoryTile.scss
rename to res/css/views/rooms/_HistoryTile.pcss
diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.pcss
similarity index 100%
rename from res/css/views/rooms/_IRCLayout.scss
rename to res/css/views/rooms/_IRCLayout.pcss
diff --git a/res/css/views/rooms/_JumpToBottomButton.scss b/res/css/views/rooms/_JumpToBottomButton.pcss
similarity index 100%
rename from res/css/views/rooms/_JumpToBottomButton.scss
rename to res/css/views/rooms/_JumpToBottomButton.pcss
diff --git a/res/css/views/rooms/_LinkPreviewGroup.scss b/res/css/views/rooms/_LinkPreviewGroup.pcss
similarity index 100%
rename from res/css/views/rooms/_LinkPreviewGroup.scss
rename to res/css/views/rooms/_LinkPreviewGroup.pcss
diff --git a/res/css/views/rooms/_LinkPreviewWidget.scss b/res/css/views/rooms/_LinkPreviewWidget.pcss
similarity index 100%
rename from res/css/views/rooms/_LinkPreviewWidget.scss
rename to res/css/views/rooms/_LinkPreviewWidget.pcss
diff --git a/res/css/views/rooms/_MemberInfo.scss b/res/css/views/rooms/_MemberInfo.pcss
similarity index 100%
rename from res/css/views/rooms/_MemberInfo.scss
rename to res/css/views/rooms/_MemberInfo.pcss
diff --git a/res/css/views/rooms/_MemberList.scss b/res/css/views/rooms/_MemberList.pcss
similarity index 97%
rename from res/css/views/rooms/_MemberList.scss
rename to res/css/views/rooms/_MemberList.pcss
index 41f394ff84..05b9019b65 100644
--- a/res/css/views/rooms/_MemberList.scss
+++ b/res/css/views/rooms/_MemberList.pcss
@@ -66,7 +66,7 @@ limitations under the License.
 .mx_MemberList_query {
     height: 16px;
 
-    // stricter rule to override the one in _common.scss
+    // stricter rule to override the one in _common.pcss
     &[type="text"] {
         font-size: $font-12px;
     }
diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.pcss
similarity index 100%
rename from res/css/views/rooms/_MessageComposer.scss
rename to res/css/views/rooms/_MessageComposer.pcss
diff --git a/res/css/views/rooms/_MessageComposerFormatBar.scss b/res/css/views/rooms/_MessageComposerFormatBar.pcss
similarity index 100%
rename from res/css/views/rooms/_MessageComposerFormatBar.scss
rename to res/css/views/rooms/_MessageComposerFormatBar.pcss
diff --git a/res/css/views/rooms/_NewRoomIntro.scss b/res/css/views/rooms/_NewRoomIntro.pcss
similarity index 100%
rename from res/css/views/rooms/_NewRoomIntro.scss
rename to res/css/views/rooms/_NewRoomIntro.pcss
diff --git a/res/css/views/rooms/_NotificationBadge.scss b/res/css/views/rooms/_NotificationBadge.pcss
similarity index 99%
rename from res/css/views/rooms/_NotificationBadge.scss
rename to res/css/views/rooms/_NotificationBadge.pcss
index c06f9f5075..1c9b380bf5 100644
--- a/res/css/views/rooms/_NotificationBadge.scss
+++ b/res/css/views/rooms/_NotificationBadge.pcss
@@ -22,7 +22,6 @@ limitations under the License.
     // Badges are structured a bit weirdly to work around issues with non-monospace
     // font styles. The badge pill is actually a background div and the count floats
     // within that. For example:
-    //
     //  ( 99+ ) <-- Rounded pill is a _bg class.
     //     ^- The count is an element floating within that.
 
diff --git a/res/css/views/rooms/_PinnedEventTile.scss b/res/css/views/rooms/_PinnedEventTile.pcss
similarity index 98%
rename from res/css/views/rooms/_PinnedEventTile.scss
rename to res/css/views/rooms/_PinnedEventTile.pcss
index 47781a3b32..add7a78104 100644
--- a/res/css/views/rooms/_PinnedEventTile.scss
+++ b/res/css/views/rooms/_PinnedEventTile.pcss
@@ -71,8 +71,6 @@ limitations under the License.
         &::before {
             content: "";
             position: absolute;
-            //top: 0;
-            //left: 0;
             height: inherit;
             width: inherit;
             background: $secondary-content;
diff --git a/res/css/views/rooms/_PresenceLabel.scss b/res/css/views/rooms/_PresenceLabel.pcss
similarity index 100%
rename from res/css/views/rooms/_PresenceLabel.scss
rename to res/css/views/rooms/_PresenceLabel.pcss
diff --git a/res/css/views/rooms/_ReadReceiptGroup.scss b/res/css/views/rooms/_ReadReceiptGroup.pcss
similarity index 100%
rename from res/css/views/rooms/_ReadReceiptGroup.scss
rename to res/css/views/rooms/_ReadReceiptGroup.pcss
diff --git a/res/css/views/rooms/_RecentlyViewedButton.scss b/res/css/views/rooms/_RecentlyViewedButton.pcss
similarity index 100%
rename from res/css/views/rooms/_RecentlyViewedButton.scss
rename to res/css/views/rooms/_RecentlyViewedButton.pcss
diff --git a/res/css/views/rooms/_ReplyPreview.scss b/res/css/views/rooms/_ReplyPreview.pcss
similarity index 100%
rename from res/css/views/rooms/_ReplyPreview.scss
rename to res/css/views/rooms/_ReplyPreview.pcss
diff --git a/res/css/views/rooms/_ReplyTile.scss b/res/css/views/rooms/_ReplyTile.pcss
similarity index 100%
rename from res/css/views/rooms/_ReplyTile.scss
rename to res/css/views/rooms/_ReplyTile.pcss
diff --git a/res/css/views/rooms/_RoomBreadcrumbs.scss b/res/css/views/rooms/_RoomBreadcrumbs.pcss
similarity index 100%
rename from res/css/views/rooms/_RoomBreadcrumbs.scss
rename to res/css/views/rooms/_RoomBreadcrumbs.pcss
diff --git a/res/css/views/rooms/_RoomHeader.scss b/res/css/views/rooms/_RoomHeader.pcss
similarity index 99%
rename from res/css/views/rooms/_RoomHeader.scss
rename to res/css/views/rooms/_RoomHeader.pcss
index 6ac1773263..1ae9aae8b8 100644
--- a/res/css/views/rooms/_RoomHeader.scss
+++ b/res/css/views/rooms/_RoomHeader.pcss
@@ -121,7 +121,7 @@ limitations under the License.
         background-color: $tertiary-content;
     }
 
-    &[aria-expanded=true] {
+    &[aria-expanded="true"] {
         background-color: $quinary-content;
 
         .mx_RoomHeader_chevron {
diff --git a/res/css/views/rooms/_RoomInfoLine.scss b/res/css/views/rooms/_RoomInfoLine.pcss
similarity index 100%
rename from res/css/views/rooms/_RoomInfoLine.scss
rename to res/css/views/rooms/_RoomInfoLine.pcss
diff --git a/res/css/views/rooms/_RoomList.scss b/res/css/views/rooms/_RoomList.pcss
similarity index 100%
rename from res/css/views/rooms/_RoomList.scss
rename to res/css/views/rooms/_RoomList.pcss
diff --git a/res/css/views/rooms/_RoomListHeader.scss b/res/css/views/rooms/_RoomListHeader.pcss
similarity index 98%
rename from res/css/views/rooms/_RoomListHeader.scss
rename to res/css/views/rooms/_RoomListHeader.pcss
index 7f5d06d549..77a8ac7a35 100644
--- a/res/css/views/rooms/_RoomListHeader.scss
+++ b/res/css/views/rooms/_RoomListHeader.pcss
@@ -54,7 +54,7 @@ limitations under the License.
             mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
         }
 
-        &[aria-expanded=true] {
+        &[aria-expanded="true"] {
             background-color: $quinary-content;
 
             &::before {
diff --git a/res/css/views/rooms/_RoomPreviewBar.scss b/res/css/views/rooms/_RoomPreviewBar.pcss
similarity index 98%
rename from res/css/views/rooms/_RoomPreviewBar.scss
rename to res/css/views/rooms/_RoomPreviewBar.pcss
index 7cce08c789..81188f336f 100644
--- a/res/css/views/rooms/_RoomPreviewBar.scss
+++ b/res/css/views/rooms/_RoomPreviewBar.pcss
@@ -126,7 +126,7 @@ limitations under the License.
     .mx_RoomPreviewBar_actions {
         flex-direction: column;
         .mx_AccessibleButton {
-            padding: 7px 50px; //extra wide
+            padding: 7px 50px; // extra wide
         }
 
         & > * {
diff --git a/res/css/views/rooms/_RoomPreviewCard.scss b/res/css/views/rooms/_RoomPreviewCard.pcss
similarity index 100%
rename from res/css/views/rooms/_RoomPreviewCard.scss
rename to res/css/views/rooms/_RoomPreviewCard.pcss
diff --git a/res/css/views/rooms/_RoomSublist.scss b/res/css/views/rooms/_RoomSublist.pcss
similarity index 100%
rename from res/css/views/rooms/_RoomSublist.scss
rename to res/css/views/rooms/_RoomSublist.pcss
diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.pcss
similarity index 100%
rename from res/css/views/rooms/_RoomTile.scss
rename to res/css/views/rooms/_RoomTile.pcss
diff --git a/res/css/views/rooms/_RoomUpgradeWarningBar.scss b/res/css/views/rooms/_RoomUpgradeWarningBar.pcss
similarity index 100%
rename from res/css/views/rooms/_RoomUpgradeWarningBar.scss
rename to res/css/views/rooms/_RoomUpgradeWarningBar.pcss
diff --git a/res/css/views/rooms/_SearchBar.scss b/res/css/views/rooms/_SearchBar.pcss
similarity index 100%
rename from res/css/views/rooms/_SearchBar.scss
rename to res/css/views/rooms/_SearchBar.pcss
diff --git a/res/css/views/rooms/_SendMessageComposer.scss b/res/css/views/rooms/_SendMessageComposer.pcss
similarity index 100%
rename from res/css/views/rooms/_SendMessageComposer.scss
rename to res/css/views/rooms/_SendMessageComposer.pcss
diff --git a/res/css/views/rooms/_Stickers.scss b/res/css/views/rooms/_Stickers.pcss
similarity index 100%
rename from res/css/views/rooms/_Stickers.scss
rename to res/css/views/rooms/_Stickers.pcss
diff --git a/res/css/views/rooms/_ThreadSummary.scss b/res/css/views/rooms/_ThreadSummary.pcss
similarity index 98%
rename from res/css/views/rooms/_ThreadSummary.scss
rename to res/css/views/rooms/_ThreadSummary.pcss
index a1821c5a59..370aa30ce0 100644
--- a/res/css/views/rooms/_ThreadSummary.scss
+++ b/res/css/views/rooms/_ThreadSummary.pcss
@@ -32,7 +32,8 @@ limitations under the License.
 
 .mx_ThreadSummary {
     min-width: 267px;
-    max-width: min(calc(100% - var(--EventTile_group_line-spacing-inline-start)), 600px); // leave space on both left & right gutters
+    // leave space on both left & right gutters
+    max-width: min(calc(100% - var(--EventTile_group_line-spacing-inline-start)), 600px);
     width: fit-content;
     height: 40px;
     position: relative;
diff --git a/res/css/views/rooms/_TopUnreadMessagesBar.scss b/res/css/views/rooms/_TopUnreadMessagesBar.pcss
similarity index 100%
rename from res/css/views/rooms/_TopUnreadMessagesBar.scss
rename to res/css/views/rooms/_TopUnreadMessagesBar.pcss
diff --git a/res/css/views/rooms/_VideoRoomSummary.scss b/res/css/views/rooms/_VideoRoomSummary.pcss
similarity index 100%
rename from res/css/views/rooms/_VideoRoomSummary.scss
rename to res/css/views/rooms/_VideoRoomSummary.pcss
diff --git a/res/css/views/rooms/_VoiceRecordComposerTile.scss b/res/css/views/rooms/_VoiceRecordComposerTile.pcss
similarity index 99%
rename from res/css/views/rooms/_VoiceRecordComposerTile.scss
rename to res/css/views/rooms/_VoiceRecordComposerTile.pcss
index 69fe292c0a..1f1aa39f88 100644
--- a/res/css/views/rooms/_VoiceRecordComposerTile.scss
+++ b/res/css/views/rooms/_VoiceRecordComposerTile.pcss
@@ -101,7 +101,7 @@ limitations under the License.
 // midpoint: lamps take longer to turn off than they do to turn on, and the
 // extra frames give it a bit of a realistic punch for when the animation is
 // ramping back up to 100% opacity.
-//
+
 // Target animation timings: steady for 1.5s, fade out for 0.3s, fade in for 0.2s
 // (intended to be used in a loop for 2s animation speed)
 @keyframes recording-pulse {
diff --git a/res/css/views/rooms/_WhoIsTypingTile.scss b/res/css/views/rooms/_WhoIsTypingTile.pcss
similarity index 95%
rename from res/css/views/rooms/_WhoIsTypingTile.scss
rename to res/css/views/rooms/_WhoIsTypingTile.pcss
index 86ac07e615..e07e6d00d9 100644
--- a/res/css/views/rooms/_WhoIsTypingTile.scss
+++ b/res/css/views/rooms/_WhoIsTypingTile.pcss
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 .mx_WhoIsTypingTile {
-    margin-left: -18px; //offset padding from mx_RoomView_MessageList to center avatars
+    margin-left: -18px; // offset padding from mx_RoomView_MessageList to center avatars
     padding-top: 18px;
     display: flex;
     align-items: center;
diff --git a/res/css/views/settings/_AvatarSetting.scss b/res/css/views/settings/_AvatarSetting.pcss
similarity index 100%
rename from res/css/views/settings/_AvatarSetting.scss
rename to res/css/views/settings/_AvatarSetting.pcss
diff --git a/res/css/views/settings/_CrossSigningPanel.scss b/res/css/views/settings/_CrossSigningPanel.pcss
similarity index 100%
rename from res/css/views/settings/_CrossSigningPanel.scss
rename to res/css/views/settings/_CrossSigningPanel.pcss
diff --git a/res/css/views/settings/_CryptographyPanel.scss b/res/css/views/settings/_CryptographyPanel.pcss
similarity index 100%
rename from res/css/views/settings/_CryptographyPanel.scss
rename to res/css/views/settings/_CryptographyPanel.pcss
diff --git a/res/css/views/settings/_DevicesPanel.scss b/res/css/views/settings/_DevicesPanel.pcss
similarity index 100%
rename from res/css/views/settings/_DevicesPanel.scss
rename to res/css/views/settings/_DevicesPanel.pcss
diff --git a/res/css/views/settings/_EmailAddresses.scss b/res/css/views/settings/_EmailAddresses.pcss
similarity index 100%
rename from res/css/views/settings/_EmailAddresses.scss
rename to res/css/views/settings/_EmailAddresses.pcss
diff --git a/res/css/views/settings/_FontScalingPanel.scss b/res/css/views/settings/_FontScalingPanel.pcss
similarity index 98%
rename from res/css/views/settings/_FontScalingPanel.scss
rename to res/css/views/settings/_FontScalingPanel.pcss
index 7eb1c5a296..ba255b54ca 100644
--- a/res/css/views/settings/_FontScalingPanel.scss
+++ b/res/css/views/settings/_FontScalingPanel.pcss
@@ -35,7 +35,7 @@ limitations under the License.
             padding-top: 9px; // TODO: Use a spacing variable
         }
 
-        .mx_EventTile[data-layout=bubble] {
+        .mx_EventTile[data-layout="bubble"] {
             margin-top: 30px; // TODO: Use a spacing variable
         }
 
diff --git a/res/css/views/settings/_ImageSizePanel.scss b/res/css/views/settings/_ImageSizePanel.pcss
similarity index 100%
rename from res/css/views/settings/_ImageSizePanel.scss
rename to res/css/views/settings/_ImageSizePanel.pcss
diff --git a/res/css/views/settings/_IntegrationManager.scss b/res/css/views/settings/_IntegrationManager.pcss
similarity index 100%
rename from res/css/views/settings/_IntegrationManager.scss
rename to res/css/views/settings/_IntegrationManager.pcss
diff --git a/res/css/views/settings/_JoinRuleSettings.scss b/res/css/views/settings/_JoinRuleSettings.pcss
similarity index 100%
rename from res/css/views/settings/_JoinRuleSettings.scss
rename to res/css/views/settings/_JoinRuleSettings.pcss
diff --git a/res/css/views/settings/_KeyboardShortcut.scss b/res/css/views/settings/_KeyboardShortcut.pcss
similarity index 100%
rename from res/css/views/settings/_KeyboardShortcut.scss
rename to res/css/views/settings/_KeyboardShortcut.pcss
diff --git a/res/css/views/settings/_LayoutSwitcher.scss b/res/css/views/settings/_LayoutSwitcher.pcss
similarity index 94%
rename from res/css/views/settings/_LayoutSwitcher.scss
rename to res/css/views/settings/_LayoutSwitcher.pcss
index 29d1e207f9..500519bbf5 100644
--- a/res/css/views/settings/_LayoutSwitcher.scss
+++ b/res/css/views/settings/_LayoutSwitcher.pcss
@@ -47,7 +47,7 @@ limitations under the License.
                 padding: 10px;
                 pointer-events: none;
 
-                .mx_EventTile[data-layout=bubble] .mx_EventTile_line {
+                .mx_EventTile[data-layout="bubble"] .mx_EventTile_line {
                     padding-right: 11px;
                 }
             }
@@ -76,11 +76,11 @@ limitations under the License.
 
         .mx_EventTile {
             margin: 0;
-            &[data-layout=bubble] {
+            &[data-layout="bubble"] {
                 margin-right: 40px;
                 flex-shrink: 1;
             }
-            &[data-layout=irc] {
+            &[data-layout="irc"] {
                 > a {
                     display: none;
                 }
diff --git a/res/css/views/settings/_Notifications.scss b/res/css/views/settings/_Notifications.pcss
similarity index 100%
rename from res/css/views/settings/_Notifications.scss
rename to res/css/views/settings/_Notifications.pcss
diff --git a/res/css/views/settings/_PhoneNumbers.scss b/res/css/views/settings/_PhoneNumbers.pcss
similarity index 100%
rename from res/css/views/settings/_PhoneNumbers.scss
rename to res/css/views/settings/_PhoneNumbers.pcss
diff --git a/res/css/views/settings/_ProfileSettings.scss b/res/css/views/settings/_ProfileSettings.pcss
similarity index 100%
rename from res/css/views/settings/_ProfileSettings.scss
rename to res/css/views/settings/_ProfileSettings.pcss
diff --git a/res/css/views/settings/_SecureBackupPanel.scss b/res/css/views/settings/_SecureBackupPanel.pcss
similarity index 100%
rename from res/css/views/settings/_SecureBackupPanel.scss
rename to res/css/views/settings/_SecureBackupPanel.pcss
diff --git a/res/css/views/settings/_SetIdServer.scss b/res/css/views/settings/_SetIdServer.pcss
similarity index 100%
rename from res/css/views/settings/_SetIdServer.scss
rename to res/css/views/settings/_SetIdServer.pcss
diff --git a/res/css/views/settings/_SetIntegrationManager.scss b/res/css/views/settings/_SetIntegrationManager.pcss
similarity index 100%
rename from res/css/views/settings/_SetIntegrationManager.scss
rename to res/css/views/settings/_SetIntegrationManager.pcss
diff --git a/res/css/views/settings/_SettingsFieldset.scss b/res/css/views/settings/_SettingsFieldset.pcss
similarity index 100%
rename from res/css/views/settings/_SettingsFieldset.scss
rename to res/css/views/settings/_SettingsFieldset.pcss
diff --git a/res/css/views/settings/_SpellCheckLanguages.scss b/res/css/views/settings/_SpellCheckLanguages.pcss
similarity index 100%
rename from res/css/views/settings/_SpellCheckLanguages.scss
rename to res/css/views/settings/_SpellCheckLanguages.pcss
diff --git a/res/css/views/settings/_ThemeChoicePanel.scss b/res/css/views/settings/_ThemeChoicePanel.pcss
similarity index 100%
rename from res/css/views/settings/_ThemeChoicePanel.scss
rename to res/css/views/settings/_ThemeChoicePanel.pcss
diff --git a/res/css/views/settings/_UpdateCheckButton.scss b/res/css/views/settings/_UpdateCheckButton.pcss
similarity index 100%
rename from res/css/views/settings/_UpdateCheckButton.scss
rename to res/css/views/settings/_UpdateCheckButton.pcss
diff --git a/res/css/views/settings/tabs/_SettingsTab.scss b/res/css/views/settings/tabs/_SettingsTab.pcss
similarity index 100%
rename from res/css/views/settings/tabs/_SettingsTab.scss
rename to res/css/views/settings/tabs/_SettingsTab.pcss
diff --git a/res/css/views/settings/tabs/room/_GeneralRoomSettingsTab.scss b/res/css/views/settings/tabs/room/_GeneralRoomSettingsTab.pcss
similarity index 100%
rename from res/css/views/settings/tabs/room/_GeneralRoomSettingsTab.scss
rename to res/css/views/settings/tabs/room/_GeneralRoomSettingsTab.pcss
diff --git a/res/css/views/settings/tabs/room/_NotificationSettingsTab.scss b/res/css/views/settings/tabs/room/_NotificationSettingsTab.pcss
similarity index 100%
rename from res/css/views/settings/tabs/room/_NotificationSettingsTab.scss
rename to res/css/views/settings/tabs/room/_NotificationSettingsTab.pcss
diff --git a/res/css/views/settings/tabs/room/_RolesRoomSettingsTab.scss b/res/css/views/settings/tabs/room/_RolesRoomSettingsTab.pcss
similarity index 100%
rename from res/css/views/settings/tabs/room/_RolesRoomSettingsTab.scss
rename to res/css/views/settings/tabs/room/_RolesRoomSettingsTab.pcss
diff --git a/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss b/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.pcss
similarity index 100%
rename from res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss
rename to res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.pcss
diff --git a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.pcss
similarity index 100%
rename from res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
rename to res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.pcss
diff --git a/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss b/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.pcss
similarity index 100%
rename from res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss
rename to res/css/views/settings/tabs/user/_GeneralUserSettingsTab.pcss
diff --git a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.scss b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
similarity index 100%
rename from res/css/views/settings/tabs/user/_HelpUserSettingsTab.scss
rename to res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
diff --git a/res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.scss b/res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.pcss
similarity index 100%
rename from res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.scss
rename to res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.pcss
diff --git a/res/css/views/settings/tabs/user/_LabsUserSettingsTab.scss b/res/css/views/settings/tabs/user/_LabsUserSettingsTab.pcss
similarity index 100%
rename from res/css/views/settings/tabs/user/_LabsUserSettingsTab.scss
rename to res/css/views/settings/tabs/user/_LabsUserSettingsTab.pcss
diff --git a/res/css/views/settings/tabs/user/_MjolnirUserSettingsTab.scss b/res/css/views/settings/tabs/user/_MjolnirUserSettingsTab.pcss
similarity index 100%
rename from res/css/views/settings/tabs/user/_MjolnirUserSettingsTab.scss
rename to res/css/views/settings/tabs/user/_MjolnirUserSettingsTab.pcss
diff --git a/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.scss b/res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.pcss
similarity index 100%
rename from res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.scss
rename to res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.pcss
diff --git a/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.scss b/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.pcss
similarity index 100%
rename from res/css/views/settings/tabs/user/_SecurityUserSettingsTab.scss
rename to res/css/views/settings/tabs/user/_SecurityUserSettingsTab.pcss
diff --git a/res/css/views/settings/tabs/user/_SidebarUserSettingsTab.scss b/res/css/views/settings/tabs/user/_SidebarUserSettingsTab.pcss
similarity index 100%
rename from res/css/views/settings/tabs/user/_SidebarUserSettingsTab.scss
rename to res/css/views/settings/tabs/user/_SidebarUserSettingsTab.pcss
diff --git a/res/css/views/settings/tabs/user/_VoiceUserSettingsTab.scss b/res/css/views/settings/tabs/user/_VoiceUserSettingsTab.pcss
similarity index 100%
rename from res/css/views/settings/tabs/user/_VoiceUserSettingsTab.scss
rename to res/css/views/settings/tabs/user/_VoiceUserSettingsTab.pcss
diff --git a/res/css/views/spaces/_SpaceBasicSettings.scss b/res/css/views/spaces/_SpaceBasicSettings.pcss
similarity index 97%
rename from res/css/views/spaces/_SpaceBasicSettings.scss
rename to res/css/views/spaces/_SpaceBasicSettings.pcss
index fe768a2978..e1df48a342 100644
--- a/res/css/views/spaces/_SpaceBasicSettings.scss
+++ b/res/css/views/spaces/_SpaceBasicSettings.pcss
@@ -65,7 +65,7 @@ limitations under the License.
             display: inline-block;
             margin: auto 18px;
             color: $links;
-            font-size: $font-14px; // See _SpaceSettingsDialog.scss
+            font-size: $font-14px; // See _SpaceSettingsDialog.pcss
         }
 
         > .mx_SpaceBasicSettings_avatar_remove {
diff --git a/res/css/views/spaces/_SpaceChildrenPicker.scss b/res/css/views/spaces/_SpaceChildrenPicker.pcss
similarity index 100%
rename from res/css/views/spaces/_SpaceChildrenPicker.scss
rename to res/css/views/spaces/_SpaceChildrenPicker.pcss
diff --git a/res/css/views/spaces/_SpaceCreateMenu.scss b/res/css/views/spaces/_SpaceCreateMenu.pcss
similarity index 100%
rename from res/css/views/spaces/_SpaceCreateMenu.scss
rename to res/css/views/spaces/_SpaceCreateMenu.pcss
diff --git a/res/css/views/spaces/_SpacePublicShare.scss b/res/css/views/spaces/_SpacePublicShare.pcss
similarity index 100%
rename from res/css/views/spaces/_SpacePublicShare.scss
rename to res/css/views/spaces/_SpacePublicShare.pcss
diff --git a/res/css/views/terms/_InlineTermsAgreement.scss b/res/css/views/terms/_InlineTermsAgreement.pcss
similarity index 100%
rename from res/css/views/terms/_InlineTermsAgreement.scss
rename to res/css/views/terms/_InlineTermsAgreement.pcss
diff --git a/res/css/views/toasts/_AnalyticsToast.scss b/res/css/views/toasts/_AnalyticsToast.pcss
similarity index 100%
rename from res/css/views/toasts/_AnalyticsToast.scss
rename to res/css/views/toasts/_AnalyticsToast.pcss
diff --git a/res/css/views/toasts/_IncomingCallToast.scss b/res/css/views/toasts/_IncomingCallToast.pcss
similarity index 100%
rename from res/css/views/toasts/_IncomingCallToast.scss
rename to res/css/views/toasts/_IncomingCallToast.pcss
diff --git a/res/css/views/toasts/_NonUrgentEchoFailureToast.scss b/res/css/views/toasts/_NonUrgentEchoFailureToast.pcss
similarity index 100%
rename from res/css/views/toasts/_NonUrgentEchoFailureToast.scss
rename to res/css/views/toasts/_NonUrgentEchoFailureToast.pcss
diff --git a/res/css/views/typography/_Heading.scss b/res/css/views/typography/_Heading.pcss
similarity index 100%
rename from res/css/views/typography/_Heading.scss
rename to res/css/views/typography/_Heading.pcss
diff --git a/res/css/views/verification/_VerificationShowSas.scss b/res/css/views/verification/_VerificationShowSas.pcss
similarity index 100%
rename from res/css/views/verification/_VerificationShowSas.scss
rename to res/css/views/verification/_VerificationShowSas.pcss
diff --git a/res/css/views/voip/CallView/_CallViewButtons.scss b/res/css/views/voip/CallView/_CallViewButtons.pcss
similarity index 100%
rename from res/css/views/voip/CallView/_CallViewButtons.scss
rename to res/css/views/voip/CallView/_CallViewButtons.pcss
diff --git a/res/css/views/voip/_CallPreview.scss b/res/css/views/voip/_CallPreview.pcss
similarity index 100%
rename from res/css/views/voip/_CallPreview.scss
rename to res/css/views/voip/_CallPreview.pcss
diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.pcss
similarity index 100%
rename from res/css/views/voip/_CallView.scss
rename to res/css/views/voip/_CallView.pcss
diff --git a/res/css/views/voip/_CallViewForRoom.scss b/res/css/views/voip/_CallViewForRoom.pcss
similarity index 100%
rename from res/css/views/voip/_CallViewForRoom.scss
rename to res/css/views/voip/_CallViewForRoom.pcss
diff --git a/res/css/views/voip/_CallViewHeader.scss b/res/css/views/voip/_CallViewHeader.pcss
similarity index 100%
rename from res/css/views/voip/_CallViewHeader.scss
rename to res/css/views/voip/_CallViewHeader.pcss
diff --git a/res/css/views/voip/_CallViewSidebar.scss b/res/css/views/voip/_CallViewSidebar.pcss
similarity index 100%
rename from res/css/views/voip/_CallViewSidebar.scss
rename to res/css/views/voip/_CallViewSidebar.pcss
diff --git a/res/css/views/voip/_DialPad.scss b/res/css/views/voip/_DialPad.pcss
similarity index 100%
rename from res/css/views/voip/_DialPad.scss
rename to res/css/views/voip/_DialPad.pcss
diff --git a/res/css/views/voip/_DialPadContextMenu.scss b/res/css/views/voip/_DialPadContextMenu.pcss
similarity index 100%
rename from res/css/views/voip/_DialPadContextMenu.scss
rename to res/css/views/voip/_DialPadContextMenu.pcss
diff --git a/res/css/views/voip/_DialPadModal.scss b/res/css/views/voip/_DialPadModal.pcss
similarity index 100%
rename from res/css/views/voip/_DialPadModal.scss
rename to res/css/views/voip/_DialPadModal.pcss
diff --git a/res/css/views/voip/_PiPContainer.scss b/res/css/views/voip/_PiPContainer.pcss
similarity index 100%
rename from res/css/views/voip/_PiPContainer.scss
rename to res/css/views/voip/_PiPContainer.pcss
diff --git a/res/css/views/voip/_VideoFeed.scss b/res/css/views/voip/_VideoFeed.pcss
similarity index 100%
rename from res/css/views/voip/_VideoFeed.scss
rename to res/css/views/voip/_VideoFeed.pcss
diff --git a/res/css/views/voip/_VideoLobby.scss b/res/css/views/voip/_VideoLobby.pcss
similarity index 100%
rename from res/css/views/voip/_VideoLobby.scss
rename to res/css/views/voip/_VideoLobby.pcss
diff --git a/res/themes/dark-custom/css/dark-custom.pcss b/res/themes/dark-custom/css/dark-custom.pcss
new file mode 100644
index 0000000000..3acf914e69
--- /dev/null
+++ b/res/themes/dark-custom/css/dark-custom.pcss
@@ -0,0 +1,7 @@
+@import "../../../../res/css/_font-sizes.pcss";
+@import "../../legacy-light/css/_paths.pcss";
+@import "../../legacy-light/css/_fonts.pcss";
+@import "../../legacy-light/css/_legacy-light.pcss";
+@import "../../legacy-dark/css/_legacy-dark.pcss";
+@import "../../light-custom/css/_custom.pcss";
+@import "../../../../res/css/_components.pcss";
diff --git a/res/themes/dark-custom/css/dark-custom.scss b/res/themes/dark-custom/css/dark-custom.scss
deleted file mode 100644
index a5fed6a320..0000000000
--- a/res/themes/dark-custom/css/dark-custom.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@import "../../../../res/css/_font-sizes.scss";
-@import "../../legacy-light/css/_paths.scss";
-@import "../../legacy-light/css/_fonts.scss";
-@import "../../legacy-light/css/_legacy-light.scss";
-@import "../../legacy-dark/css/_legacy-dark.scss";
-@import "../../light-custom/css/_custom.scss";
-@import "../../../../res/css/_components.scss";
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.pcss
similarity index 100%
rename from res/themes/dark/css/_dark.scss
rename to res/themes/dark/css/_dark.pcss
diff --git a/res/themes/dark/css/dark.pcss b/res/themes/dark/css/dark.pcss
new file mode 100644
index 0000000000..5855dd7ad5
--- /dev/null
+++ b/res/themes/dark/css/dark.pcss
@@ -0,0 +1,8 @@
+@import "../../../../res/css/_font-sizes.pcss";
+@import "../../light/css/_paths.pcss";
+@import "../../light/css/_fonts.pcss";
+@import "../../light/css/_light.pcss";
+@import "_dark.pcss";
+@import "../../light/css/_mods.pcss";
+@import "../../../../res/css/_components.pcss";
+@import url("highlight.js/styles/atom-one-dark.css");
diff --git a/res/themes/dark/css/dark.scss b/res/themes/dark/css/dark.scss
deleted file mode 100644
index df83d6db88..0000000000
--- a/res/themes/dark/css/dark.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@import "../../../../res/css/_font-sizes.scss";
-@import "../../light/css/_paths.scss";
-@import "../../light/css/_fonts.scss";
-@import "../../light/css/_light.scss";
-@import "_dark.scss";
-@import "../../light/css/_mods.scss";
-@import "../../../../res/css/_components.scss";
-@import url("highlight.js/styles/atom-one-dark.css");
diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.pcss
similarity index 100%
rename from res/themes/legacy-dark/css/_legacy-dark.scss
rename to res/themes/legacy-dark/css/_legacy-dark.pcss
diff --git a/res/themes/legacy-dark/css/legacy-dark.pcss b/res/themes/legacy-dark/css/legacy-dark.pcss
new file mode 100644
index 0000000000..477abdfd5b
--- /dev/null
+++ b/res/themes/legacy-dark/css/legacy-dark.pcss
@@ -0,0 +1,7 @@
+@import "../../../../res/css/_font-sizes.pcss";
+@import "../../legacy-light/css/_paths.pcss";
+@import "../../legacy-light/css/_fonts.pcss";
+@import "../../legacy-light/css/_legacy-light.pcss";
+@import "_legacy-dark.pcss";
+@import "../../../../res/css/_components.pcss";
+@import url("highlight.js/styles/atom-one-dark.css");
diff --git a/res/themes/legacy-dark/css/legacy-dark.scss b/res/themes/legacy-dark/css/legacy-dark.scss
deleted file mode 100644
index 840794f7c0..0000000000
--- a/res/themes/legacy-dark/css/legacy-dark.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@import "../../../../res/css/_font-sizes.scss";
-@import "../../legacy-light/css/_paths.scss";
-@import "../../legacy-light/css/_fonts.scss";
-@import "../../legacy-light/css/_legacy-light.scss";
-@import "_legacy-dark.scss";
-@import "../../../../res/css/_components.scss";
-@import url("highlight.js/styles/atom-one-dark.css");
diff --git a/res/themes/legacy-light/css/_fonts.scss b/res/themes/legacy-light/css/_fonts.pcss
similarity index 96%
rename from res/themes/legacy-light/css/_fonts.scss
rename to res/themes/legacy-light/css/_fonts.pcss
index 807d8673ba..26d253504a 100644
--- a/res/themes/legacy-light/css/_fonts.scss
+++ b/res/themes/legacy-light/css/_fonts.pcss
@@ -14,7 +14,7 @@
 
 // Grab the other fonts from the current theme, so we can override to Inter
 // in custom fonts if needed.
-@import "../../light/css/_fonts.scss";
+@import "../../light/css/_fonts.pcss";
 
 // Nunito as the default, for old time's sake on legacy themes.
 /* the 'src' links are relative to the bundle.css, which is in a subdirectory.
diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.pcss
similarity index 100%
rename from res/themes/legacy-light/css/_legacy-light.scss
rename to res/themes/legacy-light/css/_legacy-light.pcss
diff --git a/res/themes/legacy-light/css/_paths.scss b/res/themes/legacy-light/css/_paths.pcss
similarity index 60%
rename from res/themes/legacy-light/css/_paths.scss
rename to res/themes/legacy-light/css/_paths.pcss
index 3944076004..d56a074881 100644
--- a/res/themes/legacy-light/css/_paths.scss
+++ b/res/themes/legacy-light/css/_paths.pcss
@@ -1,3 +1,3 @@
-// Path from root SCSS file (such as `light.scss`) to `res` dir in the source tree
+// Path from root SCSS file (such as `light.pcss`) to `res` dir in the source tree
 // This value is overridden by external themes in `element-web`.
 $res: ../../..;
diff --git a/res/themes/legacy-light/css/legacy-light.pcss b/res/themes/legacy-light/css/legacy-light.pcss
new file mode 100644
index 0000000000..dc8ca05afb
--- /dev/null
+++ b/res/themes/legacy-light/css/legacy-light.pcss
@@ -0,0 +1,6 @@
+@import "../../../../res/css/_font-sizes.pcss";
+@import "_paths.pcss";
+@import "_fonts.pcss";
+@import "_legacy-light.pcss";
+@import "../../../../res/css/_components.pcss";
+@import url("highlight.js/styles/atom-one-light.css");
diff --git a/res/themes/legacy-light/css/legacy-light.scss b/res/themes/legacy-light/css/legacy-light.scss
deleted file mode 100644
index 347d240fc6..0000000000
--- a/res/themes/legacy-light/css/legacy-light.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@import "../../../../res/css/_font-sizes.scss";
-@import "_paths.scss";
-@import "_fonts.scss";
-@import "_legacy-light.scss";
-@import "../../../../res/css/_components.scss";
-@import url("highlight.js/styles/atom-one-light.css");
diff --git a/res/themes/light-custom/css/_custom.scss b/res/themes/light-custom/css/_custom.pcss
similarity index 100%
rename from res/themes/light-custom/css/_custom.scss
rename to res/themes/light-custom/css/_custom.pcss
diff --git a/res/themes/light-custom/css/light-custom.pcss b/res/themes/light-custom/css/light-custom.pcss
new file mode 100644
index 0000000000..eeba1002e5
--- /dev/null
+++ b/res/themes/light-custom/css/light-custom.pcss
@@ -0,0 +1,6 @@
+@import "../../../../res/css/_font-sizes.pcss";
+@import "../../legacy-light/css/_paths.pcss";
+@import "../../legacy-light/css/_fonts.pcss";
+@import "../../legacy-light/css/_legacy-light.pcss";
+@import "_custom.pcss";
+@import "../../../../res/css/_components.pcss";
diff --git a/res/themes/light-custom/css/light-custom.scss b/res/themes/light-custom/css/light-custom.scss
deleted file mode 100644
index 6e9d0ff736..0000000000
--- a/res/themes/light-custom/css/light-custom.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@import "../../../../res/css/_font-sizes.scss";
-@import "../../legacy-light/css/_paths.scss";
-@import "../../legacy-light/css/_fonts.scss";
-@import "../../legacy-light/css/_legacy-light.scss";
-@import "_custom.scss";
-@import "../../../../res/css/_components.scss";
diff --git a/res/themes/light-high-contrast/css/_light-high-contrast.scss b/res/themes/light-high-contrast/css/_light-high-contrast.pcss
similarity index 97%
rename from res/themes/light-high-contrast/css/_light-high-contrast.scss
rename to res/themes/light-high-contrast/css/_light-high-contrast.pcss
index 33b1239aa0..54b009109c 100644
--- a/res/themes/light-high-contrast/css/_light-high-contrast.scss
+++ b/res/themes/light-high-contrast/css/_light-high-contrast.pcss
@@ -83,8 +83,8 @@ $roomtopic-color: $secondary-content;
 }
 
 .mx_Dialog, .mx_MatrixChat_wrapper {
-    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text]::placeholder,
-    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search]::placeholder,
+    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"]::placeholder,
+    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"]::placeholder,
     .mx_textinput input::placeholder {
         color: $input-darker-fg-color !important;
     }
@@ -150,7 +150,7 @@ $roomtopic-color: $secondary-content;
     #mx_SpotlightDialog_content {
         .mx_SpotlightDialog_recentlyViewed {
             .mx_SpotlightDialog_option {
-                &:hover, &[aria-selected=true] {
+                &:hover, &[aria-selected="true"] {
                     color: $background !important;
 
                     .mx_DecoratedRoomAvatar_icon::before {
@@ -164,7 +164,7 @@ $roomtopic-color: $secondary-content;
         .mx_SpotlightDialog_otherSearches,
         .mx_SpotlightDialog_hiddenResults {
             .mx_SpotlightDialog_option {
-                &:hover, &[aria-selected=true] {
+                &:hover, &[aria-selected="true"] {
                     background-color: $quinary-content !important;
                     color: $background !important;
 
@@ -210,7 +210,7 @@ $roomtopic-color: $secondary-content;
 }
 
 .mx_GenericDropdownMenu_button:hover,
-.mx_GenericDropdownMenu_button[aria-expanded=true] {
+.mx_GenericDropdownMenu_button[aria-expanded="true"] {
     color: $background !important;
 }
 
diff --git a/res/themes/light-high-contrast/css/light-high-contrast.pcss b/res/themes/light-high-contrast/css/light-high-contrast.pcss
new file mode 100644
index 0000000000..1ce88ccd79
--- /dev/null
+++ b/res/themes/light-high-contrast/css/light-high-contrast.pcss
@@ -0,0 +1,8 @@
+@import "../../../../res/css/_font-sizes.pcss";
+@import "../../light/css/_paths.pcss";
+@import "../../light/css/_fonts.pcss";
+@import "../../light/css/_light.pcss";
+@import "_light-high-contrast.pcss";
+@import "../../light/css/_mods.pcss";
+@import "../../../../res/css/_components.pcss";
+@import url("highlight.js/styles/atom-one-light.css");
diff --git a/res/themes/light-high-contrast/css/light-high-contrast.scss b/res/themes/light-high-contrast/css/light-high-contrast.scss
deleted file mode 100644
index fa58913b73..0000000000
--- a/res/themes/light-high-contrast/css/light-high-contrast.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@import "../../../../res/css/_font-sizes.scss";
-@import "../../light/css/_paths.scss";
-@import "../../light/css/_fonts.scss";
-@import "../../light/css/_light.scss";
-@import "_light-high-contrast.scss";
-@import "../../light/css/_mods.scss";
-@import "../../../../res/css/_components.scss";
-@import url("highlight.js/styles/atom-one-light.css");
diff --git a/res/themes/light/css/_fonts.scss b/res/themes/light/css/_fonts.pcss
similarity index 100%
rename from res/themes/light/css/_fonts.scss
rename to res/themes/light/css/_fonts.pcss
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.pcss
similarity index 100%
rename from res/themes/light/css/_light.scss
rename to res/themes/light/css/_light.pcss
diff --git a/res/themes/light/css/_mods.scss b/res/themes/light/css/_mods.pcss
similarity index 100%
rename from res/themes/light/css/_mods.scss
rename to res/themes/light/css/_mods.pcss
diff --git a/res/themes/light/css/_paths.scss b/res/themes/light/css/_paths.pcss
similarity index 60%
rename from res/themes/light/css/_paths.scss
rename to res/themes/light/css/_paths.pcss
index 3944076004..d56a074881 100644
--- a/res/themes/light/css/_paths.scss
+++ b/res/themes/light/css/_paths.pcss
@@ -1,3 +1,3 @@
-// Path from root SCSS file (such as `light.scss`) to `res` dir in the source tree
+// Path from root SCSS file (such as `light.pcss`) to `res` dir in the source tree
 // This value is overridden by external themes in `element-web`.
 $res: ../../..;
diff --git a/res/themes/light/css/light.pcss b/res/themes/light/css/light.pcss
new file mode 100644
index 0000000000..4c661ae5c6
--- /dev/null
+++ b/res/themes/light/css/light.pcss
@@ -0,0 +1,7 @@
+@import "../../../../res/css/_font-sizes.pcss";
+@import "_paths.pcss";
+@import "_fonts.pcss";
+@import "_light.pcss";
+@import "_mods.pcss";
+@import "../../../../res/css/_components.pcss";
+@import url("highlight.js/styles/atom-one-light.css");
diff --git a/res/themes/light/css/light.scss b/res/themes/light/css/light.scss
deleted file mode 100644
index 4e912bc756..0000000000
--- a/res/themes/light/css/light.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@import "../../../../res/css/_font-sizes.scss";
-@import "_paths.scss";
-@import "_fonts.scss";
-@import "_light.scss";
-@import "_mods.scss";
-@import "../../../../res/css/_components.scss";
-@import url("highlight.js/styles/atom-one-light.css");
diff --git a/scripts/make-react-component.js b/scripts/make-react-component.js
index 56616c3350..5fbfecb064 100755
--- a/scripts/make-react-component.js
+++ b/scripts/make-react-component.js
@@ -14,7 +14,7 @@ const path = require('path');
  * creates files:
  * - src/components/toasts/NewToast.tsx
  * - test/components/toasts/NewToast-test.tsx
- * - res/css/components/toasts/_NewToast.scss
+ * - res/css/components/toasts/_NewToast.pcss
  *
  */
 
@@ -115,7 +115,7 @@ const makeReactComponent = async () => {
     const componentFilePath = await makeFile({ filePath, componentName, base: 'src', extension: '.tsx', template: TEMPLATES.COMPONENT });
     await makeFile({ filePath, componentFilePath, componentName, base: 'test', extension: '-test.tsx', template: TEMPLATES.TEST, componentName });
     if (withStyle) {
-        await makeFile({ filePath, componentName, base: 'res/css', prefix: '_', extension: '.scss', template: TEMPLATES.STYLE });
+        await makeFile({ filePath, componentName, base: 'res/css', prefix: '_', extension: '.pcss', template: TEMPLATES.STYLE });
     }
 }
 
diff --git a/yarn.lock b/yarn.lock
index 9a6b37601f..cf119eca8a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -62,7 +62,7 @@
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.18.8.tgz#2483f565faca607b8535590e84e7de323f27764d"
   integrity sha512-HSmX4WZPPK3FUxYp7g2T6EyO8j96HlZJlxmKPSh6KAcqwyDrfx7hKjXpAW/0FhFfTJsR0Yt4lAjLI2coMptIHQ==
 
-"@babel/core@^7.1.0", "@babel/core@^7.12.10", "@babel/core@^7.12.3", "@babel/core@^7.17.9", "@babel/core@^7.7.2", "@babel/core@^7.8.0":
+"@babel/core@^7.1.0", "@babel/core@^7.12.10", "@babel/core@^7.12.3", "@babel/core@^7.7.2", "@babel/core@^7.8.0":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.18.6.tgz#54a107a3c298aee3fe5e1947a6464b9b6faca03d"
   integrity sha512-cQbWBpxcbbs/IUredIPkHiAGULLV8iwgNRMFzvbhEXISp4f3rUUXE5+TIw6KwUWUR3DwyI6gmBRnmAtYaWehwQ==
@@ -1109,6 +1109,11 @@
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
   integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==
 
+"@csstools/selector-specificity@^2.0.1":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz#1bfafe4b7ed0f3e4105837e056e0a89b108ebe36"
+  integrity sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==
+
 "@cypress/request@^2.88.10":
   version "2.88.10"
   resolved "https://registry.yarnpkg.com/@cypress/request/-/request-2.88.10.tgz#b66d76b07f860d3a4b8d7a0604d020c662752cce"
@@ -1889,21 +1894,6 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
-"@stylelint/postcss-css-in-js@^0.37.2":
-  version "0.37.3"
-  resolved "https://registry.yarnpkg.com/@stylelint/postcss-css-in-js/-/postcss-css-in-js-0.37.3.tgz#d149a385e07ae365b0107314c084cb6c11adbf49"
-  integrity sha512-scLk3cSH1H9KggSniseb2KNAU5D9FWc3H7BxCSAIdtU9OWIyw0zkEZ9qEKHryRM+SExYXRKNb7tOOVNAsQ3iwg==
-  dependencies:
-    "@babel/core" "^7.17.9"
-
-"@stylelint/postcss-markdown@^0.36.2":
-  version "0.36.2"
-  resolved "https://registry.yarnpkg.com/@stylelint/postcss-markdown/-/postcss-markdown-0.36.2.tgz#0a540c4692f8dcdfc13c8e352c17e7bfee2bb391"
-  integrity sha512-2kGbqUVJUGE8dM+bMzXG/PYUWKkjLIkRLWNh39OaADkiabDRdw8ATFCgbMz5xdIcvwspPAluSL7uY+ZiTWdWmQ==
-  dependencies:
-    remark "^13.0.0"
-    unist-util-find-all-after "^3.0.2"
-
 "@testing-library/dom@^8.0.0":
   version "8.16.0"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.16.0.tgz#d6fc50250aed17b1035ca1bd64655e342db3936a"
@@ -2109,13 +2099,6 @@
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.182.tgz#05301a4d5e62963227eaafe0ce04dd77c54ea5c2"
   integrity sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==
 
-"@types/mdast@^3.0.0":
-  version "3.0.10"
-  resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.10.tgz#4724244a82a4598884cbbe9bcfd73dff927ee8af"
-  integrity sha512-W864tg/Osz1+9f4lrGTZpCSO5/z4608eUp19tbozkq2HJK6i3z1kT0H9tlADXuYIb1YYOBByU4Jsqkk75q48qA==
-  dependencies:
-    "@types/unist" "*"
-
 "@types/minimist@^1.2.0":
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.2.tgz#ee771e2ba4b3dc5b372935d549fd9617bf345b8c"
@@ -2259,11 +2242,6 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
   integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==
 
-"@types/unist@*", "@types/unist@^2.0.0", "@types/unist@^2.0.2":
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d"
-  integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==
-
 "@types/yargs-parser@*":
   version "21.0.0"
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-21.0.0.tgz#0c60e537fa790f5f9472ed2776c2b71ec117351b"
@@ -2716,19 +2694,6 @@ atob@^2.1.2:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
-autoprefixer@^9.8.6:
-  version "9.8.8"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.8.tgz#fd4bd4595385fa6f06599de749a4d5f7a474957a"
-  integrity sha512-eM9d/swFopRt5gdJ7jrpCwgvEMIayITpojhkkSMRsFHYuH5bkSQ4p/9qTEHtmNudUZh22Tehu7I6CxAW0IXTKA==
-  dependencies:
-    browserslist "^4.12.0"
-    caniuse-lite "^1.0.30001109"
-    normalize-range "^0.1.2"
-    num2fraction "^1.2.2"
-    picocolors "^0.2.1"
-    postcss "^7.0.32"
-    postcss-value-parser "^4.1.0"
-
 await-lock@^2.1.0:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/await-lock/-/await-lock-2.2.2.tgz#a95a9b269bfd2f69d22b17a321686f551152bcef"
@@ -2878,11 +2843,6 @@ babel-preset-jest@^27.5.1:
     babel-plugin-jest-hoist "^27.5.1"
     babel-preset-current-node-syntax "^1.0.0"
 
-bail@^1.0.0:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.5.tgz#b6fa133404a392cbc1f8c4bf63f5953351e7a776"
-  integrity sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ==
-
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -3004,7 +2964,7 @@ browser-request@^0.3.3:
   resolved "https://registry.yarnpkg.com/browser-request/-/browser-request-0.3.3.tgz#9ece5b5aca89a29932242e18bf933def9876cc17"
   integrity sha512-YyNI4qJJ+piQG6MMEuo7J3Bzaqssufx04zpEKYfSrl/1Op59HWali9zMtBpXnkmqMcOuWJPZvudrm9wISmnCbg==
 
-browserslist@^4.12.0, browserslist@^4.20.2, browserslist@^4.21.1:
+browserslist@^4.20.2, browserslist@^4.21.1:
   version "4.21.1"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.1.tgz#c9b9b0a54c7607e8dc3e01a0d311727188011a00"
   integrity sha512-Nq8MFCSrnJXSc88yliwlzQe3qNe3VntIjhsArW9IJOEPSHNx23FalwApUVbzAWABLhYJJ7y8AynWI/XM8OdfjQ==
@@ -3116,7 +3076,7 @@ camelcase@^6.2.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
-caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001359:
+caniuse-lite@^1.0.30001359:
   version "1.0.30001366"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001366.tgz#c73352c83830a9eaf2dea0ff71fb4b9a4bbaa89c"
   integrity sha512-yy7XLWCubDobokgzudpkKux8e0UOOnLHE6mlNJBzT3lZJz6s5atSEzjoL+fsCPkI0G8MP5uVdDx1ur/fXEWkZA==
@@ -3142,7 +3102,7 @@ chalk@^2.0.0:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.1:
+chalk@^4.0.0, chalk@^4.1.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
   integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
@@ -3155,21 +3115,6 @@ char-regex@^1.0.2:
   resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
   integrity sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==
 
-character-entities-legacy@^1.0.0:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz#94bc1845dce70a5bb9d2ecc748725661293d8fc1"
-  integrity sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==
-
-character-entities@^1.0.0:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-1.2.4.tgz#e12c3939b7eaf4e5b15e7ad4c5e28e1d48c5b16b"
-  integrity sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==
-
-character-reference-invalid@^1.0.0:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560"
-  integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==
-
 check-more-types@^2.24.0:
   version "2.24.0"
   resolved "https://registry.yarnpkg.com/check-more-types/-/check-more-types-2.24.0.tgz#1420ffb10fd444dcfc79b43891bbfffd32a84600"
@@ -3361,6 +3306,11 @@ color-name@^1.1.4, color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
+colord@^2.9.2:
+  version "2.9.2"
+  resolved "https://registry.yarnpkg.com/colord/-/colord-2.9.2.tgz#25e2bacbbaa65991422c07ea209e2089428effb1"
+  integrity sha512-Uqbg+J445nc1TKn4FoDPS6ZZqAvEDnwrH42yo8B40JSOgSLxMZ/gt3h4nmCtPLQeXhjJJkqBx7SCY35WnIixaQ==
+
 colorette@^2.0.16:
   version "2.0.19"
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.19.tgz#cdf044f47ad41a0f4b56b3a0d5b4e6e1a2d5a798"
@@ -3470,7 +3420,7 @@ core-util-is@~1.0.0:
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
   integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
 
-cosmiconfig@^7.0.0:
+cosmiconfig@^7.0.0, cosmiconfig@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.0.1.tgz#714d756522cace867867ccb4474c5d01bbae5d6d"
   integrity sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==
@@ -3531,6 +3481,11 @@ css-box-model@^1.2.0:
   dependencies:
     tiny-invariant "^1.0.6"
 
+css-functions-list@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/css-functions-list/-/css-functions-list-3.1.0.tgz#cf5b09f835ad91a00e5959bcfc627cd498e1321b"
+  integrity sha512-/9lCvYZaUbBGvYUgYGFJ4dcYiyqdhSjG7IPVluoV8A1ILjkF7ilmhp1OGUz8n+nmBcu0RNrQAzgD8B6FJbrt2w==
+
 css-select@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/css-select/-/css-select-5.1.0.tgz#b8ebd6554c3637ccc76688804ad3f6a6fdaea8a6"
@@ -3676,7 +3631,7 @@ dayjs@^1.10.4:
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.3.tgz#4754eb694a624057b9ad2224b67b15d552589258"
   integrity sha512-xxwlswWOlGhzgQ4TKzASQkUhqERI3egRNqgV4ScR8wlANA/A9tZ7miXa44vTTKEq5l7vWoL5G57bG3zA+Kow0A==
 
-debug@4, debug@^4.0.0, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
+debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -3854,14 +3809,6 @@ dom-helpers@^5.0.1:
     "@babel/runtime" "^7.8.7"
     csstype "^3.0.2"
 
-dom-serializer@0:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
-  integrity sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==
-  dependencies:
-    domelementtype "^2.0.1"
-    entities "^2.0.0"
-
 dom-serializer@^1.0.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.4.1.tgz#de5d41b1aea290215dc45a6dae8adcf1d32e2d30"
@@ -3880,11 +3827,6 @@ dom-serializer@^2.0.0:
     domhandler "^5.0.2"
     entities "^4.2.0"
 
-domelementtype@1, domelementtype@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
-  integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
-
 domelementtype@^2.0.1, domelementtype@^2.2.0, domelementtype@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
@@ -3897,13 +3839,6 @@ domexception@^2.0.1:
   dependencies:
     webidl-conversions "^5.0.0"
 
-domhandler@^2.3.0:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.2.tgz#8805097e933d65e85546f726d60f5eb88b44f803"
-  integrity sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==
-  dependencies:
-    domelementtype "1"
-
 domhandler@^4.0.0, domhandler@^4.2.0:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.1.tgz#8d792033416f59d68bc03a5aa7b018c1ca89279c"
@@ -3918,14 +3853,6 @@ domhandler@^5.0.1, domhandler@^5.0.2, domhandler@^5.0.3:
   dependencies:
     domelementtype "^2.3.0"
 
-domutils@^1.5.1:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"
-  integrity sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==
-  dependencies:
-    dom-serializer "0"
-    domelementtype "1"
-
 domutils@^2.5.2:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
@@ -4023,11 +3950,6 @@ enquirer@^2.3.6:
   dependencies:
     ansi-colors "^4.1.1"
 
-entities@^1.1.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"
-  integrity sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==
-
 entities@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
@@ -4622,7 +4544,7 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-glob@^3.2.11, fast-glob@^3.2.5, fast-glob@^3.2.9:
+fast-glob@^3.2.11, fast-glob@^3.2.9:
   version "3.2.11"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
   integrity sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==
@@ -5064,7 +4986,7 @@ globals@^13.15.0, globals@^13.6.0:
   dependencies:
     type-fest "^0.20.2"
 
-globby@^11.0.3, globby@^11.1.0:
+globby@^11.1.0:
   version "11.1.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
   integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
@@ -5081,13 +5003,6 @@ globjoin@^0.1.4:
   resolved "https://registry.yarnpkg.com/globjoin/-/globjoin-0.1.4.tgz#2f4494ac8919e3767c5cbb691e9f463324285d43"
   integrity sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==
 
-gonzales-pe@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/gonzales-pe/-/gonzales-pe-4.3.0.tgz#fe9dec5f3c557eead09ff868c65826be54d067b3"
-  integrity sha512-otgSPpUmdWJ43VXyiNgEYE4luzHCL2pz4wQ0OnDluC6Eg4Ko3Vexy/SrSynglw/eR+OhkzmqFCZa/OFa/RgAOQ==
-  dependencies:
-    minimist "^1.2.5"
-
 graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4, graceful-fs@^4.2.9:
   version "4.2.10"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
@@ -5237,23 +5152,11 @@ html-escaper@^2.0.0:
   resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
   integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
 
-html-tags@^3.1.0:
+html-tags@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.2.0.tgz#dbb3518d20b726524e4dd43de397eb0a95726961"
   integrity sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==
 
-htmlparser2@^3.10.0:
-  version "3.10.1"
-  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"
-  integrity sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==
-  dependencies:
-    domelementtype "^1.3.1"
-    domhandler "^2.3.0"
-    domutils "^1.5.1"
-    entities "^1.1.1"
-    inherits "^2.0.1"
-    readable-stream "^3.1.1"
-
 htmlparser2@^6.0.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7"
@@ -5338,7 +5241,7 @@ ieee754@^1.1.12, ieee754@^1.1.13:
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
-ignore@^5.1.8, ignore@^5.2.0:
+ignore@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
   integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
@@ -5404,7 +5307,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.3:
+inherits@2, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -5447,19 +5350,6 @@ is-accessor-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-alphabetical@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-1.0.4.tgz#9e7d6b94916be22153745d184c298cbf986a686d"
-  integrity sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==
-
-is-alphanumerical@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz#7eb9a2431f855f6b1ef1a78e326df515696c4dbf"
-  integrity sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==
-  dependencies:
-    is-alphabetical "^1.0.0"
-    is-decimal "^1.0.0"
-
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
@@ -5492,11 +5382,6 @@ is-buffer@^1.1.5:
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
   integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
 
-is-buffer@^2.0.0:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.5.tgz#ebc252e400d22ff8d77fa09888821a24a658c191"
-  integrity sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==
-
 is-callable@^1.1.4, is-callable@^1.1.5, is-callable@^1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.4.tgz#47301d58dd0259407865547853df6d61fe471945"
@@ -5544,11 +5429,6 @@ is-date-object@^1.0.1:
   dependencies:
     has-tostringtag "^1.0.0"
 
-is-decimal@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-1.0.4.tgz#65a3a5958a1c5b63a706e1b333d7cd9f630d3fa5"
-  integrity sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==
-
 is-descriptor@^0.1.0:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-0.1.6.tgz#366d8240dde487ca51823b1ab9f07a10a78251ca"
@@ -5606,11 +5486,6 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
-is-hexadecimal@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7"
-  integrity sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==
-
 is-installed-globally@~0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.4.0.tgz#9a0fd407949c30f86eb6959ef1b7994ed0b7b520"
@@ -5660,11 +5535,6 @@ is-plain-obj@^1.1.0:
   resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
   integrity sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==
 
-is-plain-obj@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-2.1.0.tgz#45e42e37fccf1f40da8e5f76ee21515840c09287"
-  integrity sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==
-
 is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
@@ -6593,10 +6463,10 @@ kleur@^3.0.3:
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
   integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
 
-known-css-properties@^0.21.0:
-  version "0.21.0"
-  resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.21.0.tgz#15fbd0bbb83447f3ce09d8af247ed47c68ede80d"
-  integrity sha512-sZLUnTqimCkvkgRS+kbPlYW5o8q5w1cu+uIisKpEWkj31I8mx8kNG162DwRav8Zirkva6N5uoFsm9kzK4mUXjw==
+known-css-properties@^0.25.0:
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.25.0.tgz#6ebc4d4b412f602e5cfbeb4086bd544e34c0a776"
+  integrity sha512-b0/9J1O9Jcyik1GC6KC42hJ41jKwdO/Mq8Mdo5sYN+IuRTXs2YFHZC3kZSx6ueusqa95x3wLYe/ytKjbAfGixA==
 
 language-subtag-registry@~0.3.2:
   version "0.3.22"
@@ -6744,12 +6614,12 @@ lodash.truncate@^4.4.2:
   resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
   integrity sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==
 
-lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
+lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-log-symbols@^4.0.0, log-symbols@^4.1.0:
+log-symbols@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-4.1.0.tgz#3fbdbb95b4683ac9fc785111e792e558d4abd503"
   integrity sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==
@@ -6772,11 +6642,6 @@ loglevel@^1.7.1:
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.8.0.tgz#e7ec73a57e1e7b419cb6c6ac06bf050b67356114"
   integrity sha512-G6A/nJLRgWOuuwdNuA6koovfEV1YpqqAG4pRUlFaz3jj2QNZ8M4vBqnVA+HBTmU/AMNUtlOsMmSpF6NyOjztbA==
 
-longest-streak@^2.0.0:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-2.0.4.tgz#b8599957da5b5dab64dee3fe316fa774597d90e4"
-  integrity sha512-vM6rUVCVUJJt33bnmHiZEvr7wPT78ztX7rojL+LW51bHtLh6HTjx84LA5W4+oa6aKEJA7jJu5LR6vQRBpA5DVg==
-
 loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
@@ -6898,11 +6763,11 @@ matrix-events-sdk@^0.0.1-beta.7:
     "@babel/runtime" "^7.12.5"
     another-json "^0.2.0"
     browser-request "^0.3.3"
-    bs58 "^5.0.0"
+    bs58 "^4.0.1"
     content-type "^1.0.4"
     loglevel "^1.7.1"
     matrix-events-sdk "^0.0.1-beta.7"
-    p-retry "4"
+    p-retry "^4.5.0"
     qs "^6.9.6"
     request "^2.88.2"
     unhomoglyph "^1.0.6"
@@ -6936,34 +6801,6 @@ matrix-widget-api@^0.1.0-beta.18:
     "@types/events" "^3.0.0"
     events "^3.2.0"
 
-mdast-util-from-markdown@^0.8.0:
-  version "0.8.5"
-  resolved "https://registry.yarnpkg.com/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.5.tgz#d1ef2ca42bc377ecb0463a987910dae89bd9a28c"
-  integrity sha512-2hkTXtYYnr+NubD/g6KGBS/0mFmBcifAsI0yIWRiRo0PjVs6SSOSOdtzbp6kSGnShDN6G5aWZpKQ2lWRy27mWQ==
-  dependencies:
-    "@types/mdast" "^3.0.0"
-    mdast-util-to-string "^2.0.0"
-    micromark "~2.11.0"
-    parse-entities "^2.0.0"
-    unist-util-stringify-position "^2.0.0"
-
-mdast-util-to-markdown@^0.6.0:
-  version "0.6.5"
-  resolved "https://registry.yarnpkg.com/mdast-util-to-markdown/-/mdast-util-to-markdown-0.6.5.tgz#b33f67ca820d69e6cc527a93d4039249b504bebe"
-  integrity sha512-XeV9sDE7ZlOQvs45C9UKMtfTcctcaj/pGwH8YLbMHoMOXNNCn2LsqVQOqrF1+/NU8lKDAqozme9SCXWyo9oAcQ==
-  dependencies:
-    "@types/unist" "^2.0.0"
-    longest-streak "^2.0.0"
-    mdast-util-to-string "^2.0.0"
-    parse-entities "^2.0.0"
-    repeat-string "^1.0.0"
-    zwitch "^1.0.0"
-
-mdast-util-to-string@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-2.0.0.tgz#b8cfe6a713e1091cb5b728fc48885a4767f8b97b"
-  integrity sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w==
-
 mdurl@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
@@ -7016,14 +6853,6 @@ merge2@^1.3.0, merge2@^1.4.1:
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
-micromark@~2.11.0:
-  version "2.11.4"
-  resolved "https://registry.yarnpkg.com/micromark/-/micromark-2.11.4.tgz#d13436138eea826383e822449c9a5c50ee44665a"
-  integrity sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==
-  dependencies:
-    debug "^4.0.0"
-    parse-entities "^2.0.0"
-
 micromatch@^3.1.4:
   version "3.1.10"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
@@ -7043,7 +6872,7 @@ micromatch@^3.1.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.2"
 
-micromatch@^4.0.2, micromatch@^4.0.4:
+micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
   integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
@@ -7238,16 +7067,6 @@ normalize-path@^3.0.0, normalize-path@~3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
-normalize-range@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
-  integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==
-
-normalize-selector@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/normalize-selector/-/normalize-selector-0.2.0.tgz#d0b145eb691189c63a78d201dc4fdb1293ef0c03"
-  integrity sha512-dxvWdI8gw6eAvk9BlPffgEoGfM7AdijoCwOEJge3e3ulT2XLgmU7KvvxprOaCu05Q1uGRHmOhHe1r6emZoKyFw==
-
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@@ -7269,11 +7088,6 @@ nth-check@^2.0.1:
   dependencies:
     boolbase "^1.0.0"
 
-num2fraction@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
-  integrity sha512-Y1wZESM7VUThYY+4W+X4ySH2maqcA+p7UR+w8VWNWVAd6lwuXXWz/w/Cz43J/dI2I+PS6wD5N+bJUF+gjWvIqg==
-
 nwsapi@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.1.tgz#10a9f268fbf4c461249ebcfe38e359aa36e2577c"
@@ -7505,18 +7319,6 @@ parent-module@^1.0.0:
   dependencies:
     callsites "^3.0.0"
 
-parse-entities@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-2.0.0.tgz#53c6eb5b9314a1f4ec99fa0fdf7ce01ecda0cbe8"
-  integrity sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==
-  dependencies:
-    character-entities "^1.0.0"
-    character-entities-legacy "^1.0.0"
-    character-reference-invalid "^1.0.0"
-    is-alphanumerical "^1.0.0"
-    is-decimal "^1.0.0"
-    is-hexadecimal "^1.0.0"
-
 parse-json@^5.0.0, parse-json@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
@@ -7615,11 +7417,6 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==
 
-picocolors@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-0.2.1.tgz#570670f793646851d1ba135996962abad587859f"
-  integrity sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==
-
 picocolors@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
@@ -7681,20 +7478,6 @@ posix-character-classes@^0.1.0:
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
   integrity sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg==
 
-postcss-html@^0.36.0:
-  version "0.36.0"
-  resolved "https://registry.yarnpkg.com/postcss-html/-/postcss-html-0.36.0.tgz#b40913f94eaacc2453fd30a1327ad6ee1f88b204"
-  integrity sha512-HeiOxGcuwID0AFsNAL0ox3mW6MHH5cstWN1Z3Y+n6H+g12ih7LHdYxWwEA/QmrebctLjo79xz9ouK3MroHwOJw==
-  dependencies:
-    htmlparser2 "^3.10.0"
-
-postcss-less@^3.1.4:
-  version "3.1.4"
-  resolved "https://registry.yarnpkg.com/postcss-less/-/postcss-less-3.1.4.tgz#369f58642b5928ef898ffbc1a6e93c958304c5ad"
-  integrity sha512-7TvleQWNM2QLcHqvudt3VYjULVB49uiW6XzEUFmvwHzvsOEF5MwBrIXZDJQvJNFGjJQTzSzZnDoCJ8h/ljyGXA==
-  dependencies:
-    postcss "^7.0.14"
-
 postcss-media-query-parser@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz#27b39c6f4d94f81b1a73b8f76351c609e5cef244"
@@ -7705,29 +7488,17 @@ postcss-resolve-nested-selector@^0.1.1:
   resolved "https://registry.yarnpkg.com/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz#29ccbc7c37dedfac304e9fff0bf1596b3f6a0e4e"
   integrity sha512-HvExULSwLqHLgUy1rl3ANIqCsvMS0WHss2UOsXhXnQaZ9VCc2oBvIpXrl00IUFT5ZDITME0o6oiXeiHr2SAIfw==
 
-postcss-safe-parser@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-4.0.2.tgz#a6d4e48f0f37d9f7c11b2a581bf00f8ba4870b96"
-  integrity sha512-Uw6ekxSWNLCPesSv/cmqf2bY/77z11O7jZGPax3ycZMFU/oi2DMH9i89AdHc1tRwFg/arFoEwX0IS3LCUxJh1g==
-  dependencies:
-    postcss "^7.0.26"
+postcss-safe-parser@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz#bb4c29894171a94bc5c996b9a30317ef402adaa1"
+  integrity sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==
 
-postcss-sass@^0.4.4:
-  version "0.4.4"
-  resolved "https://registry.yarnpkg.com/postcss-sass/-/postcss-sass-0.4.4.tgz#91f0f3447b45ce373227a98b61f8d8f0785285a3"
-  integrity sha512-BYxnVYx4mQooOhr+zer0qWbSPYnarAy8ZT7hAQtbxtgVf8gy+LSLT/hHGe35h14/pZDTw1DsxdbrwxBN++H+fg==
-  dependencies:
-    gonzales-pe "^4.3.0"
-    postcss "^7.0.21"
+postcss-scss@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-4.0.4.tgz#aa8f60e19ee18259bc193db9e4b96edfce3f3b1f"
+  integrity sha512-aBBbVyzA8b3hUL0MGrpydxxXKXFZc5Eqva0Q3V9qsBOLEMsjb6w49WfpsoWzpEgcqJGW4t7Rio8WXVU9Gd8vWg==
 
-postcss-scss@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-2.1.1.tgz#ec3a75fa29a55e016b90bf3269026c53c1d2b383"
-  integrity sha512-jQmGnj0hSGLd9RscFw9LyuSVAa5Bl1/KBPqG1NQw9w8ND55nY4ZEsdlVuYJvLPpV+y0nwTV5v/4rHPzZRihQbA==
-  dependencies:
-    postcss "^7.0.6"
-
-postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.5:
+postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.6:
   version "6.0.10"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
   integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
@@ -7735,25 +7506,12 @@ postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.5:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
-postcss-syntax@^0.36.2:
-  version "0.36.2"
-  resolved "https://registry.yarnpkg.com/postcss-syntax/-/postcss-syntax-0.36.2.tgz#f08578c7d95834574e5593a82dfbfa8afae3b51c"
-  integrity sha512-nBRg/i7E3SOHWxF3PpF5WnJM/jQ1YpY9000OaVXlAQj6Zp/kIqJxEDWIZ67tAd7NLuk7zqN4yqe9nc0oNAOs1w==
-
-postcss-value-parser@^4.1.0:
+postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^7.0.14, postcss@^7.0.2, postcss@^7.0.21, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.35, postcss@^7.0.6:
-  version "7.0.39"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309"
-  integrity sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==
-  dependencies:
-    picocolors "^0.2.1"
-    source-map "^0.6.1"
-
-postcss@^8.3.11:
+postcss@^8.3.11, postcss@^8.4.14:
   version "8.4.14"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf"
   integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==
@@ -8115,15 +7873,6 @@ read-pkg@^5.2.0:
     parse-json "^5.0.0"
     type-fest "^0.6.0"
 
-readable-stream@^3.1.1:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
-  integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
-  dependencies:
-    inherits "^2.0.3"
-    string_decoder "^1.1.1"
-    util-deprecate "^1.0.1"
-
 readable-stream@~2.3.6:
   version "2.3.7"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
@@ -8229,29 +7978,6 @@ regjsparser@^0.8.2:
   dependencies:
     jsesc "~0.5.0"
 
-remark-parse@^9.0.0:
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-9.0.0.tgz#4d20a299665880e4f4af5d90b7c7b8a935853640"
-  integrity sha512-geKatMwSzEXKHuzBNU1z676sGcDcFoChMK38TgdHJNAYfFtsfHDQG7MoJAjs6sgYMqyLduCYWDIWZIxiPeafEw==
-  dependencies:
-    mdast-util-from-markdown "^0.8.0"
-
-remark-stringify@^9.0.0:
-  version "9.0.1"
-  resolved "https://registry.yarnpkg.com/remark-stringify/-/remark-stringify-9.0.1.tgz#576d06e910548b0a7191a71f27b33f1218862894"
-  integrity sha512-mWmNg3ZtESvZS8fv5PTvaPckdL4iNlCHTt8/e/8oN08nArHRHjNZMKzA/YW3+p7/lYqIw4nx1XsjCBo/AxNChg==
-  dependencies:
-    mdast-util-to-markdown "^0.6.0"
-
-remark@^13.0.0:
-  version "13.0.0"
-  resolved "https://registry.yarnpkg.com/remark/-/remark-13.0.0.tgz#d15d9bf71a402f40287ebe36067b66d54868e425"
-  integrity sha512-HDz1+IKGtOyWN+QgBiAT0kn+2s6ovOxHyPAFGKVE81VSzJ+mq7RwHFledEvB5F1p4iJvOah/LOKdFuzvRnNLCA==
-  dependencies:
-    remark-parse "^9.0.0"
-    remark-stringify "^9.0.0"
-    unified "^9.1.0"
-
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
@@ -8262,7 +7988,7 @@ repeat-element@^1.1.2:
   resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.4.tgz#be681520847ab58c7568ac75fbfad28ed42d39e9"
   integrity sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ==
 
-repeat-string@^1.0.0, repeat-string@^1.6.1:
+repeat-string@^1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
   integrity sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==
@@ -8444,7 +8170,7 @@ rxjs@^7.5.1:
   dependencies:
     tslib "^2.1.0"
 
-safe-buffer@5.2.1, safe-buffer@^5.0.1, safe-buffer@^5.1.2, safe-buffer@~5.2.0:
+safe-buffer@5.2.1, safe-buffer@^5.0.1, safe-buffer@^5.1.2:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
@@ -8599,7 +8325,7 @@ side-channel@^1.0.4:
     get-intrinsic "^1.0.2"
     object-inspect "^1.9.0"
 
-signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3:
+signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3, signal-exit@^3.0.7:
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
   integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
@@ -8737,11 +8463,6 @@ spdx-license-ids@^3.0.0:
   resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.11.tgz#50c0d8c40a14ec1bf449bae69a0ea4685a9d9f95"
   integrity sha512-Ctl2BrFiM0X3MANYgj3CkygxhRmr9mi6xhejbdO960nF6EDJApTYpn0BQnDKlnNBULKiCN1n3w9EBkHK8ZWg+g==
 
-specificity@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/specificity/-/specificity-0.4.1.tgz#aab5e645012db08ba182e151165738d00887b019"
-  integrity sha512-1klA3Gi5PD1Wv9Q0wUoOQN1IWAuPu0D1U03ThXTr0cJ20+/iq2tHSDnK7Kk/0LXJ1ztUB2/1Os0wKmfyNgUQfg==
-
 split-string@^3.0.1, split-string@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
@@ -8806,7 +8527,7 @@ string-width@^3.0.0, string-width@^3.1.0:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^5.1.0"
 
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -8861,13 +8582,6 @@ string.prototype.trimstart@^1.0.5:
     define-properties "^1.1.4"
     es-abstract "^1.19.5"
 
-string_decoder@^1.1.1:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
-  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
-  dependencies:
-    safe-buffer "~5.2.0"
-
 string_decoder@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
@@ -8926,89 +8640,74 @@ style-search@^0.1.0:
   resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"
   integrity sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==
 
-stylelint-config-recommended@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-3.0.0.tgz#e0e547434016c5539fe2650afd58049a2fd1d657"
-  integrity sha512-F6yTRuc06xr1h5Qw/ykb2LuFynJ2IxkKfCMf+1xqPffkxh0S09Zc902XCffcsw/XMFq/OzQ1w54fLIDtmRNHnQ==
+stylelint-config-recommended@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-8.0.0.tgz#7736be9984246177f017c39ec7b1cd0f19ae9117"
+  integrity sha512-IK6dWvE000+xBv9jbnHOnBq01gt6HGVB2ZTsot+QsMpe82doDQ9hvplxfv4YnpEuUwVGGd9y6nbaAnhrjcxhZQ==
 
-stylelint-config-standard@^20.0.0:
-  version "20.0.0"
-  resolved "https://registry.yarnpkg.com/stylelint-config-standard/-/stylelint-config-standard-20.0.0.tgz#06135090c9e064befee3d594289f50e295b5e20d"
-  integrity sha512-IB2iFdzOTA/zS4jSVav6z+wGtin08qfj+YyExHB3LF9lnouQht//YyB0KZq9gGz5HNPkddHOzcY8HsUey6ZUlA==
+stylelint-config-standard@^26.0.0:
+  version "26.0.0"
+  resolved "https://registry.yarnpkg.com/stylelint-config-standard/-/stylelint-config-standard-26.0.0.tgz#4701b8d582d34120eec7d260ba779e4c2d953635"
+  integrity sha512-hUuB7LaaqM8abvkOO84wh5oYSkpXgTzHu2Zza6e7mY+aOmpNTjoFBRxSLlzY0uAOMWEFx0OMKzr+reG1BUtcqQ==
   dependencies:
-    stylelint-config-recommended "^3.0.0"
+    stylelint-config-recommended "^8.0.0"
 
-stylelint-scss@^3.18.0:
-  version "3.21.0"
-  resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-3.21.0.tgz#9f50898691b16b1c1ca3945837381d98c5b22331"
-  integrity sha512-CMI2wSHL+XVlNExpauy/+DbUcB/oUZLARDtMIXkpV/5yd8nthzylYd1cdHeDMJVBXeYHldsnebUX6MoV5zPW4A==
+stylelint-scss@^4.2.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-4.3.0.tgz#638800faf823db11fff60d537c81051fe74c90fa"
+  integrity sha512-GvSaKCA3tipzZHoz+nNO7S02ZqOsdBzMiCx9poSmLlb3tdJlGddEX/8QzCOD8O7GQan9bjsvLMsO5xiw6IhhIQ==
   dependencies:
-    lodash "^4.17.15"
+    lodash "^4.17.21"
     postcss-media-query-parser "^0.2.3"
     postcss-resolve-nested-selector "^0.1.1"
-    postcss-selector-parser "^6.0.2"
+    postcss-selector-parser "^6.0.6"
     postcss-value-parser "^4.1.0"
 
-stylelint@^13.9.0:
-  version "13.13.1"
-  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-13.13.1.tgz#fca9c9f5de7990ab26a00f167b8978f083a18f3c"
-  integrity sha512-Mv+BQr5XTUrKqAXmpqm6Ddli6Ief+AiPZkRsIrAoUKFuq/ElkUh9ZMYxXD0iQNZ5ADghZKLOWz1h7hTClB7zgQ==
+stylelint@^14.9.1:
+  version "14.9.1"
+  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-14.9.1.tgz#6494ed38f148b1e75b402d678a3b6a8aae86dfda"
+  integrity sha512-RdAkJdPiLqHawCSnu21nE27MjNXaVd4WcOHA4vK5GtIGjScfhNnaOuWR2wWdfKFAvcWQPOYe311iveiVKSmwsA==
   dependencies:
-    "@stylelint/postcss-css-in-js" "^0.37.2"
-    "@stylelint/postcss-markdown" "^0.36.2"
-    autoprefixer "^9.8.6"
+    "@csstools/selector-specificity" "^2.0.1"
     balanced-match "^2.0.0"
-    chalk "^4.1.1"
-    cosmiconfig "^7.0.0"
-    debug "^4.3.1"
+    colord "^2.9.2"
+    cosmiconfig "^7.0.1"
+    css-functions-list "^3.1.0"
+    debug "^4.3.4"
     execall "^2.0.0"
-    fast-glob "^3.2.5"
+    fast-glob "^3.2.11"
     fastest-levenshtein "^1.0.12"
     file-entry-cache "^6.0.1"
     get-stdin "^8.0.0"
     global-modules "^2.0.0"
-    globby "^11.0.3"
+    globby "^11.1.0"
     globjoin "^0.1.4"
-    html-tags "^3.1.0"
-    ignore "^5.1.8"
+    html-tags "^3.2.0"
+    ignore "^5.2.0"
     import-lazy "^4.0.0"
     imurmurhash "^0.1.4"
-    known-css-properties "^0.21.0"
-    lodash "^4.17.21"
-    log-symbols "^4.1.0"
+    is-plain-object "^5.0.0"
+    known-css-properties "^0.25.0"
     mathml-tag-names "^2.1.3"
     meow "^9.0.0"
-    micromatch "^4.0.4"
-    normalize-selector "^0.2.0"
-    postcss "^7.0.35"
-    postcss-html "^0.36.0"
-    postcss-less "^3.1.4"
+    micromatch "^4.0.5"
+    normalize-path "^3.0.0"
+    picocolors "^1.0.0"
+    postcss "^8.4.14"
     postcss-media-query-parser "^0.2.3"
     postcss-resolve-nested-selector "^0.1.1"
-    postcss-safe-parser "^4.0.2"
-    postcss-sass "^0.4.4"
-    postcss-scss "^2.1.1"
-    postcss-selector-parser "^6.0.5"
-    postcss-syntax "^0.36.2"
-    postcss-value-parser "^4.1.0"
+    postcss-safe-parser "^6.0.0"
+    postcss-selector-parser "^6.0.10"
+    postcss-value-parser "^4.2.0"
     resolve-from "^5.0.0"
-    slash "^3.0.0"
-    specificity "^0.4.1"
-    string-width "^4.2.2"
-    strip-ansi "^6.0.0"
+    string-width "^4.2.3"
+    strip-ansi "^6.0.1"
     style-search "^0.1.0"
-    sugarss "^2.0.0"
+    supports-hyperlinks "^2.2.0"
     svg-tags "^1.0.0"
-    table "^6.6.0"
+    table "^6.8.0"
     v8-compile-cache "^2.3.0"
-    write-file-atomic "^3.0.3"
-
-sugarss@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/sugarss/-/sugarss-2.0.0.tgz#ddd76e0124b297d40bf3cca31c8b22ecb43bc61d"
-  integrity sha512-WfxjozUk0UVA4jm+U1d736AUpzSrNsQcIbyOkoE364GrtWmIrFdk5lksEupgWMD4VaT/0kVx1dobpiDumSgmJQ==
-  dependencies:
-    postcss "^7.0.2"
+    write-file-atomic "^4.0.1"
 
 supercluster@^7.1.0:
   version "7.1.5"
@@ -9038,7 +8737,7 @@ supports-color@^8.0.0, supports-color@^8.1.1:
   dependencies:
     has-flag "^4.0.0"
 
-supports-hyperlinks@^2.0.0:
+supports-hyperlinks@^2.0.0, supports-hyperlinks@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-2.2.0.tgz#4f77b42488765891774b70c79babd87f9bd594bb"
   integrity sha512-6sXEzV5+I5j8Bmq9/vUphGRM/RJNT9SCURJLjwfOg51heRtguGWDzcaBlgAzKhQa0EVNpPEKzQuBwZ8S8WaCeQ==
@@ -9061,7 +8760,7 @@ symbol-tree@^3.2.4:
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
-table@^6.6.0:
+table@^6.8.0:
   version "6.8.0"
   resolved "https://registry.yarnpkg.com/table/-/table-6.8.0.tgz#87e28f14fa4321c3377ba286f07b79b281a3b3ca"
   integrity sha512-s/fitrbVeEyHKFa7mFdkuQMWlH1Wgw/yEXMt5xACT4ZpzWFluehAxRtUUQKPuWhaLAWhFcVx6w3oC8VKaUfPGA==
@@ -9215,11 +8914,6 @@ trim-newlines@^3.0.0:
   resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-3.0.1.tgz#260a5d962d8b752425b32f3a7db0dcacd176c144"
   integrity sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==
 
-trough@^1.0.0:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.5.tgz#b8b639cefad7d0bb2abd37d433ff8293efa5f406"
-  integrity sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==
-
 tsconfig-paths@^3.14.1:
   version "3.14.1"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz#ba0734599e8ea36c862798e920bcf163277b137a"
@@ -9373,18 +9067,6 @@ unicode-property-aliases-ecmascript@^2.0.0:
   resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.0.0.tgz#0a36cb9a585c4f6abd51ad1deddb285c165297c8"
   integrity sha512-5Zfuy9q/DFr4tfO7ZPeVXb1aPoeQSdeFMLpYuFebehDAhbuevLs5yxSZmIFN1tP5F9Wl4IpJrYojg85/zgyZHQ==
 
-unified@^9.1.0:
-  version "9.2.2"
-  resolved "https://registry.yarnpkg.com/unified/-/unified-9.2.2.tgz#67649a1abfc3ab85d2969502902775eb03146975"
-  integrity sha512-Sg7j110mtefBD+qunSLO1lqOEKdrwBFBrR6Qd8f4uwkhWNlbkaqwHse6e7QvD3AP/MNoJdEDLaf8OxYyoWgorQ==
-  dependencies:
-    bail "^1.0.0"
-    extend "^3.0.0"
-    is-buffer "^2.0.0"
-    is-plain-obj "^2.0.0"
-    trough "^1.0.0"
-    vfile "^4.0.0"
-
 union-value@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.1.tgz#0b6fe7b835aecda61c6ea4d4f02c14221e109847"
@@ -9395,25 +9077,6 @@ union-value@^1.0.0:
     is-extendable "^0.1.1"
     set-value "^2.0.1"
 
-unist-util-find-all-after@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/unist-util-find-all-after/-/unist-util-find-all-after-3.0.2.tgz#fdfecd14c5b7aea5e9ef38d5e0d5f774eeb561f6"
-  integrity sha512-xaTC/AGZ0rIM2gM28YVRAFPIZpzbpDtU3dRmp7EXlNVA8ziQc4hY3H7BHXM1J49nEmiqc3svnqMReW+PGqbZKQ==
-  dependencies:
-    unist-util-is "^4.0.0"
-
-unist-util-is@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-4.1.0.tgz#976e5f462a7a5de73d94b706bac1b90671b57797"
-  integrity sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg==
-
-unist-util-stringify-position@^2.0.0:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz#cce3bfa1cdf85ba7375d1d5b17bdc4cada9bd9da"
-  integrity sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==
-  dependencies:
-    "@types/unist" "^2.0.2"
-
 universal-user-agent@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/universal-user-agent/-/universal-user-agent-6.0.0.tgz#3381f8503b251c0d9cd21bc1de939ec9df5480ee"
@@ -9495,7 +9158,7 @@ use@^3.1.0:
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
   integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
 
-util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
+util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
@@ -9541,24 +9204,6 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
-vfile-message@^2.0.0:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-2.0.4.tgz#5b43b88171d409eae58477d13f23dd41d52c371a"
-  integrity sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==
-  dependencies:
-    "@types/unist" "^2.0.0"
-    unist-util-stringify-position "^2.0.0"
-
-vfile@^4.0.0:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/vfile/-/vfile-4.2.1.tgz#03f1dce28fc625c625bc6514350fbdb00fa9e624"
-  integrity sha512-O6AE4OskCG5S1emQ/4gl8zK586RqA3srz3nfK/Viy0UPToBc5Trp9BVFb1u0CjsKrAWwnpr4ifM/KBXPWwJbCA==
-  dependencies:
-    "@types/unist" "^2.0.0"
-    is-buffer "^2.0.0"
-    unist-util-stringify-position "^2.0.0"
-    vfile-message "^2.0.0"
-
 vt-pbf@^3.1.1:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/vt-pbf/-/vt-pbf-3.1.3.tgz#68fd150756465e2edae1cc5c048e063916dcfaac"
@@ -9733,7 +9378,7 @@ wrappy@1:
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
 
-write-file-atomic@^3.0.0, write-file-atomic@^3.0.3:
+write-file-atomic@^3.0.0:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-3.0.3.tgz#56bd5c5a5c70481cd19c571bd39ab965a5de56e8"
   integrity sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==
@@ -9743,6 +9388,14 @@ write-file-atomic@^3.0.0, write-file-atomic@^3.0.3:
     signal-exit "^3.0.2"
     typedarray-to-buffer "^3.1.5"
 
+write-file-atomic@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-4.0.1.tgz#9faa33a964c1c85ff6f849b80b42a88c2c537c8f"
+  integrity sha512-nSKUxgAbyioruk6hU87QzVbY279oYT6uiwgDoujth2ju4mJ+TZau7SQBhtbTmUyuNYTuXnSyRn66FV0+eCgcrQ==
+  dependencies:
+    imurmurhash "^0.1.4"
+    signal-exit "^3.0.7"
+
 ws@^7.4.6:
   version "7.5.8"
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.8.tgz#ac2729881ab9e7cbaf8787fe3469a48c5c7f636a"
@@ -9861,11 +9514,6 @@ yauzl@^2.10.0:
     buffer-crc32 "~0.2.3"
     fd-slicer "~1.1.0"
 
-zwitch@^1.0.0:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-1.0.5.tgz#d11d7381ffed16b742f6af7b3f223d5cd9fe9920"
-  integrity sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==
-
 zxcvbn@^4.4.2:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/zxcvbn/-/zxcvbn-4.4.2.tgz#28ec17cf09743edcab056ddd8b1b06262cc73c30"