Fix HiDPI CSS dimensions, make the selector option more powerful (fixes #17)

example/grunt.js

@@ -77,7 +77,7 @@ module.exports = function(grunt) {
         }
     });
 
-    grunt.loadNpmTasks('node-spritesheet');
+    grunt.loadTasks('../tasks');
 
     grunt.registerTask('default', 'spritesheet');
 };

lib/builder.js

@@ -205,6 +205,7 @@ SpriteSheetConfiguration = (function() {
       }
       console.log(_this.summary());
       _this.generateCSS();
+      console.log(_this.outputImageDirectoryPath);
       return async.series([ensureDirectory(_this.outputImageDirectoryPath), _this.createSprite], callback);
     });
   };
@@ -243,7 +244,9 @@ SpriteSheetConfiguration = (function() {
     return this.css = this.style.generate({
       relativeImagePath: relativeImagePath,
       images: this.images,
-      pixelRatio: this.pixelRatio
+      pixelRatio: this.pixelRatio,
+      width: this.layout.width,
+      height: this.layout.height
     });
   };
 

lib/imagemagick.js

@@ -1,25 +1,28 @@
-var ImageMagick, async, exec;
+var ImageMagick, async, exec, path;
 
 exec = require('child_process').exec;
 
 async = require('async');
 
+path = require('path');
+
 ImageMagick = (function() {
 
   function ImageMagick() {}
 
   ImageMagick.prototype.identify = function(filepath, callback) {
     return this.exec("identify " + filepath, function(error, stdout, stderr) {
-      var dims, filename, h, image, name, parts, w;
+      var dims, ext, filename, h, image, name, parts, w;
       if (error || stderr) {
         throw "Error in identify (" + filepath + "): " + (error || stderr);
       }
       parts = stdout.split(" ");
       dims = parts[2].split("x");
       w = parseInt(dims[0]);
       h = parseInt(dims[1]);
-      filename = filepath.split('/').pop();
-      name = filename.split('.').shift();
+      ext = path.extname(filepath);
+      name = path.basename(filepath, ext);
+      filename = name + ext;
       image = {
         width: w,
         height: h,

lib/style.js

@@ -24,21 +24,39 @@ Style = (function() {
     return "/*\n" + comment + "\n*/";
   };
 
+  Style.prototype.joinSelectors = function(directSelector, imageSelector) {
+    var deepest, ret, selectors;
+    ret = (function() {
+      var _i, _len, _ref, _results;
+      _ref = imageSelector.split(',');
+      _results = [];
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        selectors = _ref[_i];
+        selectors = selectors.split(' ');
+        deepest = [directSelector, selectors.pop()].join('');
+        selectors.push(deepest);
+        _results.push(selectors.join(' '));
+      }
+      return _results;
+    })();
+    return ret.join(',');
+  };
+
   Style.prototype.resolveImageSelector = function(name) {
-    return name;
+    return '.' + name;
   };
 
   Style.prototype.generate = function(options) {
-    var attr, css, image, imagePath, images, pixelRatio, relativeImagePath, styles, _i, _len;
-    imagePath = options.imagePath, relativeImagePath = options.relativeImagePath, images = options.images, pixelRatio = options.pixelRatio;
+    var attr, css, height, image, imagePath, images, pixelRatio, relativeImagePath, styles, width, _i, _len;
+    imagePath = options.imagePath, relativeImagePath = options.relativeImagePath, images = options.images, pixelRatio = options.pixelRatio, width = options.width, height = options.height;
     this.pixelRatio = pixelRatio || 1;
-    styles = [this.css(this.selector, ["  background: url( '" + relativeImagePath + "' ) no-repeat"])];
+    styles = [this.css(this.selector, ["  background: url(" + relativeImagePath + ") no-repeat", "  background-size: " + (width / pixelRatio) + "px " + (height / pixelRatio) + "px "])];
     for (_i = 0, _len = images.length; _i < _len; _i++) {
       image = images[_i];
-      attr = ["  width: " + image.cssw + "px", "  height: " + image.cssh + "px", "  background-position: " + (-image.cssx) + "px " + (-image.cssy) + "px"];
+      attr = ["  width: " + (image.cssw / pixelRatio) + "px", "  height: " + (image.cssh / pixelRatio) + "px", "  background-position: " + (-image.cssx / pixelRatio) + "px " + (-image.cssy / pixelRatio) + "px"];
       image.style = this.cssStyle(attr);
       image.selector = this.resolveImageSelector(image.name, image.path);
-      styles.push(this.css([this.selector, image.selector].join('.'), attr));
+      styles.push(this.css(this.joinSelectors(this.selector, image.selector), attr));
     }
     styles.push("");
     css = styles.join("\n");

src/builder.coffee

@@ -176,6 +176,7 @@ class SpriteSheetConfiguration
 
       @generateCSS()
 
+      console.log @outputImageDirectoryPath
       async.series [
         ensureDirectory( @outputImageDirectoryPath )
         @createSprite
@@ -213,6 +214,8 @@ class SpriteSheetConfiguration
       relativeImagePath: relativeImagePath
       images: @images
       pixelRatio: @pixelRatio
+      width: @layout.width
+      height: @layout.height
 
   createSprite: ( callback ) =>
     ImageMagick.composite(

src/imagemagick.coffee

@@ -1,5 +1,6 @@
 exec          = require( 'child_process' ).exec
 async         = require( 'async' )
+path          = require( 'path' )
 
 class ImageMagick
 
@@ -12,8 +13,9 @@ class ImageMagick
       dims = parts[ 2 ].split "x"
       w = parseInt dims[ 0 ]
       h = parseInt dims[ 1 ]
-      filename = filepath.split( '/' ).pop()
-      name = filename.split( '.' ).shift()
+      ext = path.extname filepath
+      name = path.basename filepath, ext
+      filename = name + ext
 
       image =
         width: w

src/style.coffee

@@ -17,29 +17,37 @@ class Style
   cssComment: ( comment ) ->
     "/*\n#{ comment }\n*/"
 
+  joinSelectors: ( directSelector, imageSelector ) ->
+    ret = for selectors in imageSelector.split( ',' )
+      selectors = selectors.split( ' ' )
+      deepest = [ directSelector, selectors.pop() ].join( '' )
+      selectors.push( deepest )
+      selectors.join( ' ' )
+    ret.join( ',' )
+
   resolveImageSelector: ( name ) ->
-    name
+    '.' + name
 
   generate: ( options ) ->
-    { imagePath, relativeImagePath, images, pixelRatio } = options
+    { imagePath, relativeImagePath, images, pixelRatio, width, height } = options
 
     @pixelRatio = pixelRatio || 1
 
     styles = [
       @css @selector, [
-        "  background: url( '#{ relativeImagePath }' ) no-repeat"
+        "  background: url(#{ relativeImagePath }) no-repeat"
+        "  background-size: #{ width/pixelRatio }px #{ height/pixelRatio }px "
       ]
     ]
     for image in images
       attr = [
-        "  width: #{ image.cssw }px"
-        "  height: #{ image.cssh }px"
-        "  background-position: #{ -image.cssx }px #{ -image.cssy }px"
+        "  width: #{ image.cssw / pixelRatio }px"
+        "  height: #{ image.cssh / pixelRatio }px"
+        "  background-position: #{ -image.cssx / pixelRatio }px #{ -image.cssy / pixelRatio }px"
       ]
       image.style = @cssStyle attr
       image.selector = @resolveImageSelector( image.name, image.path )
-
-      styles.push @css( [ @selector, image.selector ].join( '.' ), attr )
+      styles.push @css( @joinSelectors(@selector, image.selector), attr )
 
     styles.push ""
     css = styles.join "\n"

tasks/spritesheet.js

@@ -3,8 +3,7 @@ module.exports = function(grunt) {"use strict";
     var Builder = require('../').Builder;
 
     grunt.registerMultiTask("spritesheet", "Compile images to sprite sheet", function() {
-        var helpers = require('grunt-lib-contrib').init(grunt);
-        var options = helpers.options(this);
+        var options = this.options(this);
         var done = this.async()
 
         grunt.verbose.writeflags(options, "Options");
@@ -15,12 +14,12 @@ module.exports = function(grunt) {"use strict";
         var srcFiles;
         var images;
 
-        grunt.utils.async.forEachSeries(this.files, function(file, callback) {
+        grunt.util.async.forEachSeries(this.files, function(file, callback) {
             var builder;
             var dir = '';
             //grunt.task.expand( './..' );
 
-            srcFiles = grunt.file.expandFiles(file.src);
+            srcFiles = grunt.file.expand(file.src);
 
             for(var i = 0; i < srcFiles.length; i++) {
                 srcFiles[i] = dir + srcFiles[i];
@@ -33,4 +32,4 @@ module.exports = function(grunt) {"use strict";
             builder.build(callback);
         }, done);
     });
-}; 
+};