From 5a015b3824f280af56f1265bf8c3a7c64a252621 Mon Sep 17 00:00:00 2001
From: Chris Eppstein <chris@eppsteins.net>
Date: Sun, 28 Jun 2009 12:29:19 -0700
Subject: [PATCH] [Sass Extensions] The inline_image() function can now be used
 to generate 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   |  2 +-
 lib/compass/sass_extensions/functions.rb      |  3 +-
 .../sass_extensions/functions/inline_image.rb | 35 +++++++++++++++++++
 .../stylesheets/image_urls/css/screen.css     |  2 ++
 .../stylesheets/image_urls/sass/screen.sass   |  4 +++
 5 files changed, 44 insertions(+), 2 deletions(-)
 create mode 100644 lib/compass/sass_extensions/functions/inline_image.rb

diff --git a/examples/blueprint_semantic/src/screen.sass b/examples/blueprint_semantic/src/screen.sass
index 8868f644..9ad7bd09 100644
--- a/examples/blueprint_semantic/src/screen.sass
+++ b/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
diff --git a/lib/compass/sass_extensions/functions.rb b/lib/compass/sass_extensions/functions.rb
index 7ba70db3..5dd49a88 100644
--- a/lib/compass/sass_extensions/functions.rb
+++ b/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?
diff --git a/lib/compass/sass_extensions/functions/inline_image.rb b/lib/compass/sass_extensions/functions/inline_image.rb
new file mode 100644
index 00000000..97b7b0e2
--- /dev/null
+++ b/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
diff --git a/test/fixtures/stylesheets/image_urls/css/screen.css b/test/fixtures/stylesheets/image_urls/css/screen.css
index 5bceb0e8..90c4101a 100644
--- a/test/fixtures/stylesheets/image_urls/css/screen.css
+++ b/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=='); }
diff --git a/test/fixtures/stylesheets/image_urls/sass/screen.sass b/test/fixtures/stylesheets/image_urls/sass/screen.sass
index 52d81ccf..75c55c4b 100644
--- a/test/fixtures/stylesheets/image_urls/sass/screen.sass
+++ b/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")
+