Merge branch 'tz-critical-css-poc' into 'master'

Startup.CSS

See merge request gitlab-org/gitlab!38052

.scss-lint.yml

@@ -7,6 +7,7 @@ scss_files:
 
 exclude:
   - 'app/assets/stylesheets/pages/emojis.scss'
+  - 'app/assets/stylesheets/startup/startup-general.scss'
 
 linters:
   # Reports when you use improper spacing around ! (the "bang") in !default,

app/assets/stylesheets/application.scss

@@ -51,3 +51,9 @@
 @media print {
   @import 'print';
 }
+
+/* Rules for overriding cloaking in startup-general.scss */
+.container-limited,
+.modal-dialog {
+  display: block;
+}

app/helpers/application_helper.rb

@@ -231,6 +231,18 @@ module ApplicationHelper
     "#{request.path}?#{options.compact.to_param}"
   end
 
+  def use_startup_css?
+    params[:startup_css] == 'true' || cookies['startup_css'] == 'true'
+  end
+
+  def stylesheet_link_tag_defer(path)
+    if use_startup_css?
+      stylesheet_link_tag(path, media: "print", onload: "this.onload=null;this.media='all'")
+    else
+      stylesheet_link_tag(path, media: "all")
+    end
+  end
+
   def outdated_browser?
     browser.ie?
   end

app/views/layouts/_head.html.haml

@@ -49,14 +49,17 @@
 
   = favicon_link_tag favicon, id: 'favicon', data: { original_href: favicon }, type: 'image/png'
 
+  - if use_startup_css?
+    %style{ type: "text/css" }
+      = Rails.application.assets_manifest.find_sources('startup/startup-general.css').first.to_s.html_safe
   - if user_application_theme == 'gl-dark'
-    = stylesheet_link_tag "application_dark", media: "all"
+    = stylesheet_link_tag_defer "application_dark"
   - else
-    = stylesheet_link_tag "application", media: "all"
+    = stylesheet_link_tag_defer "application"
   = stylesheet_link_tag "disable_animations", media: "all" if Rails.env.test? || Gitlab.config.gitlab['disable_animations']
   = stylesheet_link_tag 'performance_bar' if performance_bar_enabled?
 
-  = stylesheet_link_tag "highlight/themes/#{user_color_scheme}", media: "all"
+  = stylesheet_link_tag_defer "highlight/themes/#{user_color_scheme}"
 
   = Gon::Base.render_data(nonce: content_security_policy_nonce)
 

config/application.rb

@@ -169,6 +169,8 @@ module Gitlab
 
     config.assets.precompile << "application_dark.css"
 
+    config.assets.precompile << "startup/*.css"
+
     config.assets.precompile << "print.css"
     config.assets.precompile << "mailer.css"
     config.assets.precompile << "mailer_client_specific.css"

package.json

@@ -26,7 +26,7 @@
     "prettier-staged-save": "node ./scripts/frontend/prettier.js save",
     "prettier-all": "node ./scripts/frontend/prettier.js check-all",
     "prettier-all-save": "node ./scripts/frontend/prettier.js save-all",
-    "stylelint": "yarn stylelint-file 'app/assets/stylesheets/**/*.*'  'ee/app/assets/stylesheets/**/*.*' '!**/vendors/**'",
+    "stylelint": "yarn stylelint-file 'app/assets/stylesheets/**/*.*'  'ee/app/assets/stylesheets/**/*.*' '!app/assets/stylesheets/startup/startup-general.scss' '!**/vendors/**'",
     "stylelint-file": "BROWSERSLIST_IGNORE_OLD_DATA=true node node_modules/stylelint/bin/stylelint.js",
     "stylelint-create-utility-map": "node scripts/frontend/stylelint/stylelint-utility-map.js",
     "test": "node scripts/frontend/test",