spriteful 0.0.5 → 0.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 73d334005f825ad6112c391af3a52fc0f798b438
-  data.tar.gz: 96c043607fc238a36029ca89877f5607b534d6c7
+  metadata.gz: 2b498ca0bbb52dc394d82e7f70a97da8cc396e95
+  data.tar.gz: 12de0e904606ee2d3db4906ced8e4bf0aa83eae2
 SHA512:
-  metadata.gz: 3d1064cdcf852ac57d17a5ca6bed3105a9211563a03886855f24e1af4b9cfc2e1ce7a5cac790c8e96820299f3e65d50629ef7f6b06d6b153d81fd403049d677f
-  data.tar.gz: d62e19d7926ab8e76dbe5bdee58600a86fca3cb871a5946c845bba25447f9f51d8b9da82fb3071f1e969ebf9706a7fe47568aff5688b03aaad4f4def731bf358
+  metadata.gz: e750c5e844f876add52a6a778d7958014afb925d56df0cb444f59f7eb30d9020bd935366d1a698b64fa4f0a5e69f81ebaf83d346d24ef47c1dfba0ae14b10056
+  data.tar.gz: cc43b5640091d6985dcf178068521ae140041658668a9f0b3aa8d3976f8deaac4ff7c4db2703401787b870aa8e47058789612fd9c13e977c869bf031b7c9c4dc

data/README.md

@@ -55,7 +55,7 @@ spriteful images/icons -f scss
 }
 ```
 
-You can also choose to genete the code using
+You can also choose to generate the code using
 [Mixin Directives](http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixins).
 
 ```bash
@@ -71,6 +71,17 @@ spriteful images/icons -f scss --mixin
 }
 ```
 
+When using SCSS, the generated stylesheet will have a variable with a list of all images
+inside the generated sprite, so you can hack own your own on top of that.
+
+```scss
+@each $image in $icons-sprite-names {
+  .my-class-for-#{$image} {
+    @extend %icons-sprite-#{$image};
+  }
+}
+```
+
 ### Multiple sprites
 
 You can deal with multiple sprites in a single run. If `images/icons` has a set of images for one
@@ -110,6 +121,29 @@ images under `icons` will generate the `icons.png` and `icons.css` files. This c
 enforces previsibility over generated files and helps when regenating existing sprites whenever
 you need to add a new source to an existing sprite.
 
+## SVG Support
+
+Spriteful has a basic support for dealing with SVG images (and not only PNGs). SVG images
+will be combined along the rest of your images and will be embedded directly on the final
+Stylesheet in the data URI format. Using the `svg` root class (based on Modernizr), the
+data URI will be used for browsers that support SVG images and the composed PNG will work
+as a fallback for legacy browsers.
+
+```css
+.images.update-icon {
+  background-position: 0px -10px;
+}
+
+.svg .images.update-icon {
+  background-image: url('data:image/svg+xml;utf8, SVG XML goes here :)');
+  background-position: 0 0;
+}
+
+```
+
+Future versions of Spriteful could have support for generating composed images as SVG files
+(and not only PNG), so feel free to send a contribution improving the feature.
+
 ## Available options
 
 * `--stylesheets` (`-s`) - Directory to save the generated stylesheet(s), instead of copying them to the clipboard.

data/lib/spriteful/image.rb

@@ -1,3 +1,5 @@
+require 'svg_optimizer'
+
 module Spriteful
   # Internal: Data structure to represent the images that are part
   # of a sprite.
@@ -20,24 +22,38 @@ module Spriteful
     # Public: Gets/sets the left position of the image in a sprite.
     attr_accessor :left
 
-    # Public: Gets the source 'ChunkyPNG::Image'.
+    # Public: Gets the source 'Magick::Image'.
     attr_reader :source
 
     # Public: Initializes an Image, extracting the image
-    # metadata such as width and path supplied by an 'ChunkyPNG::Image'
+    # metadata such as width and path supplied by an 'Magick::Image'
     # object that was initialized from the real image blob.
     #
-    # chunky_image - an 'ChunkyPNG::Image' object.
-    # path         - the path where the image is present.
-    def initialize(chunky_image, path)
-      @source = chunky_image
-      @path   = path
+    # magick_image - an 'Magick::Image' object.
+    def initialize(magick_image)
+      @source = magick_image
+      @path   = magick_image.filename
       @name   = File.basename(@path)
-      @width  = chunky_image.width
-      @height = chunky_image.height
+      @width  = magick_image.columns
+      @height = magick_image.rows
 
       @top    = 0
       @left   = 0
     end
+
+    # Public: Gets the source image contents.
+    #
+    # Returns a String.
+    def blob
+      @blob ||= SvgOptimizer.optimize(File.read(path))
+    end
+
+    # Public: detects if the source is a SVG image
+    # based on its path.
+    #
+    # Returns true or false.
+    def svg?
+      File.extname(@path) == '.svg'
+    end
   end
 end

data/lib/spriteful/sprite.rb

@@ -1,4 +1,4 @@
-require 'chunky_png'
+require 'RMagick'
 
 module Spriteful
   # Public: the 'Sprite' class is responsible for combining a directory
@@ -40,7 +40,7 @@ module Spriteful
     #               :spacing - spacing in pixels that should be placed between
     #                          the images in the sprite. Defaults to 0.
     def initialize(source_dir, destination, options = {})
-      source_pattern = File.join(source_dir, '*.png')
+      source_pattern = File.join(source_dir, '*{.png,.svg}')
       sources = Dir[source_pattern].sort
 
       if sources.size == 0
@@ -53,8 +53,8 @@ module Spriteful
       @name     = File.basename(source_dir)
       @filename = "#{name}.png"
       @path     = File.expand_path(File.join(destination, @filename))
-      sources     = sources.map { |source| [source, ChunkyPNG::Image.from_file(source)] }
-      @images   = initialize_images(Hash[sources])
+      @list     = Magick::ImageList.new(*sources)
+      @images   = initialize_images(@list)
 
       @height, @width = detect_dimensions
     end
@@ -64,11 +64,12 @@ module Spriteful
     #
     # Returns nothing.
     def combine!
-      combined = ChunkyPNG::Image.new(width, height, ChunkyPNG::Color::TRANSPARENT)
+      combined = Magick::Image.new(width, height)
+      combined.opacity = Magick::MaxRGB
       @images.each do |image|
-        combined.compose!(image.source, image.left.abs, image.top.abs)
+        combined.composite!(image.source, image.left.abs, image.top.abs, Magick::SrcOverCompositeOp)
       end
-      @blob = combined.to_blob(:best_compression)
+      @blob = combined.to_blob { self.format = 'png' }
     end
 
     # Public: exposes the source images found in the 'source'
@@ -110,14 +111,14 @@ module Spriteful
     # 'left' coordinates that the image will be placed
     # in the sprite.
     #
-    # sources - a Hash of source paths and image objects.
-    #
-    # Returns an Array.
-    def initialize_images(sources)
+    # list - a 'RMagick::ImageList' of sources.
+    # Returns an Array
+    def initialize_images(list)
       sprite_position = 0
       images = []
-      sources.each_with_index do |(path, chunky_image), index|
-        image = Image.new(chunky_image, path)
+
+      list.to_a.each_with_index do |magick_image, index|
+        image = Image.new(magick_image)
 
         if vertical?
           image.top = sprite_position

data/lib/spriteful/stylesheet.rb

@@ -1,5 +1,5 @@
-require 'pathname'
 require 'erb'
+require 'pathname'
 
 module Spriteful
   # Public: class responsible for putting together the CSS code
@@ -122,5 +122,15 @@ module Spriteful
         path.relative_path_from(@destination)
       end
     end
+
+    # Internal: Gets an embeddable Data URI of the image if it
+    # is a SVG image.
+    #
+    # Returns a String.
+    def data_uri(image)
+      if image.svg?
+        %['data:image/svg+xml;utf8,#{image.blob.gsub(/\r?\n/, "")}']
+      end
+    end
   end
 end

data/lib/spriteful/stylesheets/template.css.erb

@@ -21,4 +21,10 @@
 .<%= class_name_for(sprite) %>.<%= class_name_for(image) %> {
   background-position: <%= image.left %>px <%= image.top %>px;
 }
+<% if image.svg? %>
+.svg .<%= class_name_for(sprite) %>.<%= class_name_for(image) %> {
+  background-image: url(<%= data_uri(image) %>);
+  background-position: 0 0;
+}
+<% end -%>
 <% end %>

data/lib/spriteful/stylesheets/template.scss.erb

@@ -16,6 +16,9 @@
 //   <%= extension_strategy %><%= class_name_for(sprite) %>-sprite-<%= class_name_for(sprite.images.first) %>;
 //   // Your styles here.
 // }
+//
+// There also will be available a variable named '$<%= class_name_for(sprite) %>-sprite-names'
+// with all the images inside this sprite.
 
 <%= extension_prefix %><%= class_name_for(sprite) %>-sprite {
   <%- if rails? -%>
@@ -29,5 +32,13 @@
 <%= extension_prefix %><%= class_name_for(sprite) %>-sprite-<%= class_name_for(image) %> {
   <%= extension_strategy %><%= class_name_for(sprite) %>-sprite;
   background-position: <%= image.left %>px <%= image.top %>px;
+  <%- if image.svg? %>
+  .svg & {
+    background-image: url(<%= data_uri(image) %>);
+    background-position: 0 0;
+  }
+  <%- end -%>
 }
 <% end %>
+
+$<%= class_name_for(sprite) %>-sprite-names: <%= sprite.images.map { |i| class_name_for(i) }.join(' ') %>;

data/lib/spriteful/version.rb

@@ -1,3 +1,3 @@
 module Spriteful
-  VERSION = '0.0.5'
+  VERSION = '0.1.0'
 end

data/spec/fixtures/svg/green.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="10px" height="10px" viewBox="0 0 10 10" enable-background="new 0 0 10 10" xml:space="preserve">
+<rect fill="#39B54A" width="10" height="10"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

data/spec/image_spec.rb

@@ -1,13 +1,26 @@
 require 'spec_helper'
 
 describe Spriteful::Image do
-  let(:path) { 'path/to/image.png' }
-  let(:chunky_image) { double('ChunkyPNG Image', width: 10, height: 5) }
-  subject(:image) { Spriteful::Image.new(chunky_image, path) }
+  let(:source_image) { double('Magick Image', filename: 'path/to/image.png', columns: 10, rows: 5) }
+  subject(:image) { Spriteful::Image.new(source_image) }
 
   it { expect(image.name).to eq('image.png') }
   it { expect(image.path).to eq('path/to/image.png') }
   it { expect(image.width).to eq(10) }
   it { expect(image.height).to eq(5) }
-  it { expect(image.source).to eq(chunky_image) }
+  it { expect(image.source).to eq(source_image) }
+  it { expect(image).to_not be_svg }
+
+  context 'SVG images' do
+    before do
+      source_image.stub(filename: 'spec/fixtures/svg/green.svg')
+    end
+
+    it { expect(image).to be_svg }
+
+    it 'returns the SVG XML as the #blob' do
+      xml = SvgOptimizer.optimize(File.read(source_image.filename))
+      expect(image.blob).to eq(xml)
+    end
+  end
 end

data/spec/sprite_spec.rb

@@ -64,17 +64,17 @@ describe Spriteful::Sprite do
     it 'combine images vertically by default' do
       sprite = Spriteful::Sprite.new(source, destination)
       sprite.combine!
-      image = ChunkyPNG::Image.from_blob(sprite.blob)
-      expect(image.width).to be(10)
-      expect(image.height).to be(20)
+      image = Magick::Image.from_blob(sprite.blob).first
+      expect(image.columns).to be(10)
+      expect(image.rows).to be(20)
     end
 
     it 'can combine images horizontally' do
       sprite = Spriteful::Sprite.new(source, destination, horizontal: true)
       sprite.combine!
-      image = ChunkyPNG::Image.from_blob(sprite.blob)
-      expect(image.width).to be(20)
-      expect(image.height).to be(10)
+      image = Magick::Image.from_blob(sprite.blob).first
+      expect(image.columns).to be(20)
+      expect(image.rows).to be(10)
     end
   end
 

data/spec/stylesheet_spec.rb

@@ -36,6 +36,14 @@ describe Spriteful::Stylesheet do
       expect(output).to match(/@mixin simple-sprite-red \{/)
     end
 
+    it 'renders a SCSS variable with the all the images in the sprite' do
+      sprite = Spriteful::Sprite.new(source, destination)
+      stylesheet = Spriteful::Stylesheet.new(sprite, destination, format: 'scss', mixin: true)
+      output = stylesheet.render
+
+      expect(output).to match(/\$simple-sprite-names\: blue red/)
+    end
+
     it 'documents the Spriteful options used to generate the stylesheet' do
       Spriteful.options = %w(one two three)
       sprite = Spriteful::Sprite.new(source, destination)
@@ -44,5 +52,24 @@ describe Spriteful::Stylesheet do
 
       expect(output).to match(/'spriteful one two three'/)
     end
+
+    describe 'SVG support' do
+      let(:source) { File.expand_path('spec/fixtures/svg') }
+
+      it 'exposes an alternative class for browsers that support SVG' do
+        stylesheet = Spriteful::Stylesheet.new(sprite, destination, format: 'css')
+        output = stylesheet.render
+
+        expect(output).to match(/^.svg.green \{/)
+        expect(output).to match(/^.svg .svg.green \{/)
+      end
+
+      it 'extends the placeholder selectors for browsers that support SVG' do
+        stylesheet = Spriteful::Stylesheet.new(sprite, destination, format: 'scss')
+        output = stylesheet.render
+
+        expect(output).to match(/^  .svg & \{/)
+      end
+    end
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: spriteful
 version: !ruby/object:Gem::Version
-  version: 0.0.5
+  version: 0.1.0
 platform: ruby
 authors:
 - Lucas Mazza
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-10-18 00:00:00.000000000 Z
+date: 2013-10-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: thor
@@ -31,19 +31,33 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '2.0'
 - !ruby/object:Gem::Dependency
-  name: chunky_png
+  name: rmagick
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ~>
       - !ruby/object:Gem::Version
-        version: 1.2.8
+        version: 2.13.2
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ~>
       - !ruby/object:Gem::Version
-        version: 1.2.8
+        version: 2.13.2
+- !ruby/object:Gem::Dependency
+  name: svg_optimizer
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: rspec
   requirement: !ruby/object:Gem::Requirement
@@ -106,6 +120,8 @@ files:
 - lib/spriteful.rb
 - spec/fixtures/simple/blue.png
 - spec/fixtures/simple/red.png
+- spec/fixtures/svg/green.svg
+- spec/fixtures/svg/red.png
 - spec/image_spec.rb
 - spec/spec_helper.rb
 - spec/sprite_spec.rb
@@ -131,13 +147,15 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.0.6
+rubygems_version: 2.0.3
 signing_key: 
 specification_version: 4
 summary: ''
 test_files:
 - spec/fixtures/simple/blue.png
 - spec/fixtures/simple/red.png
+- spec/fixtures/svg/green.svg
+- spec/fixtures/svg/red.png
 - spec/image_spec.rb
 - spec/spec_helper.rb
 - spec/sprite_spec.rb