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

14 files changed, 51 insertions, 28 deletions

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index bdf20866197..83ad8766cb5 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -40,16 +40,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.
  */
 @import "behaviors";
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index b9d0c0d4d96..3b0869e31a9 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/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;
diff --git a/app/assets/stylesheets/highlight/common.scss b/app/assets/stylesheets/highlight/common.scss
new file mode 100644
index 00000000000..2b0794759d5
--- /dev/null
+++ b/app/assets/stylesheets/highlight/common.scss
@@ -0,0 +1,18 @@
+@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;
+}
diff --git a/app/assets/stylesheets/highlight/dark.scss b/app/assets/stylesheets/highlight/dark.scss
index ca9a2a673f5..435c57ab329 100644
--- a/app/assets/stylesheets/highlight/dark.scss
+++ b/app/assets/stylesheets/highlight/dark.scss
@@ -1,5 +1,7 @@
 /* https://github.com/MozMorris/tomorrow-pygments */
 
+@import "./common";
+
 /*
 * Dark syntax colors
 */
diff --git a/app/assets/stylesheets/highlight/monokai.scss b/app/assets/stylesheets/highlight/monokai.scss
index bc3761d1e47..d09a21d574b 100644
--- a/app/assets/stylesheets/highlight/monokai.scss
+++ b/app/assets/stylesheets/highlight/monokai.scss
@@ -1,5 +1,7 @@
 /* https://github.com/richleland/pygments-css/blob/master/monokai.css */
 
+@import "./common";
+
 /*
 * Monokai Colors
 */
diff --git a/app/assets/stylesheets/highlight/none.scss b/app/assets/stylesheets/highlight/none.scss
index 4bedb6a8e5b..3105c4ed6e8 100644
--- a/app/assets/stylesheets/highlight/none.scss
+++ b/app/assets/stylesheets/highlight/none.scss
@@ -2,7 +2,7 @@
 * None Syntax Colors
 */
 
-
+@import "./common";
 
 @mixin match-line {
   color: $black-transparent;
diff --git a/app/assets/stylesheets/highlight/solarized_dark.scss b/app/assets/stylesheets/highlight/solarized-dark.scss
index de7b9424340..6b1ee4d450c 100644
--- a/app/assets/stylesheets/highlight/solarized_dark.scss
+++ b/app/assets/stylesheets/highlight/solarized-dark.scss
@@ -1,5 +1,7 @@
 /* https://gist.github.com/qguv/7936275 */
 
+@import "./common";
+
 /*
 * Solarized dark colors
 */
diff --git a/app/assets/stylesheets/highlight/solarized_light.scss b/app/assets/stylesheets/highlight/solarized-light.scss
index 84a92d0320a..3e8367754ca 100644
--- a/app/assets/stylesheets/highlight/solarized_light.scss
+++ b/app/assets/stylesheets/highlight/solarized-light.scss
@@ -1,5 +1,7 @@
 /* https://gist.github.com/qguv/7936275 */
 
+@import "./common";
+
 /*
 * Solarized light syntax colors
 */
diff --git a/app/assets/stylesheets/highlight/white_base.scss b/app/assets/stylesheets/highlight/white_base.scss
index c636abbdfad..23ec3380ce9 100644
--- a/app/assets/stylesheets/highlight/white_base.scss
+++ b/app/assets/stylesheets/highlight/white_base.scss
@@ -1,5 +1,7 @@
 /* https://github.com/aahan/pygments-github-style */
 
+@import "./common";
+
 /*
 * White Syntax Colors
 */
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index a708149b36c..528496944e9 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/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;
diff --git a/app/views/layouts/_head.html.haml b/app/views/layouts/_head.html.haml
index 0bb2363f65a..8e8dcf1ea35 100644
--- a/app/views/layouts/_head.html.haml
+++ b/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)
diff --git a/changelogs/unreleased/56873-only-load-syntax-highlighting-css-when-selected.yml b/changelogs/unreleased/56873-only-load-syntax-highlighting-css-when-selected.yml
new file mode 100644
index 00000000000..a7af8994852
--- /dev/null
+++ b/changelogs/unreleased/56873-only-load-syntax-highlighting-css-when-selected.yml
@@ -0,0 +1,5 @@
+---
+title: Only load syntax highlight CSS of selected theme
+merge_request: 25232
+author:
+type: performance
diff --git a/config/application.rb b/config/application.rb
index 49e7f5836e4..67942ae116b 100644
--- a/config/application.rb
+++ b/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"
diff --git a/spec/views/layouts/_head.html.haml_spec.rb b/spec/views/layouts/_head.html.haml_spec.rb
index 9d1efcabb80..590dbe7da1f 100644
--- a/spec/views/layouts/_head.html.haml_spec.rb
+++ b/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)