Stylelint SCSS linter (#1766)

* Added stylelint fixed stylelint issues * Added CHANGELOG.md
cvat-ai · Jun 24, 2020 · fefcb51 · fefcb51
1 parent 2b55700
commit fefcb51
Show file tree

Hide file tree

Showing 19 changed files with 152 additions and 112 deletions.
diff --git a/.stylelintrc.json b/.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"]
+        }]
+    }
+
+}
diff --git a/CHANGELOG.md b/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>)

diff --git a/CONTRIBUTING.md b/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)

diff --git a/cvat-canvas/src/scss/canvas.scss b/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;
+    }
 }
diff --git a/cvat-ui/src/base.scss b/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;
diff --git a/cvat-ui/src/components/actions-menu/styles.scss b/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%;
 

diff --git a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/styles.scss b/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 {