diff --git a/examples/blueprint_semantic/src/screen.sass b/examples/blueprint_semantic/src/screen.sass index 8868f64462..9ad7bd0948 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 7ba70db317..5dd49a88f1 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 0000000000..97b7b0e2c5 --- /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 5bceb0e8cf..90c4101a1b 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 52d81ccf51..75c55c4b30 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") +