From 60ed9d5a996c74ec8b62a0d300af91a9daeb151f Mon Sep 17 00:00:00 2001 From: Alaa Sarhan Date: Thu, 23 Feb 2017 15:12:10 +0100 Subject: [PATCH] Add single-quotes and css3 options. Reorder css prooperties alphabetically --- lib/fontcustom.rb | 4 +- lib/fontcustom/cli.rb | 8 ++- lib/fontcustom/generator/template.rb | 58 +++++++++++-------- .../templates/_fontcustom-rails.scss | 4 +- lib/fontcustom/templates/_fontcustom.scss | 4 +- .../templates/fontcustom-preview.html | 4 +- lib/fontcustom/templates/fontcustom.css | 4 +- lib/fontcustom/templates/fontcustom.yml | 5 ++ spec/fontcustom/cli_spec.rb | 36 ++++++++++++ 9 files changed, 92 insertions(+), 35 deletions(-) diff --git a/lib/fontcustom.rb b/lib/fontcustom.rb index 03fbe005..e033faf0 100644 --- a/lib/fontcustom.rb +++ b/lib/fontcustom.rb @@ -38,6 +38,8 @@ def gem_lib :no_hash => false, :debug => false, :force => false, - :quiet => false + :quiet => false, + :single_quotes => false, + :css3 => false } end diff --git a/lib/fontcustom/cli.rb b/lib/fontcustom/cli.rb index 481e27e2..bc5bf3c0 100644 --- a/lib/fontcustom/cli.rb +++ b/lib/fontcustom/cli.rb @@ -25,7 +25,7 @@ class CLI < Thor class_option :font_name, :aliases => %w|--name -n|, :type => :string, :desc => "The font's name. Also determines the file names of generated templates.", :default => DEFAULT_OPTIONS[:font_name] - + class_option :font_design_size, :aliases => %s|--size -s|, :type => :numeric, :desc => "Size (in pica points) for which this font is designed.", :default => DEFAULT_OPTIONS[:font_design_size] @@ -64,6 +64,12 @@ class CLI < Thor class_option :force, :aliases => "-F", :type => :boolean, :desc => "Forces compilation, even if inputs have not changed." + class_option :single_quotes, :aliases => %w|--signle-quotes -Q|, :type => :boolean, + :desc => "Use single quotes in generated CSS and SCSS templates" + + class_option :css3, :type => :boolean, + :desc => "Ensure CSS3 compliant css/scss" + class_option :quiet, :aliases => "-q", :type => :boolean, :desc => "Hide status messages." diff --git a/lib/fontcustom/generator/template.rb b/lib/fontcustom/generator/template.rb index d7f107c5..1b678a0e 100644 --- a/lib/fontcustom/generator/template.rb +++ b/lib/fontcustom/generator/template.rb @@ -137,30 +137,30 @@ def font_face(style = {}) # With and without Base64 if @options[:base64] string = %Q|@font-face { - font-family: "#{font_name}"; - src: #{url}("#{path}.eot?") format("embedded-opentype"); - font-weight: normal; + font-family: #{quote}#{font_name}#{quote}; font-style: normal; + font-weight: normal; + src: #{url}(#{quote}#{path}.eot?#{quote}) format(#{quote}embedded-opentype#{quote}); } @font-face { - font-family: "#{font_name}"; - src: url("data:application/x-font-woff;charset=utf-8;base64,#{woff_base64}") format("woff"), - #{url}("#{path}.ttf") format("truetype"), - #{url}("#{path}.svg##{font_name}") format("svg"); - font-weight: normal; + font-family: #{quote}#{font_name}#{quote}; font-style: normal; + font-weight: normal; + src: url(#{quote}data:application/x-font-woff;charset=utf-8;base64,#{woff_base64}#{quote}) format(#{quote}woff#{quote}), + #{url}(#{quote}#{path}.ttf#{quote}) format(#{quote}truetype#{quote}), + #{url}(#{quote}#{path}.svg##{font_name}#{quote}) format(#{quote}svg#{quote}); }| else string = %Q|@font-face { - font-family: "#{font_name}"; - src: #{url}("#{path}.eot"); - src: #{url}("#{path}.eot?#iefix") format("embedded-opentype"), - #{url}("#{path}.woff") format("woff"), - #{url}("#{path}.ttf") format("truetype"), - #{url}("#{path}.svg##{font_name}") format("svg"); - font-weight: normal; + font-family: #{quote}#{font_name}#{quote}; font-style: normal; + font-weight: normal; + src: #{url}(#{quote}#{path}.eot#{quote}); + src: #{url}(#{quote}#{path}.eot?#iefix#{quote}) format(#{quote}embedded-opentype#{quote}), + #{url}(#{quote}#{path}.woff#{quote}) format(#{quote}woff#{quote}), + #{url}(#{quote}#{path}.ttf#{quote}) format(#{quote}truetype#{quote}), + #{url}(#{quote}#{path}.svg##{font_name}#{quote}) format(#{quote}svg#{quote}); }| end @@ -169,8 +169,8 @@ def font_face(style = {}) @media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { - font-family: "#{font_name}"; - src: #{url}("#{path}.svg##{font_name}") format("svg"); + font-family: #{quote}#{font_name}#{quote}; + src: #{url}(#{quote}#{path}.svg##{font_name}#{quote}) format(#{quote}svg#{quote}); } }| string @@ -183,32 +183,40 @@ def woff_base64 def glyph_selectors output = @glyphs.map do |name, value| - @options[:css_selector].sub("{{glyph}}", name.to_s) + ":before" + @options[:css_selector].sub("{{glyph}}", name.to_s) + before_selector end output.join ",\n" end def glyph_properties %Q| display: inline-block; - font-family: "#{font_name}"; + font-family: #{quote}#{font_name}#{quote}; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-smoothing: antialiased; font-style: normal; - font-weight: normal; font-variant: normal; + font-weight: normal; line-height: 1; text-decoration: inherit; text-rendering: optimizeLegibility; - text-transform: none; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-smoothing: antialiased;| + text-transform: none;| end def glyphs output = @glyphs.map do |name, value| - %Q|#{@options[:css_selector].sub('{{glyph}}', name.to_s)}:before { content: "\\#{value[:codepoint].to_s(16)}"; }| + %Q|#{@options[:css_selector].sub('{{glyph}}', name.to_s)}#{before_selector} { content: #{quote}\\#{value[:codepoint].to_s(16)}#{quote}; }| end output.join "\n" end + + def quote + @quote ||= @options[:single_quotes] ? "'" : '"' + end + + def before_selector + @before_selector ||= @options[:css3] ? '::before' : ':before' + end end end end diff --git a/lib/fontcustom/templates/_fontcustom-rails.scss b/lib/fontcustom/templates/_fontcustom-rails.scss index cc162107..e378b5ef 100644 --- a/lib/fontcustom/templates/_fontcustom-rails.scss +++ b/lib/fontcustom/templates/_fontcustom-rails.scss @@ -4,9 +4,9 @@ <%= font_face(url: "font-url", path: @font_path_alt) %> -[data-icon]:before { content: attr(data-icon); } +[data-icon]<%= before_selector %> { content: attr(data-icon); } -[data-icon]:before, +[data-icon]<%= before_selector %>, <%= glyph_selectors %> { <%= glyph_properties %> } diff --git a/lib/fontcustom/templates/_fontcustom.scss b/lib/fontcustom/templates/_fontcustom.scss index c8c775b8..e49304b2 100644 --- a/lib/fontcustom/templates/_fontcustom.scss +++ b/lib/fontcustom/templates/_fontcustom.scss @@ -4,9 +4,9 @@ <%= font_face(path: @font_path_alt) %> -[data-icon]:before { content: attr(data-icon); } +[data-icon]<%= before_selector %> { content: attr(data-icon); } -[data-icon]:before, +[data-icon]<%= before_selector %>, <%= glyph_selectors %> { <%= glyph_properties %> } diff --git a/lib/fontcustom/templates/fontcustom-preview.html b/lib/fontcustom/templates/fontcustom-preview.html index b640ffab..783a380c 100644 --- a/lib/fontcustom/templates/fontcustom-preview.html +++ b/lib/fontcustom/templates/fontcustom-preview.html @@ -123,9 +123,9 @@ <%= font_face(path: @font_path_preview) %> - [data-icon]:before { content: attr(data-icon); } + [data-icon]<%= before_selector %> { content: attr(data-icon); } - [data-icon]:before, + [data-icon]<%= before_selector %>, <%= glyph_selectors %> { <%= glyph_properties %> } diff --git a/lib/fontcustom/templates/fontcustom.css b/lib/fontcustom/templates/fontcustom.css index f5dfd6e2..342150db 100644 --- a/lib/fontcustom/templates/fontcustom.css +++ b/lib/fontcustom/templates/fontcustom.css @@ -4,9 +4,9 @@ <%= font_face %> -[data-icon]:before { content: attr(data-icon); } +[data-icon]<%= before_selector %> { content: attr(data-icon); } -[data-icon]:before, +[data-icon]<%= before_selector %>, <%= glyph_selectors %> { <%= glyph_properties %> } diff --git a/lib/fontcustom/templates/fontcustom.yml b/lib/fontcustom/templates/fontcustom.yml index 69a38ba7..5ae8a57a 100644 --- a/lib/fontcustom/templates/fontcustom.yml +++ b/lib/fontcustom/templates/fontcustom.yml @@ -30,6 +30,11 @@ # Hide status messages. #quiet: true +# Use single quotes in generated CSS and SCSS templates (default false) +# single_quotes: true + +# Ensure CSS3 compliant css/scss (default false) +# css3: true # ----------------------------------------------------------------------------- # Input / Output Locations diff --git a/spec/fontcustom/cli_spec.rb b/spec/fontcustom/cli_spec.rb index a76ce3f7..ed31afa9 100644 --- a/spec/fontcustom/cli_spec.rb +++ b/spec/fontcustom/cli_spec.rb @@ -26,5 +26,41 @@ expect(File.read(css)).to match("../foo/bar/") end end + + context 'single quotes' do + it "should generate fonts and templates with single quotes" do + live_test do |testdir| + Fontcustom::CLI.start ["compile", "vectors", "--templates", "preview", "css", "scss-rails", "--single-quotes"] + preview = File.join testdir, "fontcustom", "fontcustom-preview.html" + + expect(Dir.glob(File.join(testdir, "fontcustom", "fontcustom_*\.{ttf,svg,woff,eot}")).length).to eq(4) + expect(File.exists?(preview)).to be_truthy + + generated_css = File.read Dir.glob(File.join(testdir, "fontcustom", "*.css")).first + expect(generated_css.scan('"').count).to be 0 + + generated_scss = File.read Dir.glob(File.join(testdir, "fontcustom", "*.scss")).first + expect(generated_scss.scan('"').count).to be 0 + end + end + end + + context 'css3' do + it "should generate css3 stylesheets" do + live_test do |testdir| + Fontcustom::CLI.start ["compile", "vectors", "--templates", "preview", "css", "scss-rails", "--css3"] + preview = File.join testdir, "fontcustom", "fontcustom-preview.html" + + expect(Dir.glob(File.join(testdir, "fontcustom", "fontcustom_*\.{ttf,svg,woff,eot}")).length).to eq(4) + expect(File.exists?(preview)).to be_truthy + + generated_css = File.read Dir.glob(File.join(testdir, "fontcustom", "*.css")).first + expect(generated_css.scan(/[^\:]\:before/).count).to be 0 + + generated_scss = File.read Dir.glob(File.join(testdir, "fontcustom", "*.scss")).first + expect(generated_scss.scan(/[^\:]\:before/).count).to be 0 + end + end + end end end