Currently we are serving one main CSS File which is importing all the CSS files which are completely page specific. Lets identify those that are very obvious and worth splitting out in seperate CSS Files. ## How to migrate a page specific bundle? 1. Pick an issue and assign yourself if you currently are not assigned. 1. 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! 1. Move the file from `app/assets/stylesheets/pages` to `app/assets/stylesheets/page_bundles` 1. Remove it from `page_specific_files.scss` 1. Add the file to `config/application.rb` 1. Add `- add_page_specific_style 'page_bundles/example'` to all haml templates you have identified that are using these styles. (available once https://gitlab.com/gitlab-org/gitlab/-/merge_requests/43680 lands, in order to drive bias for action you can use `= stylesheet_link_tag 'page_bundles/example'`) for now. 1. This can (should) be done behind the `:page_specific_styles` feature flag. Here is an example MR on how to do that: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/131606 1. 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](https://design.gitlab.com/product-foundations/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 1. If you have dark-mode related questions, consider pinging @psimyn. 1. Ensure that the changed pages work properly 1. 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](https://gitlab.com/gitlab-org/gitlab/-/blob/84864ec304dca5ca85052cf8b41185286b48f5bc/app/assets/stylesheets/page_bundles/cycle_analytics.scss) and it's [ee version](https://gitlab.com/gitlab-org/gitlab/-/blob/84864ec304dca5ca85052cf8b41185286b48f5bc/ee/app/assets/stylesheets/page_bundles/cycle_analytics.scss). MR for reference: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/42474 - - - ## 1. New setup Currently, we use `@import "pages/**/*";` at [applications.scss](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/stylesheets/application.scss#L25) Let's create a file in [`pages/`](https://gitlab.com/gitlab-org/gitlab/-/tree/master/app/assets/stylesheets/pages) named `page_specific_files.scss` that lists by direct reference all files in that `pages` folder. So that we can then remove 1 by 1. ## 1. Remove Files from page_specific_files.scss Files in [/app/assets/stylesheets/pages](https://gitlab.com/gitlab-org/gitlab/-/tree/master/app/assets/stylesheets/pages) are in total 436KB: | File | Size | Group | |--------------------------------------|------|-----------------------------------| | projects.scss | 24K | ~"group::project management" | | diff.scss | 22K | ~"group::source code" | | pipelines.scss | 20K | ~"group::pipeline authoring" | | notes.scss | 17K | ~"group::project management" | | issuable.scss | 17K | ~"group::project management" | | merge_requests.scss | 16K | ~"group::source code" | | boards.scss | 11K | ~"group::project management" | | merge_conflicts.scss | 8.7K | ~"group::source code" | | groups.scss | 7.6K | ~"group::project management" | | note_form.scss | 7.6K | ~"group::project management" | | profile.scss | 6.8K | ~"group::workspace" | | issues.scss | 6.6K | ~"group::project management" | | labels.scss | 6.4K | ~"group::project management" | | commits.scss | 6.4K | ~"group::source code" | | cycle_analytics.scss | 6.1K | ~"group::analytics" | | settings.scss | 5.9K | ~"group::project management" | | prometheus.scss | 5.6K | ~"group::configure" | | search.scss | 5.6K | ~"group::global search" | | builds.scss | 5.3K | ~"group::pipeline authoring" | | login.scss | 4.9K | ~"group::authentication and authorization" | | dev_ops_score.scss | 4.2K | ~"group::analytics" | | editor.scss | 3.8K | ~"group::editor" | | tree.scss | 3.8K | ~"group::editor" | | milestone.scss | 3.8K | ~"group::product planning" | | members.scss | 3.5K | ~"group::authentication and authorization" | | events.scss | 3.4K | ~"group::compliance" | | incident_management_list.scss | 3.0K | ~"group::respond" | | clusters.scss | 2.9K | ~"group::configure" | | wiki.scss | 2.3K | ~"group::editor" | | reports.scss | 2.3K | ~"group::optimize" | | environments.scss | 1.9K | ~"group::release" | | users.scss | 1.6K | ~"group::authentication and authorization" | | profiles/preferences.scss | 1.5K | ~"group::authentication and authorization" | | alert_management/details.scss | 1.3K | ~"group::health" | | status.scss | 1.3K | ~"group::pipeline authoring" | | pages.scss | 1.2K | ~"group::editor" | | environment_logs.scss | 1.1K | ~"group::health" | | graph.scss | 1.1K | ~"group::project management" | | pipeline_schedules.scss | 1.0K | ~"group::pipeline authoring" | | detail_page.scss | 990B | ~"group::code review" | | import.scss | 956B | | | experimental_separate_sign_up.scss | 906B | | | help.scss | 767B | ~"group::foundations" | | ci_projects.scss | 766B | | | error_details.scss | 726B | | | runners.scss | 698B | | | branches.scss | 684B | ~"group::code review" | | notifications.scss | 602B | ~"group::project management" | | error_list.scss | 552B | | | experience_level.scss | 523B | | | sherlock.scss | 430B | | | trials.scss | 412B | | | storage_quota.scss | 350B | ~"group::utilization" | | alert_management/severity-icons.scss | 318B | | | settings_ci_cd.scss | 286B | ~"group::pipeline execution" | | ui_dev_kit.scss | 285B | | | deploy_keys.scss | 178B | ~"group::release" | | packages.scss | 176B | ~"group::package" | | issues/issue_count_badge.scss | 170B | ~"group::project management" | | service_desk.scss | 153B | ~"group:certify" | | admin.scss | 134B | | | monitor.scss | 107B | ~"group::respond" | | issues/issues_list.scss | 84B | ~"group::project management" | | error_tracking_list.scss | 55B | ~"group:certify" | | tags.scss | 53B | | | serverless.scss | 36B | | Files in [ee/app/assets/stylesheets/pages](https://gitlab.com/gitlab-org/gitlab/-/tree/master/ee/app/assets/stylesheets/pages): | File | Size | Group | |------------------------------|-------|-----------------------------------| | roadmap.scss | 11K | ~"group::project management" | | promotions.scss | 4.4K | ~"group::acquisition" | | pipelines.scss | 4.0K | ~"group::pipeline authoring" | | subscriptions.scss | 3.7K | ~"group::acquisition" | | environments.scss | 3.1K | ~"group::release" | | epics.scss | 2.7K | ~"group::project management" | | projects.scss | 2.7K | ~"group::project management" | | requirements.scss | 2.3K | ~"group::project management" | | issuable.scss | 2.2K | ~"group::project management" | | issues.scss | 2.0K | ~"group::project management" | | productivity_analytics.scss | 1.9K | ~"group::analytics" | | billings.scss | 1.8K | ~"group::acquisition" | | boards.scss | 1.8K | ~"group::project management" | | ee_start_trial.scss | 1.6K | ~"group::acquisition" | | security_dashboard.scss | 1.4K | ~"group::threat insights" | | milestone.scss | 1009B | ~"group::product planning" | | issues/related_issues.scss | 958B | ~"group::project management" | | licenses.scss | 955B | | | operations.scss | 858B | | | cycle_analytics.scss | 776B | | | merge_requests.scss | 748B | ~"group::source code" | | groups.scss | 568B | | | jira_connect.scss | 474B | ~"group::integrations" | | issues_analytics.scss | 459B | ~"group::project management" | | feature_flags.scss | 392B | ~"group::release" | | geo.scss | 370B | ~"group::geo" | | merge_request_analytics.scss | 199B | ~"group::optimize" | | threat_management.scss | 172B | ~"group::container security" | | contributors.scss | 72B | ~"group::foundations" | | code_review.scss | 34B | ~"group::code review" | * Check if the styles are only used on a reasonable number of pages to split it out (it doesn't make sense to refactor for days for a save of 2 KB) * Move the current file to own CSS bundle in [`page_bundles`](https://gitlab.com/gitlab-org/gitlab/-/tree/master/app/assets/stylesheets/page_bundles) * Remove from `page_specific_files.scss` ## 3. Prevention * [New Danger rule](https://gitlab.com/gitlab-org/gitlab/-/issues/270414)