Fix the following style-lint errors and warnings for `app/assets/stylesheets/framework/files.scss`
Problem
Fix the following style-lint errors and warnings for app/assets/stylesheets/framework/files.scss
53:7 ⚠ Expected ".file-holder .file-title .file-actions .btn" to have no more than 3 compound selectors selector-max-compound-selectors
110:6 ⚠ Selector should be written in lowercase with hyphens selector-class-pattern
148:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
157:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
161:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
165:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
172:11 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
172:11 ⚠ Expected ".file-holder .file-content.blame td.blame-commit .commit-row-title" to have no more than 3 compound selectors selector-max-compound-selectors
176:11 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
176:11 ⚠ Expected ".file-holder .file-content.blame td.blame-commit .item-title" 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
186:11 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
186:11 ⚠ Expected ".file-holder .file-content.blame td.line-numbers i" to have no more than 3 compound selectors selector-max-compound-selectors
192:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
198:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
204:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
222:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
222:9 ⚠ Expected ".file-holder .file-content.logs ol li" to have no more than 3 compound selectors selector-max-compound-selectors
225:11 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
225:11 ⚠ Expected ".file-holder .file-content.logs ol li p" to have no more than 3 compound selectors selector-max-compound-selectors
232:11 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
232:11 ⚠ Expected ".file-holder .file-content.logs ol li:hover" to have no more than 3 compound selectors selector-max-compound-selectors
242:5 ⚠ "&.code" and "&.lines (/Users/filipalacerda/Documents/git/gitlab-development-kit/gitlab/app/assets/stylesheets/framework/files.scss -192:9)" have the same properties. stylelint-gitlab/duplicate-selectors
253:7 ⚠ Expected ".file-holder .file-content .list-inline.previews .preview" to have no more than 3 compound selectors selector-max-compound-selectors
253:7 ⚠ ".preview" and "&.md (/Users/filipalacerda/Documents/git/gitlab-development-kit/gitlab/app/assets/stylesheets/framework/files.scss -122:5)" have the same properties. stylelint-gitlab/duplicate-selectors
311:5 ⚠ ".new-file" and "a (/Users/filipalacerda/Documents/git/gitlab-development-kit/gitlab/app/assets/stylesheets/framework/files.scss -285:5)" have the same properties. stylelint-gitlab/duplicate-selectors
360:3 ⚠ "a" and "a (/Users/filipalacerda/Documents/git/gitlab-development-kit/gitlab/app/assets/stylesheets/framework/files.scss -303:5)" have the same properties. stylelint-gitlab/duplicate-selectors
430:7 ⚠ Expected ".preview-container .file-container .file-content img" to have no more than 3 compound selectors selector-max-compound-selectors
435:7 ⚠ Expected ".preview-container .file-container .file-content .is-zoomable" to have no more than 3 compound selectors selector-max-compound-selectors
439:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
439:9 ⚠ Expected ".preview-container .file-container .file-content .is-zoomable.is-zoomed" to have no more than 3 compound selectors selector-max-compound-selectors
455:3 ⚠ ".md-previewer" and ".preview (/Users/filipalacerda/Documents/git/gitlab-development-kit/gitlab/app/assets/stylesheets/framework/files.scss -253:7)" have the same properties. stylelint-gitlab/duplicate-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/framework/files.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