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: Use separate files for theme component stylesheets (#12214)

Browse Source 
This switches to outputting a separate file for each theme component CSS
asset. We have separate CSS plugin files, separate JS files
(for plugins/themes/components), it makes sense to do the same for
component CSS assets.

Benefits:
- easier debugging
- fixes a regression with theme component sourcemaps
- changes to theme components are updated individually

With HTTP/2, there is also no performance downside to having additional
files in the initial request.
This commit is contained in:
Penar Musaraj
2021-02-26 07:44:15 -05:00
committed by GitHub
parent bb3d5e9758
commit f57a49c2f9
6 changed files with 41 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
spec/components/stylesheet/manager_spec.rb
View File

@ -42,7 +42,7 @@ describe Stylesheet::Manager do
theme.add_relative_theme!(:child, child_theme)
old_link = Stylesheet::Manager.stylesheet_link_tag(:desktop_theme, 'all', theme.id)
old_links = Stylesheet::Manager.stylesheet_link_tag(:desktop_theme, 'all', theme.id)
manager = Stylesheet::Manager.new(:desktop_theme, theme.id)
manager.compile(force: true)
@ -50,27 +50,56 @@ describe Stylesheet::Manager do
css = File.read(manager.stylesheet_fullpath)
_source_map = File.read(manager.source_map_fullpath)
expect(css).to match(/child_common/)
expect(css).to match(/child_desktop/)
expect(css).to match(/\.common/)
expect(css).to match(/\.desktop/)
# child theme CSS is no longer bundled with main theme
expect(css).not_to match(/child_common/)
expect(css).not_to match(/child_desktop/)
child_theme_manager = Stylesheet::Manager.new(:desktop_theme, child_theme.id)
child_theme_manager.compile(force: true)
child_css = File.read(child_theme_manager.stylesheet_fullpath)
_child_source_map = File.read(child_theme_manager.source_map_fullpath)
expect(child_css).to match(/child_common/)
expect(child_css).to match(/child_desktop/)
child_theme.set_field(target: :desktop, name: :scss, value: ".nothing{color: green;}")
child_theme.save!
new_link = Stylesheet::Manager.stylesheet_link_tag(:desktop_theme, 'all', theme.id)
new_links = Stylesheet::Manager.stylesheet_link_tag(:desktop_theme, 'all', theme.id)
expect(new_link).not_to eq(old_link)
expect(new_links).not_to eq(old_links)
# our theme better have a name with the theme_id as part of it
expect(new_link).to include("/stylesheets/desktop_theme_#{theme.id}_")
expect(new_links).to include("/stylesheets/desktop_theme_#{theme.id}_")
expect(new_links).to include("/stylesheets/desktop_theme_#{child_theme.id}_")
manager = Stylesheet::Manager.new(:embedded_theme, theme.id)
manager.compile(force: true)
css = File.read(manager.stylesheet_fullpath)
expect(css).to match(/\.embedded/)
expect(css).not_to match(/\.child_embedded/)
child_theme_manager = Stylesheet::Manager.new(:embedded_theme, child_theme.id)
child_theme_manager.compile(force: true)
css = File.read(child_theme_manager.stylesheet_fullpath)
expect(css).to match(/\.child_embedded/)
# ensure theme + component stylesheets are included
hrefs = Stylesheet::Manager.stylesheet_details(:desktop, 'all', [theme.id])
expect(hrefs.count).to eq(2)
expect(hrefs[0][:theme_id]).to eq(theme.id)
expect(hrefs[1][:theme_id]).to eq(child_theme.id)
hrefs = Stylesheet::Manager.stylesheet_details(:embedded_theme, 'all', [theme.id])
expect(hrefs.count).to eq(2)
expect(hrefs[0][:theme_id]).to eq(theme.id)
expect(hrefs[1][:theme_id]).to eq(child_theme.id)
end
describe 'digest' do