Stylelint SCSS linter (#1766)

* Added stylelint fixed stylelint issues

* Added CHANGELOG.md

.stylelintrc.json

@@ -0,0 +1,16 @@
+{
+    "extends": "stylelint-config-standard",
+    "rules": {
+        "indentation": 4,
+        "value-keyword-case": null,
+        "selector-combinator-space-after": null,
+        "no-descending-specificity": null,
+        "at-rule-no-unknown": [true, {
+            "ignoreAtRules": ["extend"]
+        }],
+        "selector-type-no-unknown": [true, {
+            "ignoreTypes": ["first-child"]
+        }]
+    }
+
+}

CHANGELOG.md

@@ -15,9 +15,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Built-in search for labels when create an object or change a label (<https://github.com/opencv/cvat/pull/1683>)
 - Better validation of labels and attributes in raw viewer (<https://github.com/opencv/cvat/pull/1727>)
 - ClamAV antivirus integration (<https://github.com/opencv/cvat/pull/1712>)
+- SCSS files linting with Stylelint tool (<https://github.com/opencv/cvat/pull/1766>)
 - Supported import and export or single boxes in MOT format (https://github.com/opencv/cvat/pull/1764)
 - [Datumaro] Added `stats` command, which shows some dataset statistics like image mean and std (https://github.com/opencv/cvat/pull/1734)
-- Add option to upload annotations upon task creation on CLI 
+- Add option to upload annotations upon task creation on CLI
 - Polygon and polylines interpolation (<https://github.com/opencv/cvat/pull/1571>)
 - Ability to redraw shape from scratch (Shift + N) for an activated shape (<https://github.com/opencv/cvat/pull/1571>)
 - Highlights for the first point of a polygon/polyline and direction (<https://github.com/opencv/cvat/pull/1571>)

CONTRIBUTING.md

@@ -74,6 +74,7 @@ for development
     - [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)
     - [Python](https://marketplace.visualstudio.com/items?itemName=ms-python.python)
     - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
+    - [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)
     - [vscode-remark-lint](https://marketplace.visualstudio.com/items?itemName=drewbourne.vscode-remark-lint)
     - [licenser](https://marketplace.visualstudio.com/items?itemName=ymotongpoo.licenser)
     - [Trailing Spaces](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces)

cvat-canvas/src/scss/canvas.scss

@@ -42,7 +42,7 @@ polyline.cvat_shape_drawing_opacity {
     fill: white;
     cursor: default;
     font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
-    text-shadow: 0px 0px 4px black;
+    text-shadow: 0 0 4px black;
     user-select: none;
     pointer-events: none;
 }
@@ -54,47 +54,55 @@ polyline.cvat_shape_drawing_opacity {
 .cvat_canvas_shape_grouping {
     @extend .cvat_shape_action_dasharray;
     @extend .cvat_shape_action_opacity;
+
     fill: darkmagenta;
 }
 
 polyline.cvat_canvas_shape_grouping {
     @extend .cvat_shape_action_dasharray;
     @extend .cvat_shape_action_opacity;
+
     stroke: darkmagenta;
 }
 
 .cvat_canvas_shape_merging {
     @extend .cvat_shape_action_dasharray;
     @extend .cvat_shape_action_opacity;
+
     fill: blue;
 }
 
 polyline.cvat_canvas_shape_merging {
     @extend .cvat_shape_action_dasharray;
     @extend .cvat_shape_action_opacity;
+
     stroke: blue;
 }
 
 polyline.cvat_canvas_shape_splitting {
     @extend .cvat_shape_action_dasharray;
     @extend .cvat_shape_action_opacity;
+
     stroke: dodgerblue;
 }
 
 .cvat_canvas_shape_splitting {
     @extend .cvat_shape_action_dasharray;
     @extend .cvat_shape_action_opacity;
+
     fill: dodgerblue;
 }
 
 .cvat_canvas_shape_drawing {
     @extend .cvat_shape_drawing_opacity;
+
     fill: white;
     stroke: black;
 }
 
 .cvat_canvas_zoom_selection {
     @extend .cvat_shape_action_dasharray;
+
     stroke: #096dd9;
     fill-opacity: 0;
 }
@@ -103,7 +111,8 @@ polyline.cvat_canvas_shape_splitting {
     stroke-dasharray: 5;
 }
 
-.cvat_canvas_shape .svg_select_points, .cvat_canvas_shape .cvat_canvas_cuboid_projections {
+.cvat_canvas_shape .svg_select_points,
+.cvat_canvas_shape .cvat_canvas_cuboid_projections {
     stroke-dasharray: none;
 }
 
@@ -130,20 +139,24 @@ polyline.cvat_canvas_shape_splitting {
     pointer-events: none;
 }
 
-.svg_select_points_lb:hover, .svg_select_points_rt:hover {
+.svg_select_points_lb:hover,
+.svg_select_points_rt:hover {
     cursor: nesw-resize;
 }
 
-.svg_select_points_lt:hover, .svg_select_points_rb:hover {
+.svg_select_points_lt:hover,
+.svg_select_points_rb:hover {
     cursor: nwse-resize;
 }
 
-.svg_select_points_l:hover, .svg_select_points_r:hover,
+.svg_select_points_l:hover,
+.svg_select_points_r:hover,
 .svg_select_points_ew:hover {
     cursor: ew-resize;
 }
 
-.svg_select_points_t:hover, .svg_select_points_b:hover {
+.svg_select_points_t:hover,
+.svg_select_points_b:hover {
     cursor: ns-resize;
 }
 
@@ -202,7 +215,6 @@ polyline.cvat_canvas_shape_splitting {
     pointer-events: none;
     width: 100%;
     height: 100%;
-    pointer-events: none;
 }
 
 #cvat_canvas_background {
@@ -211,7 +223,7 @@ polyline.cvat_canvas_shape_splitting {
     background-repeat: no-repeat;
     width: 100%;
     height: 100%;
-    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
+    box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.75);
 }
 
 #cvat_canvas_bitmap {
@@ -221,7 +233,7 @@ polyline.cvat_canvas_shape_splitting {
     background: black;
     width: 100%;
     height: 100%;
-    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
+    box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.75);
 }
 
 #cvat_canvas_grid {
@@ -230,7 +242,6 @@ polyline.cvat_canvas_shape_splitting {
     pointer-events: none;
     width: 100%;
     height: 100%;
-    pointer-events: none;
 }
 
 #cvat_canvas_grid_pattern {
@@ -248,7 +259,18 @@ polyline.cvat_canvas_shape_splitting {
 }
 
 @keyframes loadingAnimation {
-    0%   {stroke-dashoffset: 1; stroke: #09c;}
-    50%  {stroke-dashoffset: 100; stroke: #f44;}
-    100% {stroke-dashoffset: 300; stroke: #09c;}
+    0% {
+        stroke-dashoffset: 1;
+        stroke: #09c;
+    }
+
+    50% {
+        stroke-dashoffset: 100;
+        stroke: #f44;
+    }
+
+    100% {
+        stroke-dashoffset: 300;
+        stroke: #09c;
+    }
 }

cvat-ui/src/base.scss

@@ -2,26 +2,26 @@
 //
 // SPDX-License-Identifier: MIT
 
-$header-color: #D8D8D8;
+$header-color: #d8d8d8;
 $text-color: #303030;
-$hover-menu-color: rgba(24,144,255,0.05);
-$completed-progress-color: #61C200;
-$inprogress-progress-color: #1890FF;
-$pending-progress-color: #C1C1C1;
+$hover-menu-color: rgba(24, 144, 255, 0.05);
+$completed-progress-color: #61c200;
+$inprogress-progress-color: #1890ff;
+$pending-progress-color: #c1c1c1;
 $border-color-1: #c3c3c3;
 $border-color-2: #d9d9d9;
 $border-color-3: #242424;
 $border-color-hover: #40a9ff;
 $background-color-1: white;
-$background-color-2: #F1F1F1;
+$background-color-2: #f1f1f1;
 $transparent-color: rgba(0, 0, 0, 0);
 $player-slider-color: #979797;
 $player-buttons-color: #242424;
-$danger-icon-color: #FF4136;
-$info-icon-color: #0074D9;
-$objects-bar-tabs-color: #BEBEBE;
-$objects-bar-icons-color: #242424; // #6E6E6E
-$active-object-item-background-color: #D8ECFF;
-$slider-color: #1890FF;
+$danger-icon-color: #ff4136;
+$info-icon-color: #0074d9;
+$objects-bar-tabs-color: #bebebe;
+$objects-bar-icons-color: #242424; // #6e6e6e
+$active-object-item-background-color: #d8ecff;
+$slider-color: #1890ff;
 
-$monospaced-fonts-stack: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
+$monospaced-fonts-stack: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;

cvat-ui/src/components/actions-menu/styles.scss

@@ -5,14 +5,14 @@
 @import '../../base.scss';
 
 .ant-menu.cvat-actions-menu {
-    box-shadow: 0 0 17px rgba(0,0,0,0.2);
+    box-shadow: 0 0 17px rgba(0, 0, 0, 0.2);
 
     > li:hover {
         background-color: $hover-menu-color;
     }
 
     .ant-menu-submenu-title {
-        margin: 0px;
+        margin: 0;
         width: 13em;
     }
 }
@@ -30,10 +30,10 @@
 }
 
 .ant-menu-item.cvat-menu-load-submenu-item {
-    margin: 0px;
-    padding: 0px;
+    margin: 0;
+    padding: 0;
 
-   > span > .ant-upload {
+    > span > .ant-upload {
         width: 100%;
         height: 100%;
 

cvat-ui/src/components/annotation-page/attribute-annotation-workspace/styles.scss

@@ -36,7 +36,7 @@
     align-items: center;
     justify-content: space-between;
     font-size: 18px;
-    margin: 10px 0px;
+    margin: 10px 0;
 }
 
 .attribute-annotations-sidebar-not-found-wrapper {
@@ -45,7 +45,7 @@
 }
 
 .attribute-annotation-sidebar-attr-list-wrapper {
-    margin: 10px 0px 10px 10px;
+    margin: 10px 0 10px 10px;
 }
 
 .attribute-annotation-sidebar-attr-elem-wrapper {

cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/styles.scss

@@ -6,19 +6,21 @@
 
 .cvat-objects-appearance-collapse.ant-collapse {
     width: 100%;
-    bottom: 0px;
+    bottom: 0;
     position: absolute;
-    border-radius: 0px;
+    border-radius: 0;
 
     > .ant-collapse-item {
         border: none;
+
         > .ant-collapse-header {
             padding-top: 2.5px;
             padding-bottom: 2.5px;
             background: $header-color;
-            border-radius: 0px;
+            border-radius: 0;
             height: 25px;
         }
+
         > .ant-collapse-content {
             background: $background-color-2;
             border-bottom: none;
@@ -27,7 +29,6 @@
             > .ant-collapse-content-box {
                 padding: 10px;
             }
-
         }
     }
 }
@@ -35,7 +36,6 @@
 .cvat-object-sidebar-icon {
     fill: $objects-bar-icons-color;
     color: $objects-bar-icons-color;
-
     font-size: 15px;
 
     &:hover {
@@ -50,7 +50,7 @@
 
     .ant-tabs-card-bar {
         border: none;
-        margin-bottom: 0px;
+        margin-bottom: 0;
         padding-top: 25px;
 
         .ant-tabs-tab {
@@ -71,6 +71,7 @@
 .cvat-objects-sidebar-states-header {
     background: $objects-bar-tabs-color;
     padding: 5px;
+    height: 80px;
 
     > div:nth-child(1) > div:nth-child(1) {
         height: 32px;
@@ -81,7 +82,7 @@
 
         > div {
             text-align: center;
-            margin: 0px 2px;
+            margin: 0 2px;
 
             > i {
                 @extend .cvat-object-sidebar-icon;
@@ -99,10 +100,6 @@
     }
 }
 
-.cvat-objects-sidebar-states-header {
-    height: 80px;
-}
-
 .cvat-objects-sidebar-states-list {
     background-color: $background-color-2;
     height: calc(100% - 80px);
@@ -134,6 +131,7 @@
 
         > div:nth-child(3) > i {
             @extend .cvat-object-sidebar-icon;
+
             font-size: 25px;
         }
 
@@ -142,7 +140,7 @@
         }
     }
 
-    > div:nth-child(2)  {
+    > div:nth-child(2) {
         > div > div {
             margin-top: 5px;
         }
@@ -154,7 +152,7 @@
 }
 
 .cvat-objects-sidebar-state-item-collapse {
-    border: 0px;
+    border: 0;
     background: inherit;
 
     > .ant-collapse-item {
@@ -209,7 +207,7 @@
 
     > .ant-radio-group {
         display: grid;
-        padding: 5px
+        padding: 5px;
     }
 }
 
@@ -261,13 +259,13 @@
     }
 
     .ant-checkbox-wrapper {
-        margin-left: 0px;
+        margin-left: 0;
     }
 }
 
 .cvat-object-item-menu {
     > li {
-        padding: 0px;
+        padding: 0;
 
         > button {
             padding: 5px 32px;

cvat-ui/src/components/annotation-page/standard-workspace/styles.scss

@@ -5,7 +5,7 @@
 @import 'base.scss';
 
 .cvat-standard-workspace.ant-layout {
-    height: 100%
+    height: 100%;
 }
 
 .cvat-canvas-container {
@@ -17,8 +17,8 @@
 }
 
 .cvat-objects-sidebar-sider {
-    top: 0px;
-    right: 0px;
+    top: 0;
+    right: 0;
     left: auto;
     background-color: $background-color-2;
     border-left: 1px solid $border-color-1;
@@ -31,6 +31,10 @@
     height: 100%;
 }
 
+.cvat-rotate-canvas-controls-right > svg {
+    transform: scaleX(-1);
+}
+
 .cvat-canvas-controls-sidebar {
     background-color: $background-color-2;
     border-right: 1px solid $border-color-1;
@@ -70,6 +74,7 @@
     &:hover {
         transform: scale(0.75);
     }
+
     &:active {
         transform: scale(0.65);
     }
@@ -79,18 +84,14 @@
 .ant-popover-content >
 .ant-popover-inner > div >
 .ant-popover-inner-content {
-	padding: 0px;
-}
-
-.cvat-rotate-canvas-controls-right > svg {
-    transform: scaleX(-1);
+    padding: 0;
 }
 
 .cvat-draw-shape-popover >
 .ant-popover-content >
 .ant-popover-inner > div >
 .ant-popover-inner-content {
-	padding: 0px;
+    padding: 0;
 }
 
 .cvat-draw-shape-popover-points-selector {
@@ -102,12 +103,15 @@
     border-radius: 5px;
     background: $background-color-2;
     width: 250px;
+
     > div {
         margin-top: 5px;
     }
+
     > div:nth-child(3) > div > div {
         width: 100%;
     }
+
     > div:last-child {
         span {
             width: 100%;
@@ -115,11 +119,13 @@
 
         button {
             width: 100%;
+
             &:nth-child(1) {
-                border-radius: 3px 0px 0px 3px;
+                border-radius: 3px 0 0 3px;
             }
+
             &:nth-child(2) {
-                border-radius: 0px 3px 3px 0px;
+                border-radius: 0 3px 3px 0;
             }
         }
     }
@@ -128,6 +134,6 @@
 .cvat-propagate-confirm {
     > .ant-input-number {
         width: 70px;
-        margin: 0px 5px;
+        margin: 0 5px;
     }
 }

cvat-ui/src/components/annotation-page/styles.scss

@@ -5,27 +5,27 @@
 @import '../../base.scss';
 
 .cvat-annotation-page.ant-layout {
-    height: 100%
+    height: 100%;
 }
 
 .ant-layout-header.cvat-annotation-header {
     background-color: $background-color-2;
     border-bottom: 1px solid $border-color-1;
     height: 54px;
-    padding: 0px;
+    padding: 0;
 }
 
 .cvat-annotation-header-left-group {
     > button:first-child {
         filter: invert(0.9);
         background: $background-color-1;
-        border-radius: 0px;
+        border-radius: 0;
         width: 70px;
     }
 }
 
 .ant-btn.cvat-annotation-header-button {
-    padding: 0px;
+    padding: 0;
     width: 54px;
     height: 54px;
     float: left;
@@ -35,10 +35,10 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin: 0px 3px;
+    margin: 0 3px;
 
     > span {
-        margin-left: 0px;
+        margin-left: 0;
         font-size: 10px;
     }
 
@@ -57,19 +57,20 @@
 
     > * {
         display: block;
-        line-height: 0px;
+        line-height: 0;
     }
 }
 
 .cvat-annotation-disabled-header-button {
     @extend .cvat-annotation-header-button;
+
     opacity: 0.5;
     pointer-events: none;
 }
 
 .cvat-annotation-header-player-group > div {
     height: 54px;
-    line-height: 0px;
+    line-height: 0;
 }
 
 .cvat-player-buttons {
@@ -81,7 +82,7 @@
 
     > i {
         font-size: 25px;
-        margin: 0px 7px;
+        margin: 0 7px;
         color: $player-buttons-color;
 
         &:hover {
@@ -111,7 +112,6 @@
     > .ant-slider-rail {
         background-color: $player-slider-color;
     }
-
 }
 
 .cvat-player-filename-wrapper {
@@ -161,7 +161,8 @@
 
     > div:nth-child(1) {
         > div {
-            > .ant-select, i {
+            > .ant-select,
+            i {
                 margin-left: 10px;
             }
         }
@@ -203,19 +204,18 @@
 }
 
 .ant-menu.cvat-annotation-menu {
-    box-shadow: 0 0 17px rgba(0,0,0,0.2);
+    box-shadow: 0 0 17px rgba(0, 0, 0, 0.2);
 
     > li:hover {
         background-color: $hover-menu-color;
     }
 
     .ant-menu-submenu-title {
-        margin: 0px;
+        margin: 0;
         width: 15em;
     }
 }
 
-
 // TODO: Move canvas from standard workspace and create its own .scss
 .cvat-canvas-context-menu {
     opacity: 0.6;
@@ -235,7 +235,7 @@
     opacity: 0.6;
     position: fixed;
     z-index: 10;
-    background-color: #ffffff;
+    background-color: #fff;
     border-radius: 4px;
 
     &:hover {
@@ -291,6 +291,7 @@
 
 .cvat-annotations-filters-input.ant-select > div {
     height: 32px;
+
     > div {
         height: 32px;
 

cvat-ui/src/components/feedback/styles.scss

@@ -6,10 +6,8 @@
     position: absolute;
     bottom: 20px;
     right: 20px;
-    padding: 0px;
-}
+    padding: 0;
 
-.cvat-feedback-button {
     > i {
         font-size: 40px;
     }

cvat-ui/src/components/global-error-boundary/styles.scss

@@ -13,5 +13,3 @@
         color: red;
     }
 }
-
-

cvat-ui/src/components/header/styles.scss

@@ -6,9 +6,9 @@
 
 .cvat-header.ant-layout-header {
     display: flex;
-    padding-left: 0px;
-    padding-right: 0px;
-    line-height: 0px;
+    padding-left: 0;
+    padding-right: 0;
+    line-height: 0;
     height: 44px;
     background: $header-color;
 }
@@ -35,16 +35,15 @@
 
 .ant-btn.cvat-header-button {
     color: $text-color;
-    padding: 0px 10px;
+    padding: 0 10px;
     margin-right: 10px;
 }
 
-
 .ant-dropdown-trigger.cvat-header-menu-dropdown {
     display: flex;
     align-items: center;
     border-left: 1px solid $border-color-1;
-    padding: 0px 20px;
+    padding: 0 20px;
 }
 
 .anticon.cvat-header-account-icon {
@@ -55,5 +54,5 @@
 
 .anticon.cvat-header-menu-icon {
     margin-left: 16px;
-    margin-right: 0px;
+    margin-right: 0;
 }

cvat-ui/src/components/labels-editor/styles.scss

@@ -8,7 +8,7 @@ textarea.ant-input.cvat-raw-labels-viewer {
     border-color: $border-color-2;
     box-shadow: none;
     border-top: none;
-    border-radius: 0px 0px 5px 5px;
+    border-radius: 0 0 5px 5px;
     min-height: 9em;
     font-family: $monospaced-fonts-stack;
 
@@ -27,7 +27,7 @@ textarea.ant-input.cvat-raw-labels-viewer {
     border: 1px solid $border-color-2;
     box-shadow: none;
     border-top: none;
-    border-radius: 0px 0px 5px 5px;
+    border-radius: 0 0 5px 5px;
     padding: 5px;
     display: flex;
     overflow-y: auto;
@@ -74,8 +74,7 @@ textarea.ant-input.cvat-raw-labels-viewer {
 }
 
 .cvat-label-constructor-creator,
-.cvat-label-constructor-updater
-{
+.cvat-label-constructor-updater {
     > form:first-child {
         margin-top: 10px;
     }

cvat-ui/src/components/register-page/styles.scss

@@ -4,4 +4,4 @@
 
 .ant-form-item {
     margin-bottom: 12px;
-}
+}

cvat-ui/src/components/settings-page/styles.scss

@@ -15,7 +15,8 @@
     }
 }
 
-.cvat-workspace-settings, .cvat-player-settings {
+.cvat-workspace-settings,
+.cvat-player-settings {
     width: 100%;
     height: max-content;
     background: $background-color-1;
@@ -74,7 +75,7 @@
 }
 
 .cvat-player-settings-step > div > span > i {
-    margin: 0px 5px;
+    margin: 0 5px;
     font-size: 10px;
 }
 

cvat-ui/src/components/task-page/styles.scss

@@ -96,7 +96,7 @@
 }
 
 .ant-typography.cvat-jobs-header {
-    margin-bottom: 0px;
+    margin-bottom: 0;
     font-size: 20px;
     font-weight: bold;
 }

cvat-ui/src/components/tasks-page/styles.scss

@@ -18,6 +18,15 @@
         }
     }
 
+    > div:nth-child(3) {
+        height: 83%;
+        padding-top: 10px;
+    }
+
+    > div:nth-child(4) {
+        padding-top: 10px;
+    }
+
     > div:nth-child(2) {
         > div:nth-child(1) {
             display: flex;
@@ -33,15 +42,6 @@
             justify-content: flex-end;
         }
     }
-
-    > div:nth-child(3) {
-        height: 83%;
-        padding-top: 10px;
-    }
-
-    > div:nth-child(4) {
-        padding-top: 10px;
-    }
 }
 
 /* empty-tasks icon */
@@ -97,7 +97,7 @@
     justify-content: center;
     overflow: hidden;
     margin: 20px;
-    margin-top: 0px;
+    margin-top: 0;
 
     > .cvat-task-item-preview {
         max-width: 140px;
@@ -121,10 +121,8 @@
     margin-right: 5px;
 }
 
-.cvat-task-completed-progress {
-    div.ant-progress-bg {
-        background: $completed-progress-color !important; /* csslint allow: important */
-    }
+.cvat-task-completed-progress div.ant-progress-bg {
+    background: $completed-progress-color !important;
 }
 
 .cvat-task-progress-progress {

package.json

@@ -28,7 +28,9 @@
     "remark-lint-unordered-list-marker-style": "^2.0.0",
     "remark-preset-lint-consistent": "^3.0.0",
     "remark-preset-lint-markdown-style-guide": "^3.0.0",
-    "remark-preset-lint-recommended": "^4.0.0"
+    "remark-preset-lint-recommended": "^4.0.0",
+    "stylelint": "^13.6.1",
+    "stylelint-config-standard": "^20.0.0"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"