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/_ContextualMenu.scss

@@ -54,7 +54,7 @@ limitations under the License.
     border-bottom: 8px solid transparent;
 }
 
-.mx_ContextualMenu_chevron_right:after {
+.mx_ContextualMenu_chevron_right::after {
     content: '';
     width: 0;
     height: 0;
@@ -81,7 +81,7 @@ limitations under the License.
     border-bottom: 8px solid transparent;
 }
 
-.mx_ContextualMenu_chevron_left:after{
+.mx_ContextualMenu_chevron_left::after {
     content: '';
     width: 0;
     height: 0;
@@ -108,7 +108,7 @@ limitations under the License.
     border-right: 8px solid transparent;
 }
 
-.mx_ContextualMenu_chevron_top:after{
+.mx_ContextualMenu_chevron_top::after {
     content: '';
     width: 0;
     height: 0;
@@ -135,7 +135,7 @@ limitations under the License.
     border-right: 8px solid transparent;
 }
 
-.mx_ContextualMenu_chevron_bottom:after{
+.mx_ContextualMenu_chevron_bottom::after {
     content: '';
     width: 0;
     height: 0;

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/_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: row wrap;
-    flex-flow: 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

@@ -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/_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,
@@ -177,24 +197,3 @@ limitations under the License.
     }
     */
 }
-
-.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

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

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;
 

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: '';