Enable DeclarationOrder in scss-lint

.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.

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 {

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%;

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

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;

app/assets/stylesheets/pages/commits.scss

@@ -250,8 +250,8 @@
     }
 
     .committed_ago {
-      float: right;
       @extend .cgray;
+      float: right;
     }
   }
 }

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;

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 {

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;

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 {

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 {

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

changelogs/unreleased/enable-scss-lint-declaration-order.yml

@@ -0,0 +1,4 @@
+---
+title: Enable DeclarationOrder in scss-lint
+merge_request: 12805
+author: Takuya Noguchi