Feedback for StartupCSS enhancements
Status
It be merged !62836 (merged)! Merged again !63069 (merged)!
| Thing | Health |
|---|---|
CI Jobs startup-css-check
|
|
yarn run generate:startup_css |
Description
This is a feedback issue for StartupCSS enhancements. See this MR for more context.
IMPORTANT
If you find yourself changing a Startup CSS, you should make sure the pipeline has [RUN AS-IF-FOSS] so that it'll check both jobs.
If a MR changes Startup CSS file, the pipeline will automatically include the as-if-foss job. If you update the Startup CSS files, there's a good chance you'll need to update both CE and EE.
The startup-css-check job failed, what do I do?
Most likely, you'll just want to apply the diff that is outputted in the startup-css-check job log. Here's one way you can do that:
- Open the failing job
- View the "Raw" log
- Copy everything between the
--- start diff ---and--- end diff ---lines to your clipboard. - Paste and apply by running something like this locally
pbpaste | git apply - Consider copying the change to both EE and CE
If you'd like to generate this locally, then keep reading
How do I use generate:startup_css?
This script will update the .scss files located in app/assets/stylesheets/startup.
- Until this is merged in
master, check out the branch of this MR. - Run the startup_css HTML fixtures with
bundle exec rspec spec/frontend/fixtures/startup_css.rb - Run
yarn run generate:startup_css
What has changed?
Previously, the startup css files were generated by a semi-manual semi-automated process through a separate project. The setup was not robust enough to work on everyone's local environments, let alone CI.
Now, we can generate the startup CSS completely within the gitlab project, through HTML fixtures and rails assets.
There has also been a CI job introduced, startup-css-check, which will verify if the current HEAD's startup CSS is up-to-date. This is very helpful at making sure we only include what is absolutely necessary and avoid conflicts (example).
Why do we even need startup CSS?
Our application.scss is quite big. Rather than blocking the entire page load waiting for this, we can make the browser asynchronously load this file and apply the styles once they are available.
Unfortunately, that means everything will look wonky until the css is loaded... Enter Startup CSS!
This CSS is inlined into each request so that the HTML can be immediately viewed. For the most part it only includes navbar and sidebar styles, while ignoring other styles.
I'm running into an issue!
Please leave a comment on this issue, and we'll try to help you