Enable DeclarationOrder in scss-lint

13 files changed, 29 insertions, 23 deletions

diff --git a/.scss-lint.yml b/.scss-lint.yml
index db234ad739c..389682af3dd 100644
--- a/.scss-lint.yml
+++ b/.scss-lint.yml
@@ -43,10 +43,11 @@ linters:
   # Rule sets should be ordered as follows:
   # - @extend declarations
   # - @include declarations without inner @content
-  # - properties, @include declarations with inner @content
+  # - properties
+  # - @include declarations with inner @content
   # - nested rule sets.
   DeclarationOrder:
-    enabled: false
+    enabled: true
 
   # `scss-lint:disable` control comments should be preceded by a comment
   # explaining why these linters are being disabled for this file.
diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss
index 19166757e64..72647e3b5e7 100644
--- a/app/assets/stylesheets/framework/awards.scss
+++ b/app/assets/stylesheets/framework/awards.scss
@@ -231,11 +231,11 @@
 
   .award-control-icon-positive,
   .award-control-icon-super-positive {
+    @include transition(opacity, transform);
     position: absolute;
     left: 10px;
     bottom: 6px;
     opacity: 0;
-    @include transition(opacity, transform);
   }
 
   .award-control-text {
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index dc4ed42544f..9400127757d 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -35,8 +35,8 @@
 .open {
   .dropdown-menu,
   .dropdown-menu-nav {
-    display: block;
     @include set-visible;
+    display: block;
 
     @media (max-width: $screen-xs-max) {
       width: 100%;
@@ -184,6 +184,7 @@
 
 .dropdown-menu,
 .dropdown-menu-nav {
+  @include set-invisible;
   display: block;
   position: absolute;
   width: 100%;
@@ -200,7 +201,6 @@
   border: 1px solid $dropdown-border-color;
   border-radius: $border-radius-base;
   box-shadow: 0 2px 4px $dropdown-shadow-color;
-  @include set-invisible;
 
   @media (max-width: $screen-sm-min) {
     width: 100%;
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index b21bcc22a87..a2de4598167 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -165,8 +165,8 @@
 
   .cur {
     .avatar {
-      border: 1px solid $white-light;
       @include disableAllAnimation;
+      border: 1px solid $white-light;
     }
   }
 
diff --git a/app/assets/stylesheets/framework/responsive-tables.scss b/app/assets/stylesheets/framework/responsive-tables.scss
index d2c90908baa..8e653c443cf 100644
--- a/app/assets/stylesheets/framework/responsive-tables.scss
+++ b/app/assets/stylesheets/framework/responsive-tables.scss
@@ -100,9 +100,9 @@
 }
 
 .table-mobile-header {
+  @include flex-max-width(40);
   color: $gl-text-color-secondary;
   text-align: left;
-  @include flex-max-width(40);
 
   @media (min-width: $screen-md-min) {
     display: none;
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index 9db0f2075cb..a5e4c3311f8 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -250,8 +250,8 @@
     }
 
     .committed_ago {
-      float: right;
       @extend .cgray;
+      float: right;
     }
   }
 }
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index 3039732ca5b..eeb90759f10 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -24,9 +24,9 @@
 
   .col-headers {
     ul {
+      @include clearfix;
       margin: 0;
       padding: 0;
-      @include clearfix;
     }
 
     li {
@@ -189,8 +189,8 @@
     }
 
     li {
-      list-style-type: none;
       @include clearfix;
+      list-style-type: none;
     }
 
     .stage-nav-item {
@@ -281,11 +281,11 @@
   }
 
   .stage-event-item {
+    @include clearfix;
     list-style-type: none;
     padding: 0 0 $gl-padding;
     margin: 0 $gl-padding $gl-padding;
     border-bottom: 1px solid $gray-darker;
-    @include clearfix;
 
     &:last-child {
       border-bottom: none;
@@ -307,9 +307,9 @@
       &.issue-title,
       &.commit-title,
       &.merge-merquest-title {
+        @include text-overflow();
         max-width: 100%;
         display: block;
-        @include text-overflow();
 
         a {
           color: $gl-text-color;
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 55011e8a21b..398fd4444ea 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -91,6 +91,7 @@
 
     .old_line,
     .new_line {
+      @include user-select(none);
       margin: 0;
       border: none;
       padding: 0 5px;
@@ -99,7 +100,6 @@
       min-width: 35px;
       max-width: 50px;
       width: 35px;
-      @include user-select(none);
 
       a {
         float: left;
@@ -354,12 +354,12 @@
       }
 
       &.active {
+        cursor: default;
+        color: $gl-text-color;
+
         &:hover {
           text-decoration: none;
         }
-
-        cursor: default;
-        color: $gl-text-color;
       }
 
       &.disabled {
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 303425041df..3039f824fb4 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -121,10 +121,11 @@ ul.notes {
       overflow-y: hidden;
 
       .note-text {
-        word-wrap: break-word;
         @include md-typography;
         // Reset ul style types since we're nested inside a ul already
         @include bulleted-list;
+        word-wrap: break-word;
+
         ul.task-list {
           ul:not(.task-list) {
             padding-left: 1.3em;
diff --git a/app/assets/stylesheets/pages/pipeline_schedules.scss b/app/assets/stylesheets/pages/pipeline_schedules.scss
index dc719a6ba94..a05efd8398d 100644
--- a/app/assets/stylesheets/pages/pipeline_schedules.scss
+++ b/app/assets/stylesheets/pages/pipeline_schedules.scss
@@ -137,6 +137,7 @@
 }
 
 .pipeline-variable-row-remove-button {
+  @include transition(color);
   flex-shrink: 0;
   display: flex;
   justify-content: center;
@@ -147,7 +148,6 @@
   background: transparent;
   border: 0;
   color: $gl-text-color-secondary;
-  @include transition(color);
 
   &:hover,
   &:focus {
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 7d7c34115f9..74d4ae43ebe 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -587,9 +587,9 @@ pre.light-well {
   }
 
   .project-row {
+    @include basic-list-stats;
     display: flex;
     align-items: center;
-    @include basic-list-stats;
   }
 
   h3 {
diff --git a/app/assets/stylesheets/pages/ui_dev_kit.scss b/app/assets/stylesheets/pages/ui_dev_kit.scss
index 8c87bc3cafd..798e060a261 100644
--- a/app/assets/stylesheets/pages/ui_dev_kit.scss
+++ b/app/assets/stylesheets/pages/ui_dev_kit.scss
@@ -5,13 +5,13 @@
   }
 
   .example {
+    padding: 15px;
+    border: 1px dashed $ui-dev-kit-example-border;
+    margin-bottom: 15px;
+
     &::before {
       content: "Example";
       color: $ui-dev-kit-example-color;
     }
-
-    padding: 15px;
-    border: 1px dashed $ui-dev-kit-example-border;
-    margin-bottom: 15px;
   }
 }
diff --git a/changelogs/unreleased/enable-scss-lint-declaration-order.yml b/changelogs/unreleased/enable-scss-lint-declaration-order.yml
new file mode 100644
index 00000000000..7ac2f55592e
--- /dev/null
+++ b/changelogs/unreleased/enable-scss-lint-declaration-order.yml
@@ -0,0 +1,4 @@
+---
+title: Enable DeclarationOrder in scss-lint
+merge_request: 12805
+author: Takuya Noguchi