Convert stylesheets/pages/issues.scss, stylesheets/pages/issues/issues_list.scss and stylesheets/pages/issues/issue_count_badge.scss into page specific bundle

Problem to solve

Currently we are serving one main CSS file which is importing all the CSS files that are page specific.
We want to split page specific styles out into separate CSS files that are only included on their respective pages.

Proposal

Convert app/assets/stylesheets/pages/issues.scss, app/assets/stylesheets/pages/issues/issues_list.scss, and app/assets/stylesheets/pages/issues/issue_count_badge.scss into a page bundle that is only included on relevant pages.

Further details

How to migrate a page specific bundle?

1. Pick an issue and assign yourself if you currently are not assigned.
2. Preparation:
   1. Figure out on which pages your CSS is used, note down the HAML files. Note: Sometimes page specific CSS can be used on multiple pages!
   2. Move the file from app/assets/stylesheets/pages to app/assets/stylesheets/page_bundles
   3. Remove it from page_specific_files.scss
   4. Add the file to config/application.rb
   5. Add - add_page_specific_style 'page_bundles/example' to all haml templates you have identified that are using these styles. (available once !43680 (merged) lands, in order to drive bias for action you can use = stylesheet_link_tag 'page_bundles/example') for now.
3. Use CSS variables for all the colors. This is crucial for dark mode.
   1. If a color doesn't have an exact match with Pajamas colors, choose the nearest color from the Pajamas colors. If there isn't an exact match, see whether a dark mode variable is available: https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/stylesheets/themes/_dark.scss
   2. If you have dark-mode related questions, consider pinging @psimyn.
4. Ensure that the changed pages work properly
5. Merge away!

Notes

In order to quickly get our application.css size down, hold off on any unneeded optimizations, however while you are looking at the page specific styles, you can choose to optimize the following things or preferably create follow-up issues:

1. Replacing certain properties with utility classes
2. Sometimes a page specific CSS might contain classes of distinct pages. Then we could split those. (e.g. pipelines css for lists vs pipelines css for details pages)
3. Removing unused CSS

EE specific styles

ee/ follows the same pattern described, simply place the file into ee/app/assets/stylesheets/page_bundles. It is even possible to extend CE styles, see: cycle_analytics and it's ee version. MR for reference: !42474 (merged)