Merge branch 'leipert-fix-utility-import-order' into 'master'

Ensure utilities are loaded after page specific bundles

See merge request gitlab-org/gitlab!43680

app/assets/stylesheets/application.scss

@@ -36,17 +36,6 @@
 // EE-only stylesheets
 @import 'application_ee';
 
-// CSS util classes
-/**
-  These are deprecated in favor of the Gitlab UI utilities imported below.
-  Please check https://unpkg.com/browse/@gitlab/ui/src/scss/utilities.scss
-  to see the available utility classes.
-**/
-@import 'utilities';
-
-// Gitlab UI util classes
-@import '@gitlab/ui/src/scss/utilities';
-
 /* print styles */
 @media print {
   @import 'print';

app/assets/stylesheets/application_utilities.scss

+@import 'page_bundles/mixins_and_variables_and_functions';
+
+// CSS util classes
+/**
+  These are deprecated in favor of the Gitlab UI utilities imported below.
+  Please check https://unpkg.com/browse/@gitlab/ui/src/scss/utilities.scss
+  to see the available utility classes.
+**/
+@import 'utilities';
+
+// Gitlab UI util classes
+@import '@gitlab/ui/src/scss/utilities';

app/assets/stylesheets/application_utilities_dark.scss

+@import './themes/dark';
+
+@import 'application_utilities';

app/helpers/application_helper.rb

@@ -357,6 +357,12 @@ module ApplicationHelper
     }
   end
 
+  def add_page_specific_style(path)
+    content_for :page_specific_styles do
+      stylesheet_link_tag_defer path
+    end
+  end
+
   def page_startup_api_calls
     @api_startup_calls
   end

app/views/dashboard/milestones/index.html.haml

 - @hide_top_links = true
 - page_title _('Milestones')
 - header_title _('Milestones'), dashboard_milestones_path
-= stylesheet_link_tag 'page_bundles/milestone'
+- add_page_specific_style 'page_bundles/milestone'
 
 .page-title-holder.d-flex.align-items-center
   %h1.page-title= _('Milestones')

app/views/dashboard/todos/index.html.haml

@@ -3,7 +3,7 @@
 - header_title _("To-Do List"), dashboard_todos_path
 
 = render_dashboard_gold_trial(current_user)
-= stylesheet_link_tag 'page_bundles/todos'
+- add_page_specific_style 'page_bundles/todos'
 
 .page-title-holder.d-flex.align-items-center
   %h1.page-title= _('To-Do List')

app/views/groups/milestones/index.html.haml

 - page_title _("Milestones")
-= stylesheet_link_tag 'page_bundles/milestone'
+- add_page_specific_style 'page_bundles/milestone'
 
 .top-area
   = render 'shared/milestones_filter', counts: @milestone_states

app/views/groups/milestones/show.html.haml

-= stylesheet_link_tag 'page_bundles/milestone'
+- add_page_specific_style 'page_bundles/milestone'
 = render "header_title"
 = render 'shared/milestones/top', milestone: @milestone, group: @group
 = render 'shared/milestones/tabs', milestone: @milestone, show_project_name: true

app/views/ide/_show.html.haml

 - @body_class = 'ide-layout'
 - page_title _('IDE')
 
-- content_for :page_specific_javascripts do
-  = stylesheet_link_tag 'page_bundles/ide'
+- add_page_specific_style 'page_bundles/ide'
 
 #ide.ide-loading{ data: ide_data }
   .text-center

app/views/jira_connect/subscriptions/index.html.haml

@@ -25,4 +25,4 @@
         %td= link_to 'Remove', jira_connect_subscription_path(subscription), class: 'remove-subscription'
 
 = page_specific_javascript_tag('jira_connect.js')
-= stylesheet_link_tag 'page_bundles/jira_connect'
+- add_page_specific_style 'page_bundles/jira_connect'

app/views/layouts/_head.html.haml

@@ -50,8 +50,14 @@
   = render 'layouts/startup_css'
   - if user_application_theme == 'gl-dark'
     = stylesheet_link_tag_defer "application_dark"
+    - if content_for?(:page_specific_styles)
+      = yield :page_specific_styles
+    = stylesheet_link_tag_defer "application_utilities_dark"
   - else
     = stylesheet_link_tag_defer "application"
+    - if content_for?(:page_specific_styles)
+      = yield :page_specific_styles
+    = stylesheet_link_tag_defer "application_utilities"
   - unless use_startup_css?
     = stylesheet_link_tag_defer "themes/#{user_application_theme_css_filename}" if user_application_theme_css_filename
   = stylesheet_link_tag "disable_animations", media: "all" if Rails.env.test? || Gitlab.config.gitlab['disable_animations']

app/views/layouts/jira_connect.html.haml

@@ -7,6 +7,8 @@
     = stylesheet_link_tag 'https://unpkg.com/@atlaskit/reduced-ui-pack@10.5.5/dist/bundle.css'
     = javascript_include_tag 'https://connect-cdn.atl-paas.net/all.js'
     = javascript_include_tag 'https://unpkg.com/jquery@3.3.1/dist/jquery.min.js'
+    - if content_for?(:page_specific_styles)
+      = yield :page_specific_styles
     = yield :head
   %body
     .ac-content

app/views/projects/cycle_analytics/show.html.haml

 - page_title _("Value Stream Analytics")
-- content_for :page_specific_javascripts do
-  = stylesheet_link_tag 'page_bundles/cycle_analytics'
+- add_page_specific_style 'page_bundles/cycle_analytics'
 
 #cycle-analytics{ "v-cloak" => "true", data: { request_path: project_cycle_analytics_path(@project) } }
   - if @cycle_analytics_no_data

app/views/projects/environments/show.html.haml

 - add_to_breadcrumbs _("Environments"), project_environments_path(@project)
 - breadcrumb_title @environment.name
 - page_title _("Environments")
-
-- content_for :page_specific_javascripts do
-  = stylesheet_link_tag 'page_bundles/xterm'
+- add_page_specific_style 'page_bundles/xterm'
 
 #environments-detail-view{ data: { name: @environment.name, id: @environment.id, delete_path: environment_delete_path(@environment)} }
   - if @environment.available? && can?(current_user, :stop_environment, @environment)

app/views/projects/issues/index.html.haml

@@ -2,7 +2,7 @@
 
 - page_title _("Issues")
 - new_issue_email = @project.new_issuable_address(current_user, 'issue')
-= stylesheet_link_tag 'page_bundles/issues'
+- add_page_specific_style 'page_bundles/issues'
 
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, safe_params.merge(rss_url_options).to_h, title: "#{@project.name} issues")

app/views/projects/issues/show.html.haml

@@ -12,7 +12,7 @@
 - can_report_spam = @issue.submittable_as_spam_by?(current_user)
 - can_create_issue = show_new_issue_link?(@project)
 - related_branches_path = related_branches_project_issue_path(@project, @issue)
-= stylesheet_link_tag 'page_bundles/issues'
+- add_page_specific_style 'page_bundles/issues'
 
 = render_if_exists "projects/issues/alert_blocked", issue: @issue, current_user: current_user
 = render "projects/issues/alert_moved_from_service_desk", issue: @issue

app/views/projects/jobs/show.html.haml

 - add_to_breadcrumbs _("Jobs"), project_jobs_path(@project)
 - breadcrumb_title "##{@build.id}"
 - page_title "#{@build.name} (##{@build.id})", _("Jobs")
-
-- content_for :page_specific_javascripts do
-  = stylesheet_link_tag 'page_bundles/xterm'
+- add_page_specific_style 'page_bundles/xterm'
 
 = render_if_exists "shared/shared_runners_minutes_limit_flash_message"
 

app/views/projects/milestones/index.html.haml

 - page_title _('Milestones')
-= stylesheet_link_tag 'page_bundles/milestone'
+- add_page_specific_style 'page_bundles/milestone'
 
 .top-area
   = render 'shared/milestones_filter', counts: milestone_counts(@project.milestones)

app/views/projects/milestones/show.html.haml

@@ -2,7 +2,7 @@
 - breadcrumb_title @milestone.title
 - page_title       @milestone.title, _('Milestones')
 - page_description @milestone.description
-= stylesheet_link_tag 'page_bundles/milestone'
+- add_page_specific_style 'page_bundles/milestone'
 
 = render 'shared/milestones/header', milestone: @milestone
 = render 'shared/milestones/description', milestone: @milestone

app/views/shared/boards/_show.html.haml

@@ -8,7 +8,7 @@
 - @content_class = "issue-boards-content js-focus-mode-board"
 - breadcrumb_title _("Issue Boards")
 - page_title("#{board.name}", _("Boards"))
-= stylesheet_link_tag 'page_bundles/boards'
+- add_page_specific_style 'page_bundles/boards'
 
 - content_for :page_specific_javascripts do
 

config/application.rb

@@ -174,6 +174,8 @@ module Gitlab
     config.assets.paths << Gemojione.images_path
     config.assets.paths << "#{config.root}/vendor/assets/fonts"
 
+    config.assets.precompile << "application_utilities.css"
+    config.assets.precompile << "application_utilities_dark.css"
     config.assets.precompile << "application_dark.css"
 
     config.assets.precompile << "startup/*.css"