css_sprite 2.0.0 → 2.1.0

data/.gitignore

@@ -16,10 +16,12 @@ test/tmp
 test/version_tmp
 tmp
 
-spec/public/images/css_sprite.png
+spec/app/assets/images/css_sprite.png
+spec/app/assets/stylesheets/*.css
+spec/app/assets/stylesheets/*.sass
+spec/app/assets/stylesheets/*.scss
 spec/public/stylesheets/*.css
 spec/public/stylesheets/*.sass
 spec/public/stylesheets/*.scss
-spec/app/stylesheets/*.css
-spec/app/stylesheets/*.sass
-spec/app/stylesheets/*.scss
+example/app/assets/images/css_sprite.png
+example/app/assets/stylesheets/css_sprite.css

data/README.textile

@@ -43,24 +43,20 @@ css_sprite css is the css file automatically generated under public/stylesheets
 
 h2. Install
 
-css_sprite depends on the <code>rmagick</code> gem, please make sure RMagick is successfully installed on your system.
+css_sprite depends on the <code>mini_magick</code> gem
 css_sprite also depends on the <code>optipng</code> tool as default image optimization, but you can use any other image optimization tool, check the Configuration section. If you use the default optipng tool, please make sure it is successfully installed on your system.
 
 install css_sprite as a gem:
-<pre><code>sudo gem install css_sprite</code></pre>
-
-or install css_sprite as a plugin:
-<pre><code>script/plugin install git://github.com/flyerhzm/css_sprite.git</code></pre>
+<pre><code>gem install css_sprite</code></pre>
 
 **************************************************************************
 
 h2. Usage
 
-1. create a directory whose name is css_sprite or ends with css_sprite (e.g. widget_css_sprite) under <code>public/images</code> directory
+1. create a directory whose name is css_sprite or ends with css_sprite (e.g. widget_css_sprite) under <code>app/assets/images</code> directory
 
-2. if you install the css_sprite as a gem, you should add css_sprite task in Rakefile
+2. if you css_sprite in rails2 projects, you should add css_sprite task in Rakefile
 <pre><code>require 'css_sprite'</code></pre>
-If you install it as a plugin, you can skip this step
 If you use rails3, you can skip this step too
 
 2. define <code>config/css_sprite.yml</code>, it is not necessary by default.
@@ -83,57 +79,54 @@ Or you can just do the css sprite manually by <code>rake css_sprite:build</code>
 
 h2. Configuration
 
-There is no need to create any configuration by default. If you want some customizations as follows, you need to define <code>config/css_sprite.yml</code> file.
+There is no need to do any configurations by default for Rails 3.1 or higher projects. If you want some customizations as follows, you need to define <code>config/css_sprite.yml</code> file.
 
-h3. Example for rails 3.1
+h3. Example for rails 2.x or 3.0
 
 <pre><code>
-engine: css.scss
-image_path: app/assets/images
-stylesheet_path: app/assets/stylesheets
-css_images_path: assets
-disable_optimization: true
-use_asset_url: true
+engine: css
+image_path: public/images
+stylesheet_path: public/stylesheets
+css_images_path: images
 </code></pre>
 
-h3. ImageType
-
-css_sprite uses RMagick to compose the images by default. It uses PaletteMatteType as default image_type, you can change it to any image_type which RMagick supports.
-
-<pre><code>image_type: PaletteType</code></pre>
-
-Check the detailed information of image_type here: http://www.imagemagick.org/RMagick/doc/constants.html#ImageType
-
-for gif transparency, you must use <code>image_type: TrueColorMatteType</code>.
-
 h3. Destination Image Format
 
 css_sprite saves the css sprite image as a png file by default. You can change it to gif or any other format like
 
 <pre><code>
-image_type: TrueColorMatteType
 format: GIF
 </code></pre>
 
+h3. Use asset-url
+
+css_sprite generate <code>background: url('css_sprite.png') no-repeat</code> by default, if you prefer <code>background: asset-url('css_sprite.png') no-repeat</code>, you can change it as follows
+
+<pre><code>
+use_asset_url: true
+</code></pre>
+
 h3. Sass
 
-css_sprite generates css file by default. If you like sass, you can just add following line in the configuration file.
+css_sprite generates css.scss file by default. You can change it to pure css or sass as you like.
 
-<pre><code>engine:sass</code></pre>
+<pre><code>engine: css</code></pre>
+
+<pre><code>engine: css.sass</code></pre>
 
 h3. Image Optimization
 
-css_sprite uses *optipng* with optimization level 2 to optimize the auto generated css_sprite image by default. You can change it to any image optimization command.
+css_sprite allows to do optimization to generated css_sprite.png, you can use default *optipng* with optimization level 2.
 
-<pre><code>optimization: optipng -o 7</code></pre>
+<pre><code>optimization: true</code></pre>
 
-You can also disable the image optimization by
+Or you can change it to any image optimization command.
 
-<pre><code>disable_optimization: true</code></pre>
+<pre><code>optimization: optipng -o 7</code></pre>
 
 h3. Customization styles
 
-* For css
+* For css or scss
 <pre><code>
 suffix:
   button: |
@@ -166,32 +159,37 @@ suffix:
     cursor: pointer
 </code></pre>
 
-<code>engine</code> defines css (default) or sass file to generate.
+<code>engine</code> defines css.scss (default), pure css or sass file to generate.
 <code>suffix</code> defines the customization styles for specified images.
 The customization above means if your image filename is button suffixed (e.g. post_button.png), the corresponding class .post_button has the additional style with (outline: 0; border: 0; and so on),
 if your image filename is icon suffixed (e.g. twitter_icon.png), the correspondiing class .twitter_icon has the additional style with (text-indent: -9999px; cursor: pointer)
 
 h3. Customization directories
 
-css_sprite follows the conventions that images are under <code>public/images</code> directory and css files are under <code>public/stylesheets</code>, but you can change them.
+css_sprite follows the conventions that images are under <code>app/assets/images</code> directory and css files are under <code>app/assets/stylesheets</code>, but you can change them.
 
 <pre><code>
-image_path: app/images
-stylesheet_path: app/stylesheets
+image_path: public/images
+stylesheet_path: public/stylesheets
 </code></pre>
 
-By default, image_path is public/images and stylesheet_path is public/stylesheets.
+By default, image_path is app/assets/images and stylesheet_path is app/assets/stylesheets.
+
+h2. Example
 
-h3. Compass support (SCSS)
+I built an example
 
-You can use the following configuration to support compass.
+images are under <code>app/assets/images/css_sprite/</code>
+generated css sprite image is at <code>app/assets/images/css_sprite.png</code>
+genereated css file is at <code>app/assets/stylesheets/css_sprite.css</code>
 
 <pre><code>
-engine: scss
-stylesheet_path: app/stylesheets
+$ cd example
+$ rake css_sprite:build
+$ open index.html
 </code></pre>
 
 
 **************************************************************************
 
-Copyright (c) 2009 - 2012 [Richard Huang (flyerhzm@gmail.com)], released under the MIT license
+Copyright (c) 2009 - 2013 [Richard Huang (flyerhzm@gmail.com)], released under the MIT license

data/example/Rakefile

@@ -0,0 +1,3 @@
+require 'rake'
+
+load '../tasks/css_sprite_tasks.rake'

data/example/app/assets/stylesheets/css_sprite.css

@@ -0,0 +1,7 @@
+.facebook_icon, .gmail_logo, .hotmail_logo, .twitter_icon {
+  background: url('../images/css_sprite.png?1358087793') no-repeat;
+}
+.facebook_icon { background-position: 0px 0px; width: 14px; height: 14px; }
+.gmail_logo { background-position: 0px -14px; width: 103px; height: 36px; }
+.hotmail_logo { background-position: 0px -50px; width: 103px; height: 36px; }
+.twitter_icon { background-position: 0px -86px; width: 14px; height: 14px; }

data/example/config/css_sprite.yml

@@ -0,0 +1,3 @@
+engine: css
+css_images_path_relative: true
+css_images_path: ../images

data/example/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>css_sprite example</title>
+    <link href="app/assets/stylesheets/css_sprite.css" rel="stylesheet">
+    <style>
+      div { margin: 20px; }
+    </style>
+  </head>
+  <body>
+    <div class="facebook_icon"></div>
+    <div class="twitter_icon"></div>
+    <div class="gmail_logo"></div>
+    <div class="hotmail_logo"></div>
+  </body>
+</html>

data/lib/css_sprite/sprite.rb

@@ -6,18 +6,19 @@ require 'enumerator'
 class Sprite
 
   def initialize(options={})
-    if File.exist?(File.join(Rails.root, 'config/css_sprite.yml'))
-      @config = YAML::load_file(File.join(Rails.root, 'config/css_sprite.yml'))
+    base_dir = Dir.pwd
+    if File.exist?(File.join(base_dir, 'config/css_sprite.yml'))
+      @config = YAML::load_file(File.join(base_dir, 'config/css_sprite.yml'))
     else
       @config = options
     end
 
-    @image_path = File.expand_path(File.join(Rails.root, @config['image_path'] || 'public/images'))
-    @stylesheet_path = File.expand_path(File.join(Rails.root, @config['stylesheet_path'] || 'public/stylesheets'))
+    @image_path = File.expand_path(File.join(base_dir, @config['image_path'] || 'app/assets/images'))
+    @stylesheet_path = File.expand_path(File.join(base_dir, @config['stylesheet_path'] || 'app/assets/stylesheets'))
 
-    @css_images_path = @config['css_images_path'] ||= "images"
+    @css_images_path = @config['css_images_path'] ||= "assets"
     @format = @config['format'] ? @config['format'].downcase : "png"
-    @engine = @config['engine'] || "css"
+    @engine = @config['engine'] || "css.scss"
   end
 
   # execute the css sprite operation
@@ -73,7 +74,7 @@ class Sprite
     @engine =~ /scss$/
   end
 
-  # detect all the css sprite directories. e.g. public/images/css_sprite, public/images/widget_css_sprite
+  # detect all the css sprite directories. e.g. app/assets/images/css_sprite, app/assets/images/widget_css_sprite
   def css_sprite_directories
     Dir.entries(@image_path).collect do |d|
       File.join(@image_path, d) if File.directory?(File.join(@image_path, d)) and d =~ /css_sprite$/
@@ -114,9 +115,9 @@ class Sprite
 
   # opitmize the css sprite image
   def optimize_image(directory)
-    unless @config['disable_optimization']
+    if @config['optimization']
       dest_image_path = dest_image_path(directory)
-      command  = @config['optimization'] ? "#{@config['optimization']} #{dest_image_path}" : "optipng -quiet #{dest_image_path}"
+      command  = @config['optimization'] === true ? "optipng -quiet #{dest_image_path}" : "#{@config['optimization']} #{dest_image_path}"
       result = system(command)
       puts %Q(Optimization command "#{command}" execute failed) unless result
     end
@@ -142,7 +143,11 @@ class Sprite
         end
 
         f.print class_names(results).join(",\n")
-        f.print " \{\n  background: url('/#{@css_images_path}/#{dest_image_name}?#{dest_image_time.to_i}') no-repeat;\n\}\n"
+        if @config['css_images_path_relative']
+          f.print " \{\n  background: url('#{@css_images_path}/#{dest_image_name}?#{dest_image_time.to_i}') no-repeat;\n\}\n"
+        else
+          f.print " \{\n  background: url('/#{@css_images_path}/#{dest_image_name}?#{dest_image_time.to_i}') no-repeat;\n\}\n"
+        end
 
         results.each do |result|
           f.print "#{class_name(result[:name])} \{"

data/lib/css_sprite/version.rb

@@ -1,3 +1,3 @@
 module CssSprite
-  VERSION = "2.0.0"
+  VERSION = "2.1.0"
 end

data/spec/css_sprite/sprite_spec.rb

@@ -8,22 +8,21 @@ describe Sprite do
 
   describe "build" do
     it "should build css_sprite image and css" do
-      Sprite.any_instance.expects(:system).with("optipng -quiet #{IMAGE_PATH}/css_sprite.png").returns(true)
+      Sprite.any_instance.expects(:system).with("optipng -o 1 #{IMAGE_PATH}/css_sprite.png").never
       Sprite.new.build
     end
 
     it "should build css_sprite image and sass" do
-      Sprite.any_instance.expects(:system).with("optipng -quiet #{IMAGE_PATH}/css_sprite.png").returns(true)
       Sprite.new('engine' => 'sass').build
     end
 
     it "should build another image_type" do
-      Sprite.any_instance.expects(:system).with("optipng -quiet #{IMAGE_PATH}/css_sprite.png").returns(true)
       Sprite.new('image_type' => 'PaletteType').build
     end
 
-    it "should disable image optimization" do
-      Sprite.new('disable_optimization' => true).build
+    it "should do optimization" do
+      Sprite.any_instance.expects(:system).with("optipng -quiet #{IMAGE_PATH}/css_sprite.png").returns(true)
+      Sprite.new('optimization' => true).build
     end
 
     it "should build another image optimization" do
@@ -32,13 +31,11 @@ describe Sprite do
     end
 
     it "should output css to customized stylesheet_path" do
-      Sprite.any_instance.expects(:system).with("optipng -quiet #{IMAGE_PATH}/css_sprite.png").returns(true)
-      Sprite.new('stylesheet_path' => 'app/stylesheets').build
+      Sprite.new('stylesheet_path' => 'public/stylesheets').build
     end
 
     it "should build css_sprite image and scss" do
-      Sprite.any_instance.expects(:system).with("optipng -quiet #{IMAGE_PATH}/css_sprite.png").returns(true)
-      Sprite.new('engine' => 'scss', 'stylesheet_path' => 'app/stylesheets').build
+      Sprite.new('engine' => 'scss', 'stylesheet_path' => 'public/stylesheets').build
     end
   end
 

data/spec/spec_helper.rb

@@ -3,12 +3,18 @@ require 'rspec/autorun'
 require 'date'
 require 'mocha/api'
 
-class Rails
-  def self.root
+class Dir
+  def self.pwd
     File.dirname(__FILE__)
   end
 end
 
-IMAGE_PATH = File.expand_path(File.join(Rails.root, 'public/images'))
-STYLESHEET_PATH = File.expand_path(File.join(Rails.root, 'public/stylesheets'))
+IMAGE_PATH = File.expand_path(File.join(File.dirname(__FILE__), 'app/assets/images'))
+STYLESHEET_PATH = File.expand_path(File.join(File.dirname(__FILE__), 'app/assets/stylesheets'))
 require File.join(File.dirname(__FILE__), '/../lib/css_sprite.rb')
+
+RSpec.configure do |config|
+  config.mock_with :mocha
+  config.filter_run :focus => true
+  config.run_all_when_everything_filtered = true
+end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: css_sprite
 version: !ruby/object:Gem::Version
-  version: 2.0.0
+  version: 2.1.0
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-01-10 00:00:00.000000000 Z
+date: 2013-02-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: mini_magick
@@ -76,26 +76,36 @@ files:
 - Rakefile
 - VERSION
 - css_sprite.gemspec
+- example/Rakefile
+- example/app/assets/images/css_sprite.png
+- example/app/assets/images/css_sprite/facebook_icon.png
+- example/app/assets/images/css_sprite/gmail_logo.png
+- example/app/assets/images/css_sprite/hotmail_logo.png
+- example/app/assets/images/css_sprite/twitter_icon.png
+- example/app/assets/stylesheets/.gitkeep
+- example/app/assets/stylesheets/css_sprite.css
+- example/config/css_sprite.yml
+- example/index.html
 - lib/automatic.rb
 - lib/css_sprite.rb
 - lib/css_sprite/sprite.rb
 - lib/css_sprite/version.rb
-- spec/app/stylesheets/.gitkeep
+- spec/app/assets/images/another_css_sprite/no_image
+- spec/app/assets/images/css_sprite/gmail_logo.png
+- spec/app/assets/images/css_sprite/gmail_logo_active.png
+- spec/app/assets/images/css_sprite/hotmail_logo.png
+- spec/app/assets/images/css_sprite/icons/facebook_icon.png
+- spec/app/assets/images/css_sprite/icons/facebook_icon_hover.png
+- spec/app/assets/images/css_sprite/icons/twitter_icon.png
+- spec/app/assets/images/css_sprite/icons/twitter_icon_hover.png
+- spec/app/assets/images/css_sprite/logos/gmail_logo.png
+- spec/app/assets/images/css_sprite/logos/gmail_logo_active.png
+- spec/app/assets/images/css_sprite/logos_hover/gmail_logo.png
+- spec/app/assets/images/css_sprite/not_image.txt
+- spec/app/assets/stylesheets/.gitkeep
+- spec/app/assets/stylesheets/sass/css_sprite.sass
 - spec/css_sprite/sprite_spec.rb
-- spec/public/images/another_css_sprite/no_image
-- spec/public/images/css_sprite/gmail_logo.png
-- spec/public/images/css_sprite/gmail_logo_active.png
-- spec/public/images/css_sprite/hotmail_logo.png
-- spec/public/images/css_sprite/icons/facebook_icon.png
-- spec/public/images/css_sprite/icons/facebook_icon_hover.png
-- spec/public/images/css_sprite/icons/twitter_icon.png
-- spec/public/images/css_sprite/icons/twitter_icon_hover.png
-- spec/public/images/css_sprite/logos/gmail_logo.png
-- spec/public/images/css_sprite/logos/gmail_logo_active.png
-- spec/public/images/css_sprite/logos_hover/gmail_logo.png
-- spec/public/images/css_sprite/not_image.txt
 - spec/public/stylesheets/.gitkeep
-- spec/public/stylesheets/sass/css_sprite.sass
 - spec/spec_helper.rb
 - tasks/css_sprite_tasks.rake
 homepage: https://github.com/flyerhzm/css_sprite
@@ -123,20 +133,20 @@ signing_key:
 specification_version: 3
 summary: css_sprite is a rails plugin/gem to generate css sprite image automatically.
 test_files:
-- spec/app/stylesheets/.gitkeep
+- spec/app/assets/images/another_css_sprite/no_image
+- spec/app/assets/images/css_sprite/gmail_logo.png
+- spec/app/assets/images/css_sprite/gmail_logo_active.png
+- spec/app/assets/images/css_sprite/hotmail_logo.png
+- spec/app/assets/images/css_sprite/icons/facebook_icon.png
+- spec/app/assets/images/css_sprite/icons/facebook_icon_hover.png
+- spec/app/assets/images/css_sprite/icons/twitter_icon.png
+- spec/app/assets/images/css_sprite/icons/twitter_icon_hover.png
+- spec/app/assets/images/css_sprite/logos/gmail_logo.png
+- spec/app/assets/images/css_sprite/logos/gmail_logo_active.png
+- spec/app/assets/images/css_sprite/logos_hover/gmail_logo.png
+- spec/app/assets/images/css_sprite/not_image.txt
+- spec/app/assets/stylesheets/.gitkeep
+- spec/app/assets/stylesheets/sass/css_sprite.sass
 - spec/css_sprite/sprite_spec.rb
-- spec/public/images/another_css_sprite/no_image
-- spec/public/images/css_sprite/gmail_logo.png
-- spec/public/images/css_sprite/gmail_logo_active.png
-- spec/public/images/css_sprite/hotmail_logo.png
-- spec/public/images/css_sprite/icons/facebook_icon.png
-- spec/public/images/css_sprite/icons/facebook_icon_hover.png
-- spec/public/images/css_sprite/icons/twitter_icon.png
-- spec/public/images/css_sprite/icons/twitter_icon_hover.png
-- spec/public/images/css_sprite/logos/gmail_logo.png
-- spec/public/images/css_sprite/logos/gmail_logo_active.png
-- spec/public/images/css_sprite/logos_hover/gmail_logo.png
-- spec/public/images/css_sprite/not_image.txt
 - spec/public/stylesheets/.gitkeep
-- spec/public/stylesheets/sass/css_sprite.sass
 - spec/spec_helper.rb