Fix the following style-lint errors and warnings for `app/assets/stylesheets/pages/todos.scss`
Problem
Fix the following style-lint errors and warnings for app/assets/stylesheets/pages/todos.scss
116:7 ⚠ Expected ".todo-item .todo-body .todo-note .md" to have no more than 3 compound selectors selector-max-compound-selectors
120:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
120:9 ⚠ Expected ".todo-item .todo-body .todo-note .md .badge.badge-pill" to have no more than 3 compound selectors selector-max-compound-selectors
124:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
124:9 ⚠ Expected ".todo-item .todo-body .todo-note .md p" to have no more than 3 compound selectors selector-max-compound-selectors
124:9 ⚠ "p" and ".badge.badge-pill (app/assets/stylesheets/pages/todos.scss -120:9)" have the same properties. stylelint-gitlab/duplicate-selectors
129:7 ⚠ Expected ".todo-item .todo-body .todo-note code" to have no more than 3 compound selectors selector-max-compound-selectors
133:7 ⚠ Expected ".todo-item .todo-body .todo-note pre" to have no more than 3 compound selectors selector-max-compound-selectors
142:7 ⚠ Expected ".todo-item .todo-body .todo-note .note-image-attach" to have no more than 3 compound selectors selector-max-compound-selectors
149:7 ⚠ Expected ".todo-item .todo-body .todo-note p:last-child" to have no more than 3 compound selectors selector-max-compound-selectors
205:5 ⚠ ".filter-categories" and ".dropdown-menu-toggle-sort (app/assets/stylesheets/pages/todos.scss -162:5)" have the same stylelint-gitlab/duplicate-selectors
properties.
What to do
- If possible, replace the CSS class with a utility one, check common.scss and https://getbootstrap.com/docs/4.3/utilities/ for existing ones
- Double check if all the warning have been fixed by running
yarn run stylelint-file app/assets/stylesheets/pages/todos.scss
- In the MR, add screenshots of the affected areas before and after the changes, check the first MR as a guideline
- If there are a lot of changes, we recommend to break them into smaller MRs
- Double check the usage of each changed class both in CE and EE
- EE changes should either be backported into CE or moved into
ee/
folder. You can read more about how to handle EE code here - Label the MR with CSS cleanup