diff options
16 files changed, 49 insertions, 31 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/themes/dark.scss index ca9a2a673f5..16893dd047e 100644 --- a/app/assets/stylesheets/highlight/dark.scss +++ b/app/assets/stylesheets/highlight/themes/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/themes/monokai.scss index bc3761d1e47..37fe61b925c 100644 --- a/app/assets/stylesheets/highlight/monokai.scss +++ b/app/assets/stylesheets/highlight/themes/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/themes/none.scss index 4bedb6a8e5b..b4217aac37a 100644 --- a/app/assets/stylesheets/highlight/none.scss +++ b/app/assets/stylesheets/highlight/themes/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/themes/solarized-dark.scss index de7b9424340..a4e9eda22c9 100644 --- a/app/assets/stylesheets/highlight/solarized_dark.scss +++ b/app/assets/stylesheets/highlight/themes/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/themes/solarized-light.scss index 84a92d0320a..b604d1ccb6c 100644 --- a/app/assets/stylesheets/highlight/solarized_light.scss +++ b/app/assets/stylesheets/highlight/themes/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/themes/white.scss b/app/assets/stylesheets/highlight/themes/white.scss new file mode 100644 index 00000000000..7239086f649 --- /dev/null +++ b/app/assets/stylesheets/highlight/themes/white.scss @@ -0,0 +1,3 @@ +.code.white { + @import "../white_base"; +} diff --git a/app/assets/stylesheets/highlight/white.scss b/app/assets/stylesheets/highlight/white.scss deleted file mode 100644 index 355c8d223f7..00000000000 --- a/app/assets/stylesheets/highlight/white.scss +++ /dev/null @@ -1,3 +0,0 @@ -.code.white { - @import "white_base"; -} 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 ae0768592e0..d001dff7986 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..11e83ddfe64 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/themes/#{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..1c11e347281 100644 --- a/config/application.rb +++ b/config/application.rb @@ -147,6 +147,8 @@ module Gitlab config.assets.precompile << "errors.css" config.assets.precompile << "csslab.css" + config.assets.precompile << "highlight/themes/*.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..cbb4199954a 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/themes/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) |