Fix the following style-lint errors and warnings for `app/assets/stylesheets/framework/common.scss`
Problem
Fix the following style-lint errors and warnings for app/assets/stylesheets/framework/common.scss
65:1 ⚠ ".light" and ".cgray (app/assets/stylesheets/framework/common.scss -2:1)" have the same properties. stylelint-gitlab/duplicate-selectors
118:1 ⚠ ".block-truncated" has the same properties as our BS4 utility class ".text-truncate (1853:1)" so please use that instead. stylelint-gitlab/utility-classes
129:1 ⚠ ".item-title" and ".bold (app/assets/stylesheets/framework/common.scss -75:1)" have the same properties. stylelint-gitlab/duplicate-selectors
174:5 ⚠ "li" has the same properties as our BS4 utility class ".border-bottom-0 (113:1)" so please use that instead. stylelint-gitlab/utility-classes
181:3 ⚠ "img" and "img (app/assets/stylesheets/framework/common.scss -171:3)" have the same properties. stylelint-gitlab/duplicate-selectors
186:1 ⚠ Selector should be written in lowercase with hyphens selector-class-pattern
208:1 ⚠ Selector should be written in lowercase with hyphens selector-class-pattern
249:3 ⚠ Expected a placeholder selector (e.g. %placeholder) to be used in @extend scss/at-extend-no-missing-placeholder
250:3 ⚠ Expected a placeholder selector (e.g. %placeholder) to be used in @extend scss/at-extend-no-missing-placeholder
270:1 ⚠ Selector should be written in lowercase with hyphens selector-class-pattern
270:1 ⚠ ".search_box" and "&.centered (app/assets/stylesheets/framework/common.scss -216:3)" have the same properties. stylelint-gitlab/duplicate-selectors
271:3 ⚠ Expected a placeholder selector (e.g. %placeholder) to be used in @extend scss/at-extend-no-missing-placeholder
278:3 ⚠ Expected ".dropzone .dz-preview .dz-progress .dz-upload" to have no more than 3 compound selectors selector-max-compound-selectors
292:1 ⚠ ".alert" and ".card.card-body (app/assets/stylesheets/framework/common.scss -262:1)" have the same properties. stylelint-gitlab/duplicate-selectors
346:1 ⚠ ".break-word" and ".tooltip-inner (app/assets/stylesheets/framework/common.scss -336:3)" have the same properties. stylelint-gitlab/duplicate-selectors
354:5 ⚠ "label" and ".checkbox (app/assets/stylesheets/framework/common.scss -351:3)" have the same properties. stylelint-gitlab/duplicate-selectors
391:1 ⚠ ".append-right-10" and ".space-right (app/assets/stylesheets/framework/common.scss -288:1)" have the same properties. stylelint-gitlab/duplicate-selectors
392:1 ⚠ ".append-right-15" and "a (app/assets/stylesheets/framework/common.scss -257:3)" have the same properties. stylelint-gitlab/duplicate-selectors
400:1 ⚠ ".append-bottom-10" and ".description-block (app/assets/stylesheets/framework/common.scss -248:1)" have the same stylelint-gitlab/duplicate-selectors
properties.
402:1 ⚠ ".append-bottom-20" and ".footer-links (app/assets/stylesheets/framework/common.scss -254:1)" have the same properties. stylelint-gitlab/duplicate-selectors
403:1 ⚠ ".append-bottom-default" and ".alert (app/assets/stylesheets/framework/common.scss -292:1)" have the same properties. stylelint-gitlab/duplicate-selectors
406:1 ⚠ ".center" and ".search_box (app/assets/stylesheets/framework/common.scss -270:1)" have the same properties. stylelint-gitlab/duplicate-selectors
436:1 ⚠ ".h-3" and ".w-3 (app/assets/stylesheets/framework/common.scss -434:1)" have the same properties. stylelint-gitlab/duplicate-selectors
482:1 ⚠ ".cursor-pointer" and ".show-suppressed-diff, .show-all-commits (app/assets/stylesheets/framework/common.scss -191:1)" 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/framework/common.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