Merge pull request #2901 from matrix-org/dbkr/fix_style_linting

Fix style lint errors & enable on CI

.buildkite/pipeline.yaml

@@ -3,6 +3,7 @@ steps:
     command:
       - "yarn install"
       - "yarn lintwithexclusions"
+      - "yarn stylelint"
     plugins:
       - docker#v3.0.1:
           image: "node:10"

.stylelintrc.js

@@ -3,5 +3,13 @@ module.exports = {
     "rules": {
         "indentation": 4,
         "comment-empty-line-before": null,
+        "declaration-empty-line-before": null,
+        "length-zero-no-unit": null,
+        "rule-empty-line-before": null,
+        "color-hex-length": null,
+        "max-empty-lines": null,
+        "number-no-trailing-zeros": null,
+        "number-leading-zero": null,
+        "selector-list-comma-newline-after": null,
     }
 }

jenkins.sh

@@ -29,6 +29,9 @@ yarn lintall -f checkstyle -o eslint.xml || true
 # re-run the linter, excluding any files known to have errors or warnings.
 yarn lintwithexclusions
 
+# lint styles
+yarn stylelint
+
 # delete the old tarball, if it exists
 rm -f matrix-react-sdk-*.tgz
 

res/css/structures/_AutoHideScrollbar.scss

@@ -14,6 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+/* This file has CSS for both native and non-native scrollbars in an
+ * order that's fairly logic to read but violates stylelints descending
+ * specificity rule, so turn it off for this file. It also duplicates
+ * a selector to separate the hiding/showing from the sizing.
+ */
+/* stylelint-disable no-descending-specificity, no-duplicate-selectors */
+
 /*
 1. for browsers that support native overlay auto-hiding scrollbars
 */
@@ -59,8 +66,7 @@ body.mx_scrollbar_nooverlay {
     */
     .mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow > .mx_AutoHideScrollbar_offset,
     .mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow::before,
-    .mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow::after
-    {
+    .mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow::after {
         margin-right: calc(-1 * var(--scrollbar-width));
     }
 }

res/css/structures/_CompatibilityPage.scss

@@ -16,4 +16,4 @@
     border: 1px solid;
     padding: 10px;
     background-color: #fcc;
-}
+}

res/css/structures/_ContextualMenu.scss

@@ -35,7 +35,7 @@ limitations under the License.
     background-color: $menu-bg-color;
     color: $primary-fg-color;
     position: absolute;
-	font-size: 14px;
+    font-size: 14px;
     z-index: 5001;
 }
 
@@ -54,14 +54,14 @@ limitations under the License.
     border-bottom: 8px solid transparent;
 }
 
-.mx_ContextualMenu_chevron_right:after {
-    content:'';
+.mx_ContextualMenu_chevron_right::after {
+    content: '';
     width: 0;
     height: 0;
     border-top: 7px solid transparent;
     border-left: 7px solid $menu-bg-color;
     border-bottom: 7px solid transparent;
-    position:absolute;
+    position: absolute;
     top: -7px;
     right: 1px;
 }
@@ -81,14 +81,14 @@ limitations under the License.
     border-bottom: 8px solid transparent;
 }
 
-.mx_ContextualMenu_chevron_left:after{
-    content:'';
+.mx_ContextualMenu_chevron_left::after {
+    content: '';
     width: 0;
     height: 0;
     border-top: 7px solid transparent;
     border-right: 7px solid $menu-bg-color;
     border-bottom: 7px solid transparent;
-    position:absolute;
+    position: absolute;
     top: -7px;
     left: 1px;
 }
@@ -108,14 +108,14 @@ limitations under the License.
     border-right: 8px solid transparent;
 }
 
-.mx_ContextualMenu_chevron_top:after{
-    content:'';
+.mx_ContextualMenu_chevron_top::after {
+    content: '';
     width: 0;
     height: 0;
     border-left: 7px solid transparent;
     border-bottom: 7px solid $menu-bg-color;
     border-right: 7px solid transparent;
-    position:absolute;
+    position: absolute;
     left: -7px;
     top: 1px;
 }
@@ -135,14 +135,14 @@ limitations under the License.
     border-right: 8px solid transparent;
 }
 
-.mx_ContextualMenu_chevron_bottom:after{
-    content:'';
+.mx_ContextualMenu_chevron_bottom::after {
+    content: '';
     width: 0;
     height: 0;
     border-left: 7px solid transparent;
     border-top: 7px solid $menu-bg-color;
     border-right: 7px solid transparent;
-    position:absolute;
+    position: absolute;
     left: -7px;
     bottom: 1px;
 }

res/css/structures/_CreateRoom.scss

@@ -22,7 +22,7 @@ limitations under the License.
 }
 
 .mx_CreateRoom input,
-.mx_CreateRoom textarea  {
+.mx_CreateRoom textarea {
     border-radius: 3px;
     border: 1px solid $strong-input-border-color;
     font-weight: 300;

res/css/structures/_FilePanel.scss

@@ -101,10 +101,10 @@ limitations under the License.
     padding-left: 0px;
 }
 
-.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line {
-    background-color: $primary-bg-color;
-}
-
 .mx_FilePanel .mx_EventTile_selected .mx_EventTile_line {
     padding-left: 0px;
 }
+
+.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line {
+    background-color: $primary-bg-color;
+}

res/css/structures/_GroupView.scss

@@ -67,13 +67,13 @@ limitations under the License.
 }
 
 .mx_GroupView_editable {
-    border-bottom: 1px solid $strong-input-border-color ! important;
+    border-bottom: 1px solid $strong-input-border-color !important;
     min-width: 150px;
     cursor: text;
 }
 
 .mx_GroupView_editable:focus {
-    border-bottom: 1px solid $accent-color ! important;
+    border-bottom: 1px solid $accent-color !important;
     outline: none;
     box-shadow: none;
 }
@@ -95,7 +95,7 @@ limitations under the License.
 
 .mx_GroupView_avatarPicker .mx_Spinner {
     width: 48px;
-    height: 48px ! important;
+    height: 48px !important;
 }
 
 .mx_GroupView_header_leftCol {
@@ -176,7 +176,7 @@ limitations under the License.
     flex: 1;
 }
 
-.mx_GroupView_body  {
+.mx_GroupView_body {
     flex-grow: 1;
 }
 
@@ -333,7 +333,7 @@ limitations under the License.
     display: none;
 }
 
-.mx_GroupView_body .gm-scroll-view > *{
+.mx_GroupView_body .gm-scroll-view > * {
     margin: 11px 50px 0px 68px;
 }
 

res/css/structures/_LeftPanel.scss

@@ -67,11 +67,6 @@ limitations under the License.
     z-index: 6;
 }
 
-.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu {
-   flex: 0 0 160px;
-   margin-bottom: 9px;
-}
-
 .mx_LeftPanel .mx_BottomLeftMenu {
     order: 3;
 
@@ -82,6 +77,11 @@ limitations under the License.
     z-index: 1;
 }
 
+.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu {
+    flex: 0 0 160px;
+    margin-bottom: 9px;
+}
+
 .mx_LeftPanel .mx_BottomLeftMenu_options {
     margin-top: 18px;
 }

res/css/structures/_MyGroups.scss

@@ -52,7 +52,7 @@ limitations under the License.
     background-color: $roomheader-addroom-bg-color;
     position: relative;
 
-    &:before {
+    &::before {
         background-color: $roomheader-addroom-fg-color;
         mask: url('$(res)/img/icons-create-room.svg');
         mask-repeat: no-repeat;
@@ -113,8 +113,7 @@ limitations under the License.
     overflow-x: hidden;
 
     display: flex;
-    flex-direction: row;
-    flex-flow: wrap;
+    flex-flow: row wrap;
     align-content: flex-start;
 }
 
@@ -153,6 +152,7 @@ limitations under the License.
 
 .mx_GroupTile_profile .mx_GroupTile_groupId {
     font-size: 13px;
+    opacity: 0.7;
 }
 
 .mx_GroupTile_profile .mx_GroupTile_desc {
@@ -163,7 +163,3 @@ limitations under the License.
     max-height: 36px;
     overflow: hidden;
 }
-
-.mx_GroupTile_profile .mx_GroupTile_groupId {
-    opacity: 0.7;
-}

res/css/structures/_NotificationPanel.scss

@@ -66,7 +66,7 @@ limitations under the License.
 
 .mx_NotificationPanel .mx_EventTile_roomName a,
 .mx_NotificationPanel .mx_EventTile_senderDetails a {
-    text-decoration: none ! important;
+    text-decoration: none !important;
 }
 
 .mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
@@ -83,14 +83,14 @@ limitations under the License.
     padding-right: 0px;
 }
 
-.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
-    background-color: $primary-bg-color;
-}
-
 .mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line {
     padding-left: 0px;
 }
 
+.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
+    background-color: $primary-bg-color;
+}
+
 .mx_NotificationPanel .mx_EventTile_content {
     margin-right: 0px;
 }

res/css/structures/_RoomStatusBar.scss

@@ -40,12 +40,12 @@ limitations under the License.
     opacity: 0.5;
     position: relative;
     top: -4px;
-/*
+    /*
     animation-duration: 1s;
     animation-name: bounce;
     animation-direction: alternate;
     animation-iteration-count: infinite;
-*/
+    */
 }
 
 .mx_RoomStatusBar_placeholderIndicator span:nth-child(1) {
@@ -138,8 +138,8 @@ limitations under the License.
 }
 
 .mx_RoomStatusBar_resend_link {
-    color: $primary-fg-color ! important;
-    text-decoration: underline ! important;
+    color: $primary-fg-color !important;
+    text-decoration: underline !important;
     cursor: pointer;
 }
 
@@ -173,12 +173,12 @@ limitations under the License.
     }
 
     .mx_RoomStatusBar_callBar {
-      height: 40px;
-      line-height: 40px;
+        height: 40px;
+        line-height: 40px;
     }
 
     .mx_RoomStatusBar_typingBar {
-      height: 40px;
-      line-height: 40px;
+        height: 40px;
+        line-height: 40px;
     }
 }

res/css/structures/_RoomSubList.scss

@@ -89,7 +89,7 @@ limitations under the License.
     flex: 0 0 16px;
     position: relative;
 
-    &:before {
+    &::before {
         background-color: $roomheader-addroom-fg-color;
         mask: url('$(res)/img/icons-room-add.svg');
         mask-repeat: no-repeat;
@@ -137,6 +137,26 @@ limitations under the License.
     padding: 0 8px;
 }
 
+.collapsed {
+    .mx_RoomSubList_scroll {
+        padding: 0;
+    }
+
+    .mx_RoomSubList_labelContainer {
+        margin-right: 14px;
+        margin-left: 2px;
+    }
+
+    .mx_RoomSubList_addRoom {
+        margin-left: 3px;
+        margin-right: 10px;
+    }
+
+    .mx_RoomSubList_label > span {
+        display: none;
+    }
+}
+
 // overflow indicators
 .mx_RoomSubList:not(.resized-all) > .mx_RoomSubList_scroll {
     &.mx_IndicatorScrollbar_topOverflow::before,
@@ -164,7 +184,7 @@ limitations under the License.
         background: linear-gradient(to top, $panel-gradient);
     }
 
-/*
+    /*
     // for now, we remove the bottomOverflow entirely as we don't want to
     // lose the screen real-estate due to a bg-colored gradient, but we also
     // don't want to use drop shadows and risk a confusing hierarchy of cards.
@@ -175,26 +195,5 @@ limitations under the License.
         margin: 0px -8px;
         background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.0));
     }
-*/
-}
-
-.collapsed {
-
-    .mx_RoomSubList_scroll {
-        padding: 0;
-    }
-
-    .mx_RoomSubList_labelContainer {
-        margin-right: 14px;
-        margin-left: 2px;
-    }
-
-    .mx_RoomSubList_addRoom {
-        margin-left: 3px;
-        margin-right: 10px;
-    }
-
-    .mx_RoomSubList_label > span {
-        display: none;
-    }
+    */
 }

res/css/structures/_RoomView.scss

@@ -78,7 +78,7 @@ limitations under the License.
 }
 
 .mx_RoomView_auxPanel_apps {
-    max-width: 1920px ! important;
+    max-width: 1920px !important;
 }
 
 
@@ -86,36 +86,6 @@ limitations under the License.
     flex: 1 1 0;
 }
 
-.mx_RoomView_body {
-    position: relative; //for .mx_RoomView_auxPanel_fullHeight
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    min-width: 0;
-}
-
-.mx_RoomView_body .mx_RoomView_timeline {
-    /* offset parent for mx_RoomView_topUnreadMessagesBar  */
-    position: relative;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-}
-
-.mx_RoomView_body {
-    .mx_RoomView_messagePanel, .mx_RoomView_messagePanelSpinner, .mx_RoomView_messagePanelSearchSpinner{
-        order: 2;
-    }
-}
-
-.mx_RoomView_body .mx_RoomView_statusArea {
-    order: 3;
-}
-
-.mx_RoomView_body .mx_MessageComposer {
-    order: 4;
-}
-
 .mx_RoomView_messagePanel {
     width: 100%;
     overflow-y: auto;
@@ -132,7 +102,7 @@ limitations under the License.
     position: relative;
 }
 
-.mx_RoomView_messagePanelSearchSpinner:before {
+.mx_RoomView_messagePanelSearchSpinner::before {
     background-color: $greyed-fg-color;
     mask: url('$(res)/img/feather-customised/search-input.svg');
     mask-repeat: no-repeat;
@@ -146,6 +116,62 @@ limitations under the License.
     height: 50px;
 }
 
+.mx_RoomView_body {
+    position: relative; //for .mx_RoomView_auxPanel_fullHeight
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+
+    .mx_RoomView_messagePanel, .mx_RoomView_messagePanelSpinner, .mx_RoomView_messagePanelSearchSpinner {
+        order: 2;
+    }
+}
+
+.mx_RoomView_body .mx_RoomView_timeline {
+    /* offset parent for mx_RoomView_topUnreadMessagesBar  */
+    position: relative;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.mx_RoomView_statusArea {
+    width: 100%;
+    flex: 0 0 auto;
+
+    max-height: 0px;
+    background-color: $primary-bg-color;
+    z-index: 1000;
+    overflow: hidden;
+
+    transition: all .2s ease-out;
+}
+
+.mx_RoomView_statusArea_expanded {
+    max-height: 100px;
+}
+
+.mx_RoomView_statusAreaBox {
+    margin: auto;
+    min-height: 50px;
+}
+
+.mx_RoomView_statusAreaBox_line {
+    margin-left: 65px;
+    border-top: 1px solid $primary-hairline-color;
+    height: 1px;
+}
+
+
+.mx_RoomView_body .mx_RoomView_statusArea {
+    order: 3;
+}
+
+.mx_RoomView_body .mx_MessageComposer {
+    order: 4;
+}
+
 .mx_RoomView_messageListWrapper {
     min-height: 100%;
 
@@ -206,33 +232,6 @@ hr.mx_RoomView_myReadMarker {
     z-index: 1;
 }
 
-.mx_RoomView_statusArea {
-    width: 100%;
-    flex: 0 0 auto;
-
-    max-height: 0px;
-    background-color: $primary-bg-color;
-    z-index: 1000;
-    overflow: hidden;
-
-    transition: all .2s ease-out;
-}
-
-.mx_RoomView_statusArea_expanded {
-    max-height: 100px;
-}
-
-.mx_RoomView_statusAreaBox {
-    margin: auto;
-    min-height: 50px;
-}
-
-.mx_RoomView_statusAreaBox_line {
-    margin-left: 65px;
-    border-top: 1px solid $primary-hairline-color;
-    height: 1px;
-}
-
 .mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {
     background-color: $primary-bg-color;
 }
@@ -293,7 +292,7 @@ hr.mx_RoomView_myReadMarker {
 }
 
 .mx_RoomView_ongoingConfCallNotification a {
-    color: $accent-fg-color ! important;
+    color: $accent-fg-color !important;
 }
 
 .mx_MatrixChat_useCompactLayout {

res/css/structures/_TabbedView.scss

@@ -50,7 +50,7 @@ limitations under the License.
     color: $tab-label-active-fg-color;
 }
 
-.mx_TabbedView_maskedIcon {;
+.mx_TabbedView_maskedIcon {
     margin-left: 6px;
     margin-right: 9px;
     margin-top: 1px;
@@ -59,7 +59,7 @@ limitations under the License.
     display: inline-block;
 }
 
-.mx_TabbedView_maskedIcon:before {
+.mx_TabbedView_maskedIcon::before {
     display: inline-block;
     background-color: $tab-label-icon-bg-color;
     mask-repeat: no-repeat;
@@ -71,7 +71,7 @@ limitations under the License.
     vertical-align: middle;
 }
 
-.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon:before {
+.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before {
     background-color: $tab-label-active-icon-bg-color;
 }
 

res/css/structures/_TagPanel.scss

@@ -36,7 +36,6 @@ limitations under the License.
 
     flex: none;
 
-    display: flex;
     justify-content: center;
     align-items: flex-start;
 
@@ -75,13 +74,13 @@ limitations under the License.
 
 .mx_TagPanel .mx_TagTile {
     margin: 9px 0;
-//  opacity: 0.5;
+    // opacity: 0.5;
     position: relative;
 }
 .mx_TagPanel .mx_TagTile:focus,
 .mx_TagPanel .mx_TagTile:hover,
 .mx_TagPanel .mx_TagTile.mx_TagTile_selected {
-//    opacity: 1;
+    // opacity: 1;
 }
 
 .mx_TagPanel .mx_TagTile.mx_TagTile_selected .mx_TagTile_avatar .mx_BaseAvatar {

res/css/structures/_TagPanelButtons.scss

@@ -23,12 +23,12 @@ limitations under the License.
     padding: 17px 0 3px 0;
 }
 
-.mx_TagPanelButtons > .mx_GroupsButton:before {
+.mx_TagPanelButtons > .mx_GroupsButton::before {
     mask: url('$(res)/img/feather-customised/users.svg');
     mask-position: center 11px;
 }
 
-.mx_TagPanelButtons > .mx_TagPanelButtons_report:before {
+.mx_TagPanelButtons > .mx_TagPanelButtons_report::before {
     mask: url('$(res)/img/feather-customised/life-buoy.svg');
     mask-position: center 9px;
 }
@@ -43,7 +43,7 @@ limitations under the License.
     /* overwrite mx_RoleButton inline-block */
     display: block !important;
 
-    &:before {
+    &::before {
         background-color: $tagpanel-bg-color;
         mask-repeat: no-repeat;
         content: '';