Extract page specific styles todos
What does this MR do?
This MR is the first in a series of performance related MRs that will be moving page specific CSS out of the application.css bundle and into their own page bundles.
As per issue, #228852 (closed), we are using this first MR to establish a process for implementing these changes so that other team members can follow this approach going forward.
As such this MR introduces a few more changes than what follow-up MRs will, namely:
- A new
app/assets/stylesheets/_page_specific_files.scss
file that holds a reference to all page style files we want to extract into their own page bundle. As a page is moved out the entries in this file will be removed until we have none left. - A new
app/assets/stylesheets/page_bundles/_mixins_and_variables_and_everything.scss
file that includes the various mixins, variables and functions needed to be included in the page specific bundles
The rest is simply a matter of referencing the new page bundle in the correct place and setting it to be precompiled.
Screenshots
Comparison of before after screenshots reveal no visual diffs of the TODOs page.
Does this MR meet the acceptance criteria?
Conformity
-
Changelog entry -
Documentation (if required) -
Code review guidelines -
Merge request performance guidelines -
Style guides -
Database guides -
Separation of EE specific content
Availability and Testing
There is a risk that any page specific styles that is now moved to a page bundle and might have been used by another page will no longer be available on the page that relied on this. While we are looking at using a tool for automated visual regression it is not ready for use yet and manual user spot testing is required to make sure no visual regressions were introduced.
-
Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process. -
Tested in all supported browsers -
Informed Infrastructure department of a default or new setting change, if applicable per definition of done
Security
If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:
-
Label as security and @ mention @gitlab-com/gl-security/appsec
-
The MR includes necessary changes to maintain consistency between UI, API, email, or other methods -
Security reports checked/validated by a reviewer from the AppSec team