[Sass Extensions] The inline_image() function can now be used to gene…

…rate a data url that embeds the image data in the generated css file.

This function works like image_url() in that it expects the image to be a path relative to the images directory.

There are clear advantages and disadvantages to this approach.
See http://en.wikipedia.org/wiki/Data_URI_scheme for more details.

NOTE: Neither IE6 nor IE7 support data urls.
Using this approach with large images is discouraged.

examples/blueprint_semantic/src/screen.sass

@@ -10,7 +10,7 @@ body.blueprint
   .container
     +container
   .showgrid
-    +showgrid
+    :background= inline_image("grid.png")
   hr
     +colruler
   hr.space

lib/compass/sass_extensions/functions.rb

@@ -1,7 +1,7 @@
 module Compass::SassExtensions::Functions
 end
 
-['selectors', 'enumerate', 'image_url', 'display'].each do |func|
+['selectors', 'enumerate', 'image_url', 'display', 'inline_image'].each do |func|
   require File.join(File.dirname(__FILE__), 'functions', func)
 end
 
@@ -10,6 +10,7 @@ module Sass::Script::Functions
   include Compass::SassExtensions::Functions::Enumerate
   include Compass::SassExtensions::Functions::ImageUrl
   include Compass::SassExtensions::Functions::Display
+  include Compass::SassExtensions::Functions::InlineImage
 end
 
 # Wierd that this has to be re-included to pick up sub-modules. Ruby bug?

lib/compass/sass_extensions/functions/inline_image.rb

@@ -0,0 +1,35 @@
+require 'base64'
+module Compass::SassExtensions::Functions::InlineImage
+
+  def inline_image(path, mime_type = nil)
+    path = path.value
+    real_path = File.join(Compass.configuration.project_path, Compass.configuration.images_dir, path)
+    url = "url('data:#{compute_mime_type(path,mime_type)};base64,#{data(real_path)}')"
+    Sass::Script::String.new(url)
+  end
+
+private
+  def compute_mime_type(path, mime_type)
+    return mime_type if mime_type
+    case path
+    when /\.png$/i
+      'image/png'
+    when /\.jpe?g$/i
+      'image/jpeg'
+    when /\.gif$/i
+      'image/gif'
+    when /\.([a-zA-Z]+)$/
+      "image/#{Regexp.last_match(1).downcase}"
+    else
+      raise Compass::Error, "A mime type could not be determined for #{path}, please specify one explicitly."
+    end
+  end
+
+  def data(real_path)
+    if File.readable?(real_path)
+      Base64.encode64(File.read(real_path)).gsub("\n","")
+    else
+      raise Compass::Error, "File not found or cannot be read: #{real_path}"
+    end
+  end
+end

test/fixtures/stylesheets/image_urls/css/screen.css

@@ -1 +1,3 @@
 .showgrid { background-image: url(http://assets2.example.com/images/grid.png?busted=true); }
+
+.inlinegrid { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAUEAYAAACv1qP4AAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAAZ0lEQVRYw+3QwQ2AIBAFUTEUwI3+uzN7gDscsIgxEuO8An52J11X73OudfxMraXkzHfO3Y98nQEhA0IGhAwIGRAyIGRAyICQASEDQgaEDAgZEDIgZEDIgJABoZzSGK3tPuN9ERFP7Nw4fg+c5g8V1wAAAABJRU5ErkJggg=='); }

test/fixtures/stylesheets/image_urls/sass/screen.sass

@@ -1,2 +1,6 @@
 .showgrid
   background-image= image_url("grid.png")
+
+.inlinegrid
+  background-image= inline_image("grid.png")
+