Only load selected syntax highlight CSS

Compile highlight CSS separately
Move highlight-specific mixins out of mixins.scss
Rename solarized themes to match theme name as this was a smaller
change than changing all instances to snake_case

app/assets/stylesheets/application.scss

@@ -39,16 +39,6 @@
  */
 @import "components/**/*";
-/*
- * Code highlight
- */
-@import "highlight/dark";
-@import "highlight/monokai";
-@import "highlight/solarized_dark";
-@import "highlight/solarized_light";
-@import "highlight/white";
-@import "highlight/none";
-
 /*
  * Styles for JS behaviors.
  */

app/assets/stylesheets/framework/mixins.scss

@@ -113,11 +113,6 @@
   }
 }
-@mixin dark-diff-match-line {
-  color: $dark-diff-match-bg;
-  background: $dark-diff-match-color;
-}
-
 @mixin webkit-prefix($property, $value) {
   #{'-webkit-' + $property}: $value;
   #{$property}: $value;

app/assets/stylesheets/highlight/common.scss

+@import "../framework/variables";
+
+@mixin diff-background($background, $idiff, $border) {
+  background: $background;
+
+  &.line_content span.idiff {
+    background: $idiff;
+  }
+
+  &.diff-line-num {
+    border-color: $border;
+  }
+}
+
+@mixin dark-diff-match-line {
+  color: $dark-diff-match-bg;
+  background: $dark-diff-match-color;
+}

app/assets/stylesheets/highlight/dark.scss

 /* https://github.com/MozMorris/tomorrow-pygments */
+@import "./common";
+
 /*
 * Dark syntax colors
 */

app/assets/stylesheets/highlight/monokai.scss

 /* https://github.com/richleland/pygments-css/blob/master/monokai.css */
+@import "./common";
+
 /*
 * Monokai Colors
 */

app/assets/stylesheets/highlight/none.scss

@@ -2,7 +2,7 @@
 * None Syntax Colors
 */
-
+@import "./common";
 @mixin match-line {
   color: $black-transparent;

app/assets/stylesheets/highlight/solarized_dark.scss → app/assets/stylesheets/highlight/solarized-dark.scss

 /* https://gist.github.com/qguv/7936275 */
+@import "./common";
+
 /*
 * Solarized dark colors
 */

app/assets/stylesheets/highlight/solarized_light.scss → app/assets/stylesheets/highlight/solarized-light.scss

 /* https://gist.github.com/qguv/7936275 */
+@import "./common";
+
 /*
 * Solarized light syntax colors
 */

app/assets/stylesheets/highlight/white_base.scss

 /* https://github.com/aahan/pygments-github-style */
+@import "./common";
+
 /*
 * White Syntax Colors
 */

app/assets/stylesheets/pages/diff.scss

@@ -602,18 +602,6 @@
   }
 }
-@mixin diff-background($background, $idiff, $border) {
-  background: $background;
-
-  &.line_content span.idiff {
-    background: $idiff;
-  }
-
-  &.diff-line-num {
-    border-color: $border;
-  }
-}
-
 .files {
   .diff-file:last-child {
     margin-bottom: 0;

app/views/layouts/_head.html.haml

@@ -38,6 +38,8 @@
   = stylesheet_link_tag 'performance_bar' if performance_bar_enabled?
   = stylesheet_link_tag 'csslab' if Feature.enabled?(:csslab)
+  = stylesheet_link_tag "highlight/#{user_color_scheme}", media: "all"
+
   = Gon::Base.render_data
   - if content_for?(:library_javascripts)

changelogs/unreleased/56873-only-load-syntax-highlighting-css-when-selected.yml

+---
+title: Only load syntax highlight CSS of selected theme
+merge_request: 25232
+author:
+type: performance

config/application.rb

@@ -147,6 +147,13 @@ module Gitlab
     config.assets.precompile << "errors.css"
     config.assets.precompile << "csslab.css"
+    config.assets.precompile << "highlight/dark.css"
+    config.assets.precompile << "highlight/monokai.css"
+    config.assets.precompile << "highlight/solarized-dark.css"
+    config.assets.precompile << "highlight/solarized-light.css"
+    config.assets.precompile << "highlight/white.css"
+    config.assets.precompile << "highlight/none.css"
+
     # Import gitlab-svgs directly from vendored directory
     config.assets.paths << "#{config.root}/node_modules/@gitlab/svgs/dist"
     config.assets.precompile << "icons.svg"

spec/views/layouts/_head.html.haml_spec.rb

@@ -62,6 +62,14 @@ describe 'layouts/_head' do
     end
   end
+  it 'adds selected syntax highlight stylesheet' do
+    allow_any_instance_of(PreferencesHelper).to receive(:user_color_scheme).and_return("solarised-light")
+
+    render
+
+    expect(rendered).to match('<link rel="stylesheet" media="all" href="/stylesheets/highlight/solarised-light.css" />')
+  end
+
   def stub_helper_with_safe_string(method)
     allow_any_instance_of(PageLayoutHelper).to receive(method)
       .and_return(%q{foo" http-equiv="refresh}.html_safe)