DEV: Use a special import to declare font faces (#10583)

Update discourse-fonts to v0.0.3.

Follow-up to 7b7357147e.

.gitignore

@@ -132,7 +132,6 @@ node_modules
 
 # ignore auto-generated plugin js assets
 /app/assets/javascripts/plugins/*
-/app/assets/stylesheets/common/fonts.scss
 
 # ignore generated api documentation files
 openapi/*

Gemfile.lock

@@ -99,7 +99,7 @@ GEM
     diff-lcs (1.4.4)
     diffy (3.4.0)
     discourse-ember-source (3.12.2.2)
-    discourse-fonts (0.0.2)
+    discourse-fonts (0.0.3)
     discourse_image_optim (0.26.2)
       exifr (~> 1.2, >= 1.2.2)
       fspath (~> 3.0)

app/assets/javascripts/wizard/components/font-preview.js

@@ -58,7 +58,11 @@ export default createPreviewComponent(305, 165, {
     ctx.beginPath();
     ctx.fillStyle = colors.primary;
     ctx.font = `bold ${titleFontSize}em '${font}'`;
-    ctx.fillText(I18n.t("wizard.previews.topic_title"), margin, height * 0.3);
+    ctx.fillText(
+      I18n.t("wizard.previews.font_title", { font }),
+      margin,
+      height * 0.3
+    );
 
     const bodyFontSize = height / 220.0;
     ctx.font = `${bodyFontSize}em '${font}'`;

app/assets/stylesheets/common.scss

@@ -1,3 +1,4 @@
+@import "font";
 @import "vendor/normalize";
 @import "vendor/normalize-ext";
 @import "vendor/pikaday";
@@ -13,4 +14,3 @@
 @import "common/base/*";
 @import "common/d-editor";
 @import "common/topic-timeline";
-@import "common/fonts";

app/assets/stylesheets/wizard.scss

@@ -1,3 +1,4 @@
+@import "wizard_fonts";
 @import "color_definitions";
 @import "vendor/normalize";
 @import "vendor/normalize-ext";
@@ -7,7 +8,6 @@
 @import "common/foundation/mixins";
 @import "common/select-kit/*";
 @import "common/components/svg";
-@import "common/fonts";
 
 body.wizard {
   background-color: #fff;

app/helpers/application_helper.rb

@@ -119,7 +119,6 @@ module ApplicationHelper
     list << 'ios-device' if ios_device?
     list << 'rtl' if rtl?
     list << text_size_class
-    list << font_class
     list << 'anon' unless current_user
     list.join(' ')
   end
@@ -152,10 +151,6 @@ module ApplicationHelper
     "text-size-#{size}"
   end
 
-  def font_class
-    "font-#{SiteSetting.base_font.tr("_", "-")}"
-  end
-
   def escape_unicode(javascript)
     if javascript
       javascript = javascript.scrub

config/application.rb

@@ -311,39 +311,7 @@ module Discourse
 
     # Use discourse-fonts gem to symlink fonts and generate .scss file
     fonts_path = File.join(config.root, 'public/fonts')
-
-    # TODO cache breaker should be supplied from both the gem
-    # and the app
-    # we may want to keep a cache breaker in Discourse in case somehow
-    # Discourse changes rules for the particular asset
-    #
-    # TODO this code should move to SCSS compilation pipeline, we can have the
-    # font gem inject some variables into the SCSS that it can consume, instead of writing a file
-    # on boot
-    font_cache_breaker = "1"
-
     Discourse::Utils.atomic_ln_s(DiscourseFonts.path_for_fonts, fonts_path)
-    File.open(File.join(config.root, 'app/assets/stylesheets/common/fonts.scss'), 'w') do |file|
-      DiscourseFonts.fonts.each do |font|
-        file.write <<~EOF
-          .font-#{font[:key].tr("_", "-")} {
-            --font-family: #{font[:name]};
-          }
-        EOF
-
-        if font[:variants].present?
-          font[:variants].each do |variant|
-            file.write <<~EOF
-              @font-face {
-                font-family: #{font[:name]};
-                src: asset-url("/fonts/#{variant[:filename]}?#{font_cache_breaker}") format("#{variant[:format]}");
-                font-weight: #{variant[:weight]};
-              }
-            EOF
-          end
-        end
-      end
-    end
 
     require_dependency 'stylesheet/manager'
     require_dependency 'svg_sprite/svg_sprite'

config/initializers/014-track-setting-changes.rb

@@ -27,6 +27,8 @@ DiscourseEvent.on(:site_setting_changed) do |name, old_value, new_value|
     end
   end
 
+  Stylesheet::Manager.clear_core_cache!(["desktop", "mobile", "admin"]) if name == :base_font
+
   Report.clear_cache(:storage_stats) if [:backup_location, :s3_backup_bucket].include?(name)
 
   if name == :slug_generation_method

config/locales/client.en.yml

@@ -4910,5 +4910,6 @@ en:
 
       previews:
         topic_title: "Discussion topic"
+        font_title: "%{font} Font"
         share_button: "Share"
         reply_button: "Reply"

lib/stylesheet/importer.rb

@@ -40,6 +40,35 @@ module Stylesheet
         end
       end
 
+      register_import "font" do
+        font = DiscourseFonts.fonts.find { |f| f[:key] == SiteSetting.base_font }
+
+        contents = <<~EOF
+          #{font_css(font)}
+
+          :root {
+            --font-family: #{font[:stack]};
+          }
+        EOF
+
+        Import.new("font.scss", source: contents)
+      end
+
+      register_import "wizard_fonts" do
+        contents = +""
+
+        DiscourseFonts.fonts.each do |font|
+          contents << font_css(font)
+          contents << <<~EOF
+            .font-#{font[:key].tr("_", "-")} {
+              font-family: #{font[:stack]};
+            }
+          EOF
+        end
+
+        Import.new("wizard_fonts.scss", source: contents)
+      end
+
       register_import "plugins_variables" do
         import_files(DiscoursePluginRegistry.sass_variables)
       end
@@ -223,6 +252,24 @@ module Stylesheet
       "body.category-#{category.slug}, body.category-#{category.full_slug} { background-image: url(#{upload_cdn_path(category.uploaded_background.url)}) }\n"
     end
 
+    def font_css(font)
+      contents = +""
+
+      if font[:variants].present?
+        font[:variants].each do |variant|
+          contents << <<~EOF
+            @font-face {
+              font-family: #{font[:name]};
+              src: asset-url("/fonts/#{variant[:filename]}?v=#{DiscourseFonts::VERSION}") format("#{variant[:format]}");
+              font-weight: #{variant[:weight]};
+            }
+          EOF
+        end
+      end
+
+      contents
+    end
+
     def to_scss_variable(name, value)
       escaped = SassC::Script::Value::String.quote(value, sass: true)
       "$#{name}: unquote(#{escaped});\n"

lib/stylesheet/manager.rb

@@ -398,7 +398,7 @@ class Stylesheet::Manager
 
     if cs || category_updated > 0
       theme_color_defs = theme&.resolve_baked_field(:common, :color_definitions)
-      Digest::SHA1.hexdigest "#{RailsMultisite::ConnectionManagement.current_db}-#{cs&.id}-#{cs&.version}-#{theme_color_defs}-#{Stylesheet::Manager.last_file_updated}-#{category_updated}"
+      Digest::SHA1.hexdigest "#{RailsMultisite::ConnectionManagement.current_db}-#{cs&.id}-#{cs&.version}-#{theme_color_defs}-#{Stylesheet::Manager.last_file_updated}-#{category_updated}-#{SiteSetting.base_font}"
     else
       digest_string = "defaults-#{Stylesheet::Manager.last_file_updated}"
 

spec/components/stylesheet/importer_spec.rb

@@ -35,6 +35,19 @@ describe Stylesheet::Importer do
     expect(compile_css("category_backgrounds")).to include("body.category-#{category.full_slug}{background-image:url(https://s3.cdn/original")
   end
 
+  it "includes font variable" do
+    expect(compile_css("desktop"))
+      .to include(":root{--font-family: Helvetica, Arial, sans-serif}")
+  end
+
+  it "includes all fonts in wizard" do
+    expect(compile_css("wizard").scan(/\.font-/).count)
+      .to eq(DiscourseFonts.fonts.count)
+
+    expect(compile_css("wizard").scan(/@font-face/).count)
+      .to eq(DiscourseFonts.fonts.map { |f| f[:variants]&.count || 0 }.sum)
+  end
+
   context "#theme_variables" do
 
     let!(:theme) { Fabricate(:theme) }