Fix the following style-lint errors and warnings for `app/assets/stylesheets/pages/events.scss`
Problem
Fix the following style-lint errors and warnings for app/assets/stylesheets/pages/events.scss
23:5 ⚠ "svg" and "svg (/Users/filipalacerda/Documents/git/gitlab-development-kit/gitlab/app/assets/stylesheets/pages/events.scss -17:5)" have the same properties. stylelint-gitlab/duplicate-selectors
53:5 ⚠ Selector should be written in lowercase with hyphens selector-class-pattern
54:7 ⚠ Expected ".event-item .event-user-info .author_name a" to have no more than 3 compound selectors selector-max-compound-selectors
77:7 ⚠ Expected ".event-item .event-body .event-note .md" to have no more than 3 compound selectors selector-max-compound-selectors
80:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
80:9 ⚠ Expected ".event-item .event-body .event-note .md .badge.badge-pill" to have no more than 3 compound selectors selector-max-compound-selectors
84:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
84:9 ⚠ Expected ".event-item .event-body .event-note .md iframe.twitter-share-button" to have no more than 3 compound selectors selector-max-compound-selectors
89:7 ⚠ Expected ".event-item .event-body .event-note code" to have no more than 3 compound selectors selector-max-compound-selectors
93:7 ⚠ Expected ".event-item .event-body .event-note pre" to have no more than 3 compound selectors selector-max-compound-selectors
101:7 ⚠ Expected ".event-item .event-body .event-note .note-image-attach" to have no more than 3 compound selectors selector-max-compound-selectors
108:7 ⚠ Expected ".event-item .event-body .event-note p:last-child" to have no more than 3 compound selectors selector-max-compound-selectors
121:3 ⚠ Selector should be written in lowercase with hyphens selector-class-pattern
140:3 ⚠ Selector should be written in lowercase with hyphens selector-class-pattern
147:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
147:9 ⚠ Expected ".event-item .event_commits li.commit .commit-row-title" to have no more than 3 compound selectors selector-max-compound-selectors
147:9 ⚠ ".commit-row-title" and ".md (/Users/filipalacerda/Documents/git/gitlab-development-kit/gitlab/app/assets/stylesheets/pages/events.scss -77:7)" have the same properties. stylelint-gitlab/duplicate-selectors
156:9 ⚠ Expected nesting depth to be no more than 3 max-nesting-depth
207:5 ⚠ ".event-item-timestamp" and ".system-note-image (/Users/filipalacerda/Documents/git/gitlab-development-kit/gitlab/app/assets/stylesheets/pages/events.scss -197:5)" have the same stylelint-gitlab/duplicate-selectors
properties.
215:3 ⚠ ".event-scope" and ".event-item-timestamp (/Users/filipalacerda/Documents/git/gitlab-development-kit/gitlab/app/assets/stylesheets/pages/events.scss -207:5)" 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/pages/events.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