Enable DeclarationOrder in scss-lint
What does this MR do?
- Enables
DeclarationOrder
in scss-lint. - Fixes all
DeclarationOrder
violations.-
@include
s - properties violations: 13 (out of 172 (*1)) - properties - nested rule sets violations: 2 (out of too many cases)
-
@extend
s - properties violations: 1 (out of 54)
-
- Fixes a tiny typo in comments in
.scss-lint.yml
.
Notes
(*1): Counted with the following command:
git grep -B1 '^ *@include' -- app/assets/stylesheets/**/*.scss | grep -c '^--$'
The rule
This rules the order of these 5 declarations as follows:
-
@extend
declarations -
@include
declarations without inner@content
- properties
-
@include
declarations with inner@content
- nested rule sets
Are there points in the code the reviewer needs to double check?
No.
Note: @include
s - properties violations ratio is 7.6% (13 out of 172), which may be relatively high.
Why was this MR needed?
To improve SCSS maintainability and consistency.
Does this MR meet the acceptance criteria?
-
Changelog entry added, if necessary - [n/a] Documentation created/updated
- [n/a] API support added
- Tests
-
Added for this feature/bug -
All builds are passing
-
-
Conform by the merge request performance guides -
Conform by the style guides -
Branch has no merge conflicts with master
(if it does - rebase it please) -
Squashed related commits together
What are the relevant issue numbers?
Part of #23485 (moved)
Edited by Takuya Noguchi