Extract CSS utilities into separate files

When we extract page specific CSS, they sometimes overwrite our utility
classes and and force us to use important! utility classes. [0]

In order to make our utilities take precendence, we split them off, so
we can import them later. Note that we have to do it once for light mode
and dark mode.

[0]: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/42795#note_415620902

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/views/layouts/_head.html.haml

@@ -50,8 +50,10 @@
   = render 'layouts/startup_css'
   - if user_application_theme == 'gl-dark'
     = stylesheet_link_tag_defer "application_dark"
+    = stylesheet_link_tag_defer "application_utilities_dark"
   - else
     = stylesheet_link_tag_defer "application"
+    = 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']

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"