From f061aee818c51d88359e9b1d4059c5e85be85891 Mon Sep 17 00:00:00 2001 From: Neil Lalonde Date: Wed, 23 Oct 2019 15:41:58 -0400 Subject: [PATCH] FEATURE: support SCSS in custom email style In the CSS tab of Admin > Customize > Email Style, SCSS can now be used. --- .../components/email-styles-editor.js.es6 | 5 ++++ .../components/email-styles-editor.hbs | 2 +- app/models/email_style.rb | 8 +++++ app/services/email_style_updater.rb | 29 ++++++++++++++----- config/site_settings.yml | 3 ++ lib/email/styles.rb | 2 +- spec/integration/email_style_spec.rb | 2 ++ spec/services/email_style_updater_spec.rb | 22 +++++++++++--- 8 files changed, 59 insertions(+), 14 deletions(-) diff --git a/app/assets/javascripts/admin/components/email-styles-editor.js.es6 b/app/assets/javascripts/admin/components/email-styles-editor.js.es6 index 75811ec41c1..c0b6c732e98 100644 --- a/app/assets/javascripts/admin/components/email-styles-editor.js.es6 +++ b/app/assets/javascripts/admin/components/email-styles-editor.js.es6 @@ -4,6 +4,11 @@ import computed from "ember-addons/ember-computed-decorators"; export default Component.extend({ editorId: Ember.computed.reads("fieldName"), + @computed("fieldName") + currentEditorMode(fieldName) { + return fieldName === "css" ? "scss" : fieldName; + }, + @computed("fieldName", "styles.html", "styles.css") resetDisabled(fieldName) { return ( diff --git a/app/assets/javascripts/admin/templates/components/email-styles-editor.hbs b/app/assets/javascripts/admin/templates/components/email-styles-editor.hbs index 883149644d2..e03feb7cb7b 100644 --- a/app/assets/javascripts/admin/templates/components/email-styles-editor.hbs +++ b/app/assets/javascripts/admin/templates/components/email-styles-editor.hbs @@ -9,7 +9,7 @@ -{{ace-editor content=editorContents mode=fieldName editorId=editorId}} +{{ace-editor content=editorContents mode=currentEditorMode editorId=editorId}}
diff --git a/app/models/email_style.rb b/app/models/email_style.rb index 6d460ccbd19..d02de6a59a3 100644 --- a/app/models/email_style.rb +++ b/app/models/email_style.rb @@ -17,6 +17,10 @@ class EmailStyle SiteSetting.email_custom_css || default_css end + def compiled_css + SiteSetting.email_custom_css_compiled || self.class.default_css_compiled + end + def default_html self.class.default_template end @@ -34,4 +38,8 @@ class EmailStyle def self.default_css '' end + + def self.default_css_compiled + '' + end end diff --git a/app/services/email_style_updater.rb b/app/services/email_style_updater.rb index d0fb9186365..d13e84b78d6 100644 --- a/app/services/email_style_updater.rb +++ b/app/services/email_style_updater.rb @@ -10,26 +10,39 @@ class EmailStyleUpdater end def update(attrs) + if attrs.has_key?(:html) && !attrs[:html].include?('%{email_content}') + @errors << I18n.t( + 'email_style.html_missing_placeholder', + placeholder: '%{email_content}' + ) + end + + if attrs.has_key?(:css) + begin + compiled_css = SassC::Engine.new(attrs[:css], style: :compressed).render + rescue SassC::SyntaxError => e + # @errors << I18n.t('email_style.css_syntax_error') + @errors << e.message[0...(e.message.index("\n"))] + end + end + + return false unless @errors.empty? + if attrs.has_key?(:html) if attrs[:html] == EmailStyle.default_template SiteSetting.remove_override!(:email_custom_template) else - if !attrs[:html].include?('%{email_content}') - @errors << I18n.t( - 'email_style.html_missing_placeholder', - placeholder: '%{email_content}' - ) - else - SiteSetting.email_custom_template = attrs[:html] - end + SiteSetting.email_custom_template = attrs[:html] end end if attrs.has_key?(:css) if attrs[:css] == EmailStyle.default_css SiteSetting.remove_override!(:email_custom_css) + SiteSetting.remove_override!(:email_custom_css_compiled) else SiteSetting.email_custom_css = attrs[:css] + SiteSetting.email_custom_css_compiled = compiled_css end end diff --git a/config/site_settings.yml b/config/site_settings.yml index d4ca816af7a..6a44f4b6099 100644 --- a/config/site_settings.yml +++ b/config/site_settings.yml @@ -1044,6 +1044,9 @@ email: email_custom_css: default: "" hidden: true + email_custom_css_compiled: + default: "" + hidden: true email_total_attachment_size_limit_kb: default: 0 max: 51200 diff --git a/lib/email/styles.rb b/lib/email/styles.rb index b3ee7041037..9354f52666b 100644 --- a/lib/email/styles.rb +++ b/lib/email/styles.rb @@ -36,7 +36,7 @@ module Email def custom_styles return @custom_styles unless @custom_styles.nil? - css = EmailStyle.new.css + css = EmailStyle.new.compiled_css @custom_styles = {} if !css.blank? diff --git a/spec/integration/email_style_spec.rb b/spec/integration/email_style_spec.rb index e035aec1028..bfe08f16a33 100644 --- a/spec/integration/email_style_spec.rb +++ b/spec/integration/email_style_spec.rb @@ -6,6 +6,7 @@ describe EmailStyle do before do SiteSetting.email_custom_template = "

FOR YOU

%{email_content}
" SiteSetting.email_custom_css = 'h1 { color: red; } div.body { color: #FAB; }' + SiteSetting.email_custom_css_compiled = SiteSetting.email_custom_css end after do @@ -93,6 +94,7 @@ describe EmailStyle do context 'with some bad css' do before do SiteSetting.email_custom_css = '@import "nope.css"; h1 {{{ size: really big; ' + SiteSetting.email_custom_css_compiled = SiteSetting.email_custom_css end it "can render the html" do diff --git a/spec/services/email_style_updater_spec.rb b/spec/services/email_style_updater_spec.rb index 3ef6f1c7ea9..82281de7dd2 100644 --- a/spec/services/email_style_updater_spec.rb +++ b/spec/services/email_style_updater_spec.rb @@ -7,6 +7,12 @@ describe EmailStyleUpdater do let(:default_html) { File.read("#{Rails.root}/app/views/email/default_template.html") } let(:updater) { EmailStyleUpdater.new(admin) } + def expect_settings_to_be_unset + expect(SiteSetting.email_custom_template).to_not be_present + expect(SiteSetting.email_custom_css).to_not be_present + expect(SiteSetting.email_custom_css_compiled).to_not be_present + end + describe 'update' do it 'can change the settings' do expect( @@ -17,20 +23,20 @@ describe EmailStyleUpdater do ).to eq(true) expect(SiteSetting.email_custom_template).to eq('For you: %{email_content}') expect(SiteSetting.email_custom_css).to eq('h1 { color: blue; }') + expect(SiteSetting.email_custom_css_compiled.strip).to eq('h1{color:blue}') end it 'will not store defaults' do updater.update(html: default_html, css: '') - expect(SiteSetting.email_custom_template).to_not be_present - expect(SiteSetting.email_custom_css).to_not be_present + expect_settings_to_be_unset end it 'can clear settings if defaults given' do SiteSetting.email_custom_template = 'For you: %{email_content}' SiteSetting.email_custom_css = 'h1 { color: blue; }' + SiteSetting.email_custom_css_compiled = 'h1{color:blue}' updater.update(html: default_html, css: '') - expect(SiteSetting.email_custom_template).to_not be_present - expect(SiteSetting.email_custom_css).to_not be_present + expect_settings_to_be_unset end it 'fails if html is missing email_content' do @@ -41,6 +47,14 @@ describe EmailStyleUpdater do placeholder: '%{email_content}' ) ) + expect_settings_to_be_unset + end + + it 'fails if css is not valid scss' do + expect(updater.update(html: 'For you: %{email_content}', css: 'h1 { color: blue;')).to eq(false) + expect(updater.errors).to_not be_empty + expect(updater.errors.first).to include('Invalid CSS after') + expect_settings_to_be_unset end end end