Establish a process for extracting page specific styles into page 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

We have an existing approach in place where a page bundle is defined and included only on the specific page.
For reference refer to the use of xterm.scss and ide.scss in https://gitlab.com/gitlab-org/gitlab/-/tree/master/app/assets/stylesheets/page_bundles.

Further details

Currently, we use @import "pages/**/*"; at applications.scss

We should create a file in 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 as they are converted.

To prevent visual regressions we should implement a visual regression test that can be run locally by the engineer to confirm that the extraction of the page specific styles doesn't result in other regressions. It is proposed that we use https://gitlab.com/gitlab-org/frontend/gitlab-screener for this purpose.

To establish a process for other pages to follow we will start by extracting the /app/assets/stylesheets/pages/pipelines.scss file into it's own page bundle.

What does success look like, and how can we measure that?

• The application.css file size should be reduced
• The pipelines.css page bundle should only be included on the relevant pages that requires it.
• There should be no visual regressions

Tasks

• Create page_specific_files.scss file for tracking extraction process
• Setup and run the visual regression tester: https://gitlab.com/gitlab-org/frontend/gitlab-screener
• Move the pages/pipelines.scss styles to a new page_bundles/pipelines.scss file
• Confirm no visual regressions introduced
• Document the process for extracting page specific styles in the epic &3694
• Create a recording covering the process that other engineers can follow