github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-05-22 22:43:33 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

DEV: Preload CSS in the <head> (#17322)

Browse Source 
This commit adds preload links for core/plugin/theme CSS stylesheets in the head.

Preload links are non-blocking and run in parallel. This means that they should have already been downloaded by the time we use the actual stylesheets (in the <body> tag).

Google is currently complaining about this here and this PR will address that warning.

This commit will also fix an issue in the splash screen where it sometimes doesn't respect the theme colors - causing a slightly jarring experience on dark themes.

Note that I opted not to add new specs because the underlying work required already has a lot of coverage. The new methods only change the output HTML so we can chuck that in the document <head>

This change also means that we can make all the stylesheets non-render blocking, but that will follow in a separate commit.
This commit is contained in:
Joe
2022-07-05 00:23:09 +08:00
committed by GitHub
parent 8bdbefe0e0
commit cfde4419f5
6 changed files with 78 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/helpers/application_helper.rb
View File

@ -570,6 +570,19 @@ module ApplicationHelper
)
end
def discourse_stylesheet_preload_tag(name, opts = {})
manager =
if opts.key?(:theme_id)
Stylesheet::Manager.new(
theme_id: customization_disabled? ? nil : opts[:theme_id]
)
else
stylesheet_manager
end
manager.stylesheet_preload_tag(name, 'all')
end
def discourse_stylesheet_link_tag(name, opts = {})
manager =
if opts.key?(:theme_id)
@ -583,6 +596,17 @@ module ApplicationHelper
manager.stylesheet_link_tag(name, 'all')
end
def discourse_preload_color_scheme_stylesheets
result = +""
result << stylesheet_manager.color_scheme_stylesheet_preload_tag(scheme_id, 'all')
if dark_scheme_id != -1
result << stylesheet_manager.color_scheme_stylesheet_preload_tag(dark_scheme_id, '(prefers-color-scheme: dark)')
end
result.html_safe
end
def discourse_color_scheme_stylesheets
result = +""
result << stylesheet_manager.color_scheme_stylesheet_link_tag(scheme_id, 'all')