You need to sign in or sign up before continuing.
Fix the following style-lint errors and warnings for `app/assets/stylesheets/pages/diff.scss`
Problem
Fix the following style-lint errors and warnings for app/assets/stylesheets/pages/diff.scss
72:5 ⚠ ".unfold" and ".file-title, .file-title-flex-parent (app/assets/stylesheets/pages/diff.scss -5:3)" have the same stylelint-gitlab/duplicate-selectors
properties.
86:7 ⚠ Expected ".diff-file .diff-content .suppressed-container .show-suppressed-diff" to have no more than 3 compound selectors selector-max-compound-selectors
112:7 ⚠ Expected ".diff-file .image .frame img" to have no more than 3 compound selectors selector-max-compound-selectors
149:7 ⚠ Expected ".diff-file .image .view.swipe .swipe-frame" to have no more than 3 compound selectors selector-max-compound-selectors
155:7 ⚠ Expected ".diff-file .image .view.swipe .swipe-wrap" to have no more than 3 compound selectors selector-max-compound-selectors
164:7 ⚠ Expected ".diff-file .image .view.swipe .swipe-bar" to have no more than 3 compound selectors selector-max-compound-selectors
172:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
172:9 ⚠ Expected ".diff-file .image .view.swipe .swipe-bar:hover" to have no more than 3 compound selectors selector-max-compound-selectors
173:11 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
173:11 ⚠ Expected ".diff-file .image .view.swipe .swipe-bar:hover .top-handle" to have no more than 3 compound selectors selector-max-compound-selectors
177:11 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
177:11 ⚠ Expected ".diff-file .image .view.swipe .swipe-bar:hover .bottom-handle" to have no more than 3 compound selectors selector-max-compound-selectors
182:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
182:9 ⚠ Expected ".diff-file .image .view.swipe .swipe-bar .top-handle" to have no more than 3 compound selectors selector-max-compound-selectors
191:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
191:9 ⚠ Expected ".diff-file .image .view.swipe .swipe-bar .bottom-handle" to have no more than 3 compound selectors selector-max-compound-selectors
203:7 ⚠ Expected ".diff-file .image .view.onion-skin .onion-skin-frame" to have no more than 3 compound selectors selector-max-compound-selectors
203:7 ⚠ ".onion-skin-frame" and ".swipe-frame (app/assets/stylesheets/pages/diff.scss -149:7)" have the same properties. stylelint-gitlab/duplicate-selectors
209:7 ⚠ Expected ".diff-file .image .view.onion-skin .frame.added" to have no more than 3 compound selectors selector-max-compound-selectors
209:7 ⚠ Expected ".diff-file .image .view.onion-skin .frame.deleted" to have no more than 3 compound selectors selector-max-compound-selectors
217:7 ⚠ Expected ".diff-file .image .view.onion-skin .controls" to have no more than 3 compound selectors selector-max-compound-selectors
227:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
227:9 ⚠ Expected ".diff-file .image .view.onion-skin .controls .drag-track" to have no more than 3 compound selectors selector-max-compound-selectors
237:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
237:9 ⚠ Expected ".diff-file .image .view.onion-skin .controls .dragger" to have no more than 3 compound selectors selector-max-compound-selectors
248:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
248:9 ⚠ Expected ".diff-file .image .view.onion-skin .controls .transparent" to have no more than 3 compound selectors selector-max-compound-selectors
258:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
258:9 ⚠ Expected ".diff-file .image .view.onion-skin .controls .opaque" to have no more than 3 compound selectors selector-max-compound-selectors
303:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
327:7 ⚠ Expected ".diff-file .diff-file-container .swipe.view .swipe-wrap" to have no more than 3 compound selectors selector-max-compound-selectors
327:7 ⚠ Expected ".diff-file .diff-file-container .onion-skin.view .swipe-wrap" to have no more than 3 compound selectors selector-max-compound-selectors
332:7 ⚠ Expected ".diff-file .diff-file-container .swipe.view .frame.deleted" to have no more than 3 compound selectors selector-max-compound-selectors
332:7 ⚠ Expected ".diff-file .diff-file-container .onion-skin.view .frame.deleted" to have no more than 3 compound selectors selector-max-compound-selectors
337:7 ⚠ Expected ".diff-file .diff-file-container .swipe.view .swipe-bar" to have no more than 3 compound selectors selector-max-compound-selectors
337:7 ⚠ Expected ".diff-file .diff-file-container .onion-skin.view .swipe-bar" to have no more than 3 compound selectors selector-max-compound-selectors
340:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
340:9 ⚠ Expected ".diff-file .diff-file-container .swipe.view .swipe-bar .top-handle" to have no more than 3 compound selectors selector-max-compound-selectors
340:9 ⚠ Expected ".diff-file .diff-file-container .onion-skin.view .swipe-bar .top-handle" to have no more than 3 compound selectors selector-max-compound-selectors
345:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
345:9 ⚠ Expected ".diff-file .diff-file-container .swipe.view .swipe-bar .bottom-handle" to have no more than 3 compound selectors selector-max-compound-selectors
345:9 ⚠ Expected ".diff-file .diff-file-container .onion-skin.view .swipe-bar .bottom-handle" to have no more than 3 compound selectors selector-max-compound-selectors
351:7 ⚠ Expected ".diff-file .diff-file-container .swipe.view .file-container" to have no more than 3 compound selectors selector-max-compound-selectors
351:7 ⚠ Expected ".diff-file .diff-file-container .onion-skin.view .file-container" to have no more than 3 compound selectors selector-max-compound-selectors
351:7 ⚠ ".file-container" and ".wrap (app/assets/stylesheets/pages/diff.scss -103:5)" have the same properties. stylelint-gitlab/duplicate-selectors
354:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
354:9 ⚠ Expected ".diff-file .diff-file-container .swipe.view .file-container .file-content" to have no more than 3 compound selectors selector-max-compound-selectors
354:9 ⚠ Expected ".diff-file .diff-file-container .onion-skin.view .file-container .file-content" to have no more than 3 compound selectors selector-max-compound-selectors
357:11 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
357:11 ⚠ Expected ".diff-file .diff-file-container .swipe.view .file-container .file-content img" to have no more than 3 compound selectors selector-max-compound-selectors
357:11 ⚠ Expected ".diff-file .diff-file-container .onion-skin.view .file-container .file-content img" to have no more than 3 compound selectors selector-max-compound-selectors
364:5 ⚠ Expected ".diff-file .diff-file-container .onion-skin.view .controls" to have no more than 3 compound selectors selector-max-compound-selectors
385:5 ⚠ Selector should be written in lowercase with hyphens selector-class-pattern
390:5 ⚠ Expected "table.code tr.line_holder td span" to have no more than 3 compound selectors selector-max-compound-selectors
393:7 ⚠ Expected "table.code tr.line_holder td span.context-cell" to have no more than 3 compound selectors selector-max-compound-selectors
399:7 ⚠ Expected "table.code tr.line_holder td span.line" to have no more than 3 compound selectors selector-max-compound-selectors
414:7 ⚠ Expected "table.code tr.line_holder td.diff-line-num a" to have no more than 3 compound selectors selector-max-compound-selectors
420:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
420:9 ⚠ Expected "table.code tr.line_holder td.diff-line-num a[disabled]" to have no more than 3 compound selectors selector-max-compound-selectors
423:11 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
423:11 ⚠ Expected "table.code tr.line_holder td.diff-line-num a[disabled]:hover" to have no more than 3 compound selectors selector-max-compound-selectors
423:11 ⚠ Expected "table.code tr.line_holder td.diff-line-num a[disabled]:active" to have no more than 3 compound selectors selector-max-compound-selectors
430:7 ⚠ Expected "table.code tr.line_holder td.diff-line-num:not(.js-unfold-bottom) a::before" to have no more than 3 compound selectors selector-max-compound-selectors
435:6 ⚠ Selector should be written in lowercase with hyphens selector-class-pattern
447:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
447:9 ⚠ Expected "table.code tr.line_holder td.line_content.parallel span" to have no more than 3 compound selectors selector-max-compound-selectors
453:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
461:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
471:7 ⚠ Selector should be written in lowercase with hyphens selector-class-pattern
477:5 ⚠ "td.line_content.parallel.left-side" and "td.line_content.parallel.right-side (app/assets/stylesheets/pages/diff.scss stylelint-gitlab/duplicate-selectors
-471:5)" have the same properties.
477:7 ⚠ Selector should be written in lowercase with hyphens selector-class-pattern
507:1 ⚠ ".diff-wrap-lines .line_content" and "span (app/assets/stylesheets/pages/diff.scss -390:5)" have the same properties. stylelint-gitlab/duplicate-selectors
507:18 ⚠ Selector should be written in lowercase with hyphens selector-class-pattern
519:37 ⚠ Selector should be written in lowercase with hyphens selector-class-pattern
548:5 ⚠ ".file-mode" and "&.disabled (app/assets/stylesheets/pages/diff.scss -308:7)" have the same properties. stylelint-gitlab/duplicate-selectors
596:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
597:11 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
603:11 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
646:3 ⚠ Expected a placeholder selector (e.g. %placeholder) to be used in @extend scss/at-extend-no-missing-placeholder
707:7 ⚠ ".diff-stats-additions-deletions-expanded, .inline-parallel-buttons" has the same properties as our BS4 utility class ".d-none (176:1)" so please use that instead. stylelint-gitlab/utility-classes
716:7 ⚠ ".diff-stats-additions-deletions-collapsed" has the same properties as our BS4 utility class ".d-block (185:1)" so please use that instead. stylelint-gitlab/utility-classes
757:3 ⚠ ".diff-changed-file-name, .diff-changed-blank-file-name" has the same properties as our BS4 utility class ".text-truncate (1853:1)" so please use that instead. stylelint-gitlab/utility-classes
835:3 ⚠ ".notes" and ".view.swipe (app/assets/stylesheets/pages/diff.scss -146:5)" have the same properties. stylelint-gitlab/duplicate-selectors
852:3 ⚠ Expected ".notes.active .diff-file .note-container > .new-note" to have no more than 3 compound selectors selector-max-compound-selectors
932:3 ⚠ "> svg" and "svg (app/assets/stylesheets/pages/diff.scss -890:5)" have the same properties. stylelint-gitlab/duplicate-selectors
938:1 ⚠ ".image-diff-avatar-link, .user-avatar-link" and ".notes (app/assets/stylesheets/pages/diff.scss -835:3)" have the same stylelint-gitlab/duplicate-selectors
properties.
965:5 ⚠ ".diff-notes-collapse, .note, .discussion-reply-holder" and ".file-mode (app/assets/stylesheets/pages/diff.scss stylelint-gitlab/duplicate-selectors
-548:5)" have the same properties.
977:1 ⚠ ".discussion-body .image .frame" and ".image-diff-avatar-link, .user-avatar-link (app/assets/stylesheets/pages/diff.scss stylelint-gitlab/duplicate-selectors
-938:1)" have the same properties.
1075:1 ⚠ ".image-diff-overlay, .image-diff-overlay-add-comment" and ".swipe-wrap (app/assets/stylesheets/pages/diff.scss -327:7)" stylelint-gitlab/duplicate-selectors
have the same 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/diff.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