Fix the following style-lint errors and warnings for `app/assets/stylesheets/framework/selects.scss`
Problem
Fix the following style-lint errors and warnings for app/assets/stylesheets/framework/selects.scss
2:1 ⚠ ".select2-container" has the same properties as our BS4 utility class ".w-100 (834:1)" so please use that instead. stylelint-gitlab/utility-classes
30:7 ⚠ Expected ".select2-container .select2-choice .select2-arrow b" to have no more than 3 compound selectors selector-max-compound-selectors
30:7 ⚠ Expected ".select2-container.select2-drop-above .select2-choice .select2-arrow b" to have no more than 3 compound selectors selector-max-compound-selectors
62:5 ⚠ "~ .invalid-feedback" and "&.input-md, &.input-lg (/Users/filipalacerda/Documents/git/gitlab-development-kit/gitlab/app/assets/stylesheets/framework/selects.scss -5:3)" have the same stylelint-gitlab/duplicate-selectors
properties.
120:5 ⚠ Expected ".select2-container-multi .select2-choices .select2-search-field input" to have no more than 3 compound selectors selector-max-compound-selectors
137:7 ⚠ Expected ".select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close" to have no more than 3 compound selectors selector-max-compound-selectors
162:3 ⚠ ".select2-drop-auto-width &" and ".select2-search (/Users/filipalacerda/Documents/git/gitlab-development-kit/gitlab/app/assets/stylesheets/framework/selects.scss -159:1)" have the same stylelint-gitlab/duplicate-selectors
properties.
268:3 ⚠ ".project-name" and ".group-name (/Users/filipalacerda/Documents/git/gitlab-development-kit/gitlab/app/assets/stylesheets/framework/selects.scss -258:3)" have the same properties. stylelint-gitlab/duplicate-selectors
272:3 ⚠ ".project-path" and ".group-path (/Users/filipalacerda/Documents/git/gitlab-development-kit/gitlab/app/assets/stylesheets/framework/selects.scss -262:3)" have the same properties. stylelint-gitlab/duplicate-selectors
282:3 ⚠ ".user-image" and ".group-image (/Users/filipalacerda/Documents/git/gitlab-development-kit/gitlab/app/assets/stylesheets/framework/selects.scss -254:3)" 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/selects.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