Fix the following style-lint errors and warnings for `app/assets/stylesheets/components/related_items_list.scss`
Problem
Fix the following style-lint errors and warnings for app/assets/stylesheets/components/related_items_list.scss
80:7 ⚠ Expected ".item-body .item-meta .item-meta-child .item-due-date" to have no more than 3 compound selectors selector-max-compound-selectors
80:7 ⚠ Expected ".item-body .item-meta .item-meta-child .item-weight" to have no more than 3 compound selectors selector-max-compound-selectors
85:7 ⚠ Expected ".item-body .item-meta .item-meta-child .item-milestone" to have no more than 3 compound selectors selector-max-compound-selectors
85:7 ⚠ Expected ".item-body .item-meta .item-meta-child .item-weight" to have no more than 3 compound selectors selector-max-compound-selectors
90:7 ⚠ Expected ".item-body .item-meta .item-meta-child .item-milestone" to have no more than 3 compound selectors selector-max-compound-selectors
95:7 ⚠ Expected ".item-body .item-meta .item-meta-child .item-due-date" to have no more than 3 compound selectors selector-max-compound-selectors
99:7 ⚠ Expected ".item-body .item-meta .item-meta-child .item-weight" to have no more than 3 compound selectors selector-max-compound-selectors
105:5 ⚠ Expected ".item-body .item-meta .item-path-id .path-id-text" to have no more than 3 compound selectors selector-max-compound-selectors
105:5 ⚠ Expected ".item-body .item-meta .item-milestone .milestone-title" to have no more than 3 compound selectors selector-max-compound-selectors
105:5 ⚠ Expected ".item-body .item-meta .item-weight .board-card-info-text" to have no more than 3 compound selectors selector-max-compound-selectors
121:7 ⚠ Expected ".item-body .item-meta .item-path-id .path-id-text" to have no more than 3 compound selectors selector-max-compound-selectors
126:7 ⚠ Expected ".item-body .item-meta .item-path-id .issue-token-state-icon-open" to have no more than 3 compound selectors selector-max-compound-selectors
126:7 ⚠ Expected ".item-body .item-meta .item-path-id .issue-token-state-icon-closed" to have no more than 3 compound selectors selector-max-compound-selectors
136:5 ⚠ Expected ".item-body .item-meta .item-milestone .ic-clock" to have no more than 3 compound selectors selector-max-compound-selectors
147:7 ⚠ Expected ".item-body .item-meta .item-assignees .user-avatar-link" to have no more than 3 compound selectors selector-max-compound-selectors
150:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
150:9 ⚠ Expected ".item-body .item-meta .item-assignees .user-avatar-link:nth-of-type(1)" to have no more than 3 compound selectors selector-max-compound-selectors
154:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
154:9 ⚠ Expected ".item-body .item-meta .item-assignees .user-avatar-link:nth-of-type(2)" to have no more than 3 compound selectors selector-max-compound-selectors
158:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
158:9 ⚠ Expected ".item-body .item-meta .item-assignees .user-avatar-link:last-child" to have no more than 3 compound selectors selector-max-compound-selectors
163:7 ⚠ Expected ".item-body .item-meta .item-assignees .avatar" to have no more than 3 compound selectors selector-max-compound-selectors
170:7 ⚠ Expected ".item-body .item-meta .item-assignees .avatar-counter" to have no more than 3 compound selectors selector-max-compound-selectors
205:7 ⚠ Expected ".item-body .item-contents .item-title .mr-title-link" to have no more than 3 compound selectors selector-max-compound-selectors
205:7 ⚠ Expected ".item-body .item-contents .item-title .sortable-link" to have no more than 3 compound selectors selector-max-compound-selectors
227:9 ⚠ Expected ".item-body .item-contents .item-title .mr-title-link" to have no more than 3 compound selectors selector-max-compound-selectors
227:9 ⚠ Expected ".item-body .item-contents .item-title .sortable-link" to have no more than 3 compound selectors selector-max-compound-selectors
237:9 ⚠ Expected ".item-body .item-contents .item-meta .item-path-id" to have no more than 3 compound selectors selector-max-compound-selectors
242:9 ⚠ Expected ".item-body .item-contents .item-meta .item-meta-child" to have no more than 3 compound selectors selector-max-compound-selectors
247:11 ⚠ Expected ".item-body .item-contents .item-meta .item-meta-child ~ .item-assignees" to have no more than 3 compound selectors selector-max-compound-selectors
252:9 ⚠ Expected ".item-body .item-contents .item-meta .item-assignees" to have no more than 3 compound selectors selector-max-compound-selectors
279:5 ⚠ ".issue-token-state-icon-open, .issue-token-state-icon-closed" and ".issue-token-state-icon-open, .issue-token-state-icon-closed stylelint-gitlab/duplicate-selectors
(app/assets/stylesheets/components/related_items_list.scss -37:3)" have the same properties.
304:9 ⚠ Expected ".item-body .item-contents .item-title .mr-title-link" to have no more than 3 compound selectors selector-max-compound-selectors
304:9 ⚠ Expected ".item-body .item-contents .item-title .sortable-link" to have no more than 3 compound selectors selector-max-compound-selectors
313:9 ⚠ Expected ".item-body .item-contents .item-title .issue-token-state-icon-open" to have no more than 3 compound selectors selector-max-compound-selectors
313:9 ⚠ Expected ".item-body .item-contents .item-title .issue-token-state-icon-closed" to have no more than 3 compound selectors selector-max-compound-selectors
319:9 ⚠ Expected ".item-body .item-contents .item-title .confidential-icon" to have no more than 3 compound selectors selector-max-compound-selectors
331:9 ⚠ Expected ".item-body .item-contents .item-meta .item-path-id" to have no more than 3 compound selectors selector-max-compound-selectors
337:11 ⚠ Expected ".item-body .item-contents .item-meta .item-path-id .issue-token-state-icon-open" to have no more than 3 compound selectors selector-max-compound-selectors
337:11 ⚠ Expected ".item-body .item-contents .item-meta .item-path-id .issue-token-state-icon-closed" to have no more than 3 compound selectors selector-max-compound-selectors
337:11 ⚠ ".issue-token-state-icon-open, .issue-token-state-icon-closed" and ".issue-token-state-icon-open, .issue-token-state-icon-closed stylelint-gitlab/duplicate-selectors
(app/assets/stylesheets/components/related_items_list.scss -61:5)" have the same properties.
343:9 ⚠ Expected ".item-body .item-contents .item-meta .item-meta-child" to have no more than 3 compound selectors selector-max-compound-selectors
348:9 ⚠ Expected ".item-body .item-contents .item-meta .item-assignees" to have no more than 3 compound selectors selector-max-compound-selectors
353:11 ⚠ Expected ".item-body .item-contents .item-meta .item-assignees .avatar" to have no more than 3 compound selectors selector-max-compound-selectors
358:11 ⚠ Expected ".item-body .item-contents .item-meta .item-assignees .avatar-counter" to have no more than 3 compound selectors selector-max-compound-selectorsWhat 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/components/related_items_list.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
Edited by Filipa Lacerda