diff options
-rw-r--r-- | app/assets/stylesheets/application.scss | 10 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/mixins.scss | 5 | ||||
-rw-r--r-- | app/assets/stylesheets/highlight/common.scss | 18 | ||||
-rw-r--r-- | app/assets/stylesheets/highlight/dark.scss | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/highlight/monokai.scss | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/highlight/none.scss | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/highlight/solarized-dark.scss (renamed from app/assets/stylesheets/highlight/solarized_dark.scss) | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/highlight/solarized-light.scss (renamed from app/assets/stylesheets/highlight/solarized_light.scss) | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/highlight/white_base.scss | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/diff.scss | 12 | ||||
-rw-r--r-- | app/views/layouts/_head.html.haml | 2 | ||||
-rw-r--r-- | changelogs/unreleased/56873-only-load-syntax-highlighting-css-when-selected.yml | 5 | ||||
-rw-r--r-- | config/application.rb | 7 | ||||
-rw-r--r-- | spec/views/layouts/_head.html.haml_spec.rb | 8 |
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) |