Fix the `selector-max-compound-selectors` style-lint errors and warnings for `app/assets/stylesheets/pages/notes.scss`
Problem
Fix the following style-lint errors and warnings for app/assets/stylesheets/pages/notes.scss
130:7 ⚠ Expected ".notes .replies-toggle .user-avatar-link:last-child img" to have no more than 3 compound selectors selector-max-compound-selectors
161:7 ⚠ Expected ".notes .discussion .timeline-discussion-body .note-body" to have no more than 3 compound selectors selector-max-compound-selectors
217:9 ⚠ Expected ".notes > li.is-editing .note-edit-form.current-note-edit-form + .note-awards" to have no more than 3 compound selectors selector-max-compound-selectors
227:7 ⚠ Expected ".notes > li .note-body .note-text" to have no more than 3 compound selectors selector-max-compound-selectors
233:7 ⚠ Expected ".notes > li .note-awards .js-awards-block" to have no more than 3 compound selectors selector-max-compound-selectors
240:9 ⚠ Expected ".notes > li .note-header .inline" to have no more than 3 compound selectors selector-max-compound-selectors
250:7 ⚠ Expected ".notes > li .note-emoji-button .fa-spinner" to have no more than 3 compound selectors selector-max-compound-selectors
255:9 ⚠ Expected ".notes > li .note-emoji-button.is-loading .fa-smile-o" to have no more than 3 compound selectors selector-max-compound-selectors
259:9 ⚠ Expected ".notes > li .note-emoji-button.is-loading .fa-spinner" to have no more than 3 compound selectors selector-max-compound-selectors
284:7 ⚠ Expected ".notes .system-note .system-note-message a" to have no more than 3 compound selectors selector-max-compound-selectors
288:7 ⚠ Expected ".notes .system-note .system-note-message p" to have no more than 3 compound selectors selector-max-compound-selectors
292:9 ⚠ Expected ".notes .system-note .system-note-message p::first-letter" to have no more than 3 compound selectors selector-max-compound-selectors
311:7 ⚠ Expected ".notes .system-note .note-body .system-note-commit-list-toggler" to have no more than 3 compound selectors selector-max-compound-selectors
318:9 ⚠ Expected ".notes .system-note .note-body .system-note-commit-list-toggler:hover" to have no more than 3 compound selectors selector-max-compound-selectors
324:7 ⚠ Expected ".notes .system-note .note-body .note-text" to have no more than 3 compound selectors selector-max-compound-selectors
325:9 ⚠ Expected ".notes .system-note .note-body .note-text p:first-child" to have no more than 3 compound selectors selector-max-compound-selectors
329:9 ⚠ Expected ".notes .system-note .note-body .note-text.system-note-commit-list:not(.hide-shade)" to have no more than 3 compound selectors selector-max-compound-selectors
334:11 ⚠ Expected ".notes .system-note .note-body .note-text.system-note-commit-list:not(.hide-shade) ul" to have no more than 3 compound selectors selector-max-compound-selectors
338:11 ⚠ Expected ".notes .system-note .note-body .note-text.system-note-commit-list:not(.hide-shade) p:first-child" to have no more than 3 compound selectors selector-max-compound-selectors
342:11 ⚠ Expected ".notes .system-note .note-body .note-text.system-note-commit-list:not(.hide-shade)::after" to have no more than 3 compound selectors selector-max-compound-selectors
369:7 ⚠ Expected ".notes .system-note .timeline-icon svg" to have no more than 3 compound selectors selector-max-compound-selectors
369:7 ⚠ Expected ".notes .discussion-filter-note .timeline-icon svg" to have no more than 3 compound selectors selector-max-compound-selectors
400:7 ⚠ Expected ".with-performance-bar .discussion-body .diff-file .file-title" to have no more than 3 compound selectors selector-max-compound-selectors
409:5 ⚠ Expected ".discussion-body .diff-file .file-title .btn-clipboard" to have no more than 3 compound selectors selector-max-compound-selectors
420:3 ⚠ Expected ".tab-pane.notes .diff-file .notes .system-note" to have no more than 3 compound selectors selector-max-compound-selectors
431:3 ⚠ Expected ".tab-pane.diffs .notes > .note-discussion li.note.system-note" to have no more than 3 compound selectors selector-max-compound-selectors
457:3 ⚠ Expected ".diff-file .notes_content .note-header .note-headline-light" to have no more than 3 compound selectors selector-max-compound-selectors
483:9 ⚠ Expected ".diff-file .notes_holder td.notes_content .notes" to have no more than 3 compound selectors selector-max-compound-selectors
487:9 ⚠ Expected ".diff-file .notes_holder td.notes_content a code" to have no more than 3 compound selectors selector-max-compound-selectors
873:7 ⚠ Expected ".files .diff-discussions .note-discussion.timeline-entry > .timeline-entry-inner" to have no more than 3 compound selectors selector-max-compound-selectors
876:9 ⚠ Expected ".files .diff-discussions .note-discussion.timeline-entry > .timeline-entry-inner > .timeline-content" to have no more than 3 compound selectors selector-max-compound-selectors
880:9 ⚠ Expected ".files .diff-discussions .note-discussion.timeline-entry > .timeline-entry-inner > .timeline-icon" to have no more than 3 compound selectors selector-max-compound-selectors
885:7 ⚠ Expected ".files .diff-discussions .note-discussion.timeline-entry .discussion-body" to have no more than 3 compound selectors selector-max-compound-selectors
888:9 ⚠ Expected ".files .diff-discussions .note-discussion.timeline-entry .discussion-body .discussion-wrapper" to have no more than 3 compound selectors selector-max-compound-selectors
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/notes.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 Denys Mishunov