Skip to content

Fix the following style-lint errors and warnings for `ee/app/assets/stylesheets/pages/environments.scss`

Problem

Fix the following style-lint errors and warnings for ee/app/assets/stylesheets/pages/environments.scss

  28:7  ⚠  Expected ".deploy-board > div .deploy-board-information > span" to have no more than 3 compound selectors                                                                                     selector-max-compound-selectors
  32:7  ⚠  Expected ".deploy-board > div .deploy-board-information .percentage" to have no more than 3 compound selectors                                                                                selector-max-compound-selectors
  36:7  ⚠  Expected ".deploy-board > div .deploy-board-information .text" to have no more than 3 compound selectors                                                                                      selector-max-compound-selectors
  46:7  ⚠  Expected ".deploy-board > div .deploy-board-instances .text" to have no more than 3 compound selectors                                                                                        selector-max-compound-selectors
  51:7  ⚠  Expected ".deploy-board > div .deploy-board-instances .deploy-board-instances-container" to have no more than 3 compound selectors                                                            selector-max-compound-selectors
  81:7  ⚠  Expected ".deploy-board > div .deploy-board-empty-state-text .title" to have no more than 3 compound selectors                                                                                selector-max-compound-selectors
 122:3  ⚠  "&-unknown" and "&-failed (ee/app/assets/stylesheets/pages/environments.scss -117:3)" have the same properties.                              stylelint-gitlab/duplicate-selectors
 161:5  ⚠  Expected ".cluster-health-graphs .prometheus-state .state-svg img" to have no more than 3 compound selectors                                                                                  selector-max-compound-selectors
 165:5  ⚠  ".state-description,     .state-button" and ".deploy-board-icon (ee/app/assets/stylesheets/pages/environments.scss -144:1)" have the same    stylelint-gitlab/duplicate-selectors
           properties.
 187:5  ⚠  "&.chevron" and ".text (ee/app/assets/stylesheets/pages/environments.scss -36:7)" have the same properties.                                  stylelint-gitlab/duplicate-selectors
 198:3  ⚠  ".dropdown-title" and "svg (ee/app/assets/stylesheets/pages/environments.scss -180:3)" have the same properties.                             stylelint-gitlab/duplicate-selectors
 230:3  ⚠  Expected ".alert-form .action-group .btn + .btn" to have no more than 3 compound selectors

What to do

  1. If possible, replace the CSS class with a utility one, check common.scss and https://getbootstrap.com/docs/4.3/utilities/ for existing ones
  2. Double check if all the warning have been fixed by running yarn run stylelint-file ee/app/assets/stylesheets/pages/environments.scss
  3. In the MR, add screenshots of the affected areas before and after the changes, check the first MR as a guideline
  4. If there are a lot of changes, we recommend to break them into smaller MRs
  5. Double check the usage of each changed class both in CE and EE
  6. EE changes should either be backported into CE or moved into ee/ folder. You can read more about how to handle EE code here
  7. Label the MR with CSS cleanup