Enable CSS3 Pseudo Elements (FontCustom#310)

* Add CSS3 option / Use CSS3 option to select correct PsuedoElement
* Add Template Helper for get psuedo element
* Update README to show pseudo_element helper

README.md

@@ -7,7 +7,7 @@
 **Icon fonts from the command line.**
 
 Generate cross-browser icon fonts and supporting files (@font-face CSS, etc.)
-from a collection of SVGs 
+from a collection of SVGs
 ([example](https://rawgit.com/FontCustom/fontcustom/master/spec/fixtures/example/example-preview.html)).
 
 [Changelog](https://github.com/FontCustom/fontcustom/blob/master/CHANGELOG.md)<br>
@@ -150,7 +150,7 @@ Now the font is adjustable to css 'font-size' and 'color'.
 
 You can save generated fonts, CSS, and other files to different locations by
 using `fontcustom.yml`. Font Custom can also read input vectors and templates
-from different places. 
+from different places.
 
 Just edit the `input` and `output` YAML hashes and their corresponding keys.
 
@@ -181,6 +181,7 @@ helpers:
 * `@manifest`: a hash of options, generated file paths, code points, and just about everything else Font Custom knows.
 * `@font_path`: the path from CSS to font files (without an extension)
 * `@font_path_alt`: if `preprocessor_path` was set, this is the modified path
+* `pseudo_element`: if `css3` was set to true, then it will print `::before`. Otherwise the PseudoElement will be `:before`
 
 `font_face` accepts a hash that modifies the CSS url() function and the path of
 the font files (`font_face(url: "font-url", path: @font_path_alt)`).

lib/fontcustom.rb

@@ -36,6 +36,7 @@ def gem_lib
     :preprocessor_path => nil,
     :autowidth => false,
     :no_hash => false,
+    :css3 => false,
     :debug => false,
     :force => false,
     :quiet => false,

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]
@@ -52,6 +52,9 @@ class CLI < Thor
     class_option :autowidth, :aliases => "-A", :type => :boolean,
       :desc => "Horizontally fit glyphs to their individual vector widths."
 
+    class_option :css3, :type => :boolean,
+      :desc => "Use CSS3 Pseudo Elements"
+
     class_option :no_hash, :aliases => "-h", :type => :boolean,
       :desc => "Generate fonts without asset-busting hashes."
 

lib/fontcustom/generator/template.rb

@@ -12,6 +12,12 @@ class Template
       def initialize(manifest)
         @manifest = Fontcustom::Manifest.new manifest
         @options = @manifest.get :options
+
+        @pseudo_element = ':before';
+        if @options[:css3]
+          @pseudo_element = '::before';
+        end
+
       end
 
       def generate
@@ -183,7 +189,7 @@ 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) + @pseudo_element
         end
         output.join ",\n"
       end
@@ -205,10 +211,14 @@ def glyph_properties
 
       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)}#{@pseudo_element} { content: "\\#{value[:codepoint].to_s(16)}"; }|
         end
         output.join "\n"
       end
+
+      def pseudo_element
+        @pseudo_element
+      end
     end
   end
 end

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]<%= pseudo_element %> { content: attr(data-icon); }
 
-[data-icon]:before,
+[data-icon]<%= pseudo_element %>,
 <%= glyph_selectors %> {
 <%= glyph_properties %>
 }

lib/fontcustom/templates/_fontcustom.scss

@@ -4,9 +4,9 @@
 
 <%= font_face(path: @font_path_alt) %>
 
-[data-icon]:before { content: attr(data-icon); }
+[data-icon]<%= pseudo_element %> { content: attr(data-icon); }
 
-[data-icon]:before,
+[data-icon]<%= pseudo_element %>,
 <%= glyph_selectors %> {
 <%= glyph_properties %>
 }

lib/fontcustom/templates/fontcustom.css

@@ -4,9 +4,9 @@
 
 <%= font_face %>
 
-[data-icon]:before { content: attr(data-icon); }
+[data-icon]<%= pseudo_element %> { content: attr(data-icon); }
 
-[data-icon]:before,
+[data-icon]<%= pseudo_element %>,
 <%= glyph_selectors %> {
 <%= glyph_properties %>
 }