Add CI to run rethemendex.sh (#9577)

.github/workflows/static_analysis.yaml

@@ -76,6 +76,16 @@ jobs:
     name: "i18n Check"
     uses: matrix-org/matrix-react-sdk/.github/workflows/i18n_check.yml@develop
 
+  rethemendex_lint:
+    name: "Rethemendex Check"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      
+      - run: ./res/css/rethemendex.sh
+      
+      - run: git diff --exit-code
+
   js_lint:
     name: "ESLint"
     runs-on: ubuntu-latest

res/css/_common.pcss

@@ -793,3 +793,56 @@ legend {
     min-width: 18px;
     background-color: $secondary-content !important;
 }
+
+@define-mixin composerButtonHighLight {
+    background: rgba($accent, 0.25);
+    /* make the icon the accent color too */
+    &::before {
+        background-color: $accent !important;
+    }
+}
+
+@define-mixin composerButton $border-radius,$hover-color {
+    --size: 26px;
+    position: relative;
+    cursor: pointer;
+    height: var(--size);
+    line-height: var(--size);
+    width: auto;
+    padding-left: var(--size);
+    border-radius: $border-radius;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 3px;
+        left: 3px;
+        height: 20px;
+        width: 20px;
+        background-color: $icon-button-color;
+        mask-repeat: no-repeat;
+        mask-size: contain;
+        mask-position: center;
+    }
+
+    &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: 0;
+        width: var(--size);
+        height: var(--size);
+        border-radius: $border-radius;
+    }
+
+    &:hover {
+        &::after {
+            background: rgba($hover-color, 0.1);
+        }
+
+        &::before {
+            background-color: $hover-color;
+        }
+    }
+}

res/css/_components.pcss

@@ -260,8 +260,8 @@
 @import "./views/rooms/_AuxPanel.pcss";
 @import "./views/rooms/_BasicMessageComposer.pcss";
 @import "./views/rooms/_E2EIcon.pcss";
-@import "./views/rooms/_EmojiButton.pcss";
 @import "./views/rooms/_EditMessageComposer.pcss";
+@import "./views/rooms/_EmojiButton.pcss";
 @import "./views/rooms/_EntityTile.pcss";
 @import "./views/rooms/_EventBubbleTile.pcss";
 @import "./views/rooms/_EventTile.pcss";

res/css/views/rooms/_EmojiButton.pcss

@@ -14,8 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-@import "./_MessageComposerButton.pcss";
-
 .mx_EmojiButton {
     @mixin composerButton 50%,$accent;
 }

res/css/views/rooms/_MessageComposer.pcss

@@ -15,8 +15,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-@import "./_MessageComposerButton.pcss";
-
 .mx_MessageComposer_wrapper {
     vertical-align: middle;
     margin: auto;

res/css/views/rooms/_MessageComposerButton.pcss

@@ -1,68 +0,0 @@
-/*
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-@define-mixin composerButtonHighLight {
-    background: rgba($accent, 0.25);
-    /* make the icon the accent color too */
-    &::before {
-        background-color: $accent !important;
-    }
-}
-
-@define-mixin composerButton $border-radius,$hover-color {
-    --size: 26px;
-    position: relative;
-    cursor: pointer;
-    height: var(--size);
-    line-height: var(--size);
-    width: auto;
-    padding-left: var(--size);
-    border-radius: $border-radius;
-
-    &::before {
-        content: '';
-        position: absolute;
-        top: 3px;
-        left: 3px;
-        height: 20px;
-        width: 20px;
-        background-color: $icon-button-color;
-        mask-repeat: no-repeat;
-        mask-size: contain;
-        mask-position: center;
-    }
-
-    &::after {
-        content: '';
-        position: absolute;
-        left: 0;
-        top: 0;
-        z-index: 0;
-        width: var(--size);
-        height: var(--size);
-        border-radius: $border-radius;
-    }
-
-    &:hover {
-        &::after {
-            background: rgba($hover-color, 0.1);
-        }
-
-        &::before {
-            background-color: $hover-color;
-        }
-    }
-}