fix(spritesmith): add background-size property to all sprites. Fixes https://github.com/HabitRPG/habitrpg/issues/2510 , see https://github.com/Ensighten/grunt-spritesmith/issues/67

Gruntfile.js

@@ -21,6 +21,7 @@ module.exports = function(grunt) {
         destImg: 'dist/spritesmith.png',
         destCSS: 'dist/customizer.css',
         algorithm: 'binary-tree',
+        cssTemplate: 'css/css.template.mustache',
         cssVarMap: function (sprite) {
           // `sprite` has `name`, `image` (full path), `x`, `y`
           //   `width`, `height`, `total_width`, `total_height`
@@ -34,24 +35,24 @@ module.exports = function(grunt) {
           }
           if (~sprite.name.indexOf('shirt'))
             sprite.y = sprite.y+15; // even more for shirts
-        },
-        cssOpts: {
-          'cssClass': function (item) {
+        }
+        /*,cssOpts: {
+          cssClass: function (item) {
             return '.' + item.name;
           }
-        }
+        }*/
       },
       main: {
         src: 'img/sprites/spritesmith/**/*.png',
         destImg: 'dist/spritesmith.png',
         destCSS: 'dist/spritesmith.css',
         algorithm: 'binary-tree',
-        cssOpts: {
-          'cssClass': function (item) {
-            //return '.sprite-' + item.name;
-            return '.' + item.name;
+        cssTemplate: 'css/css.template.mustache'
+        /*,cssOpts: {
+          cssClass: function (item) {
+            return '.' + item.name; //'.sprite-' + item.name;
           }
-        }
+        }*/
       }
     },
 

css/css.template.mustache

@@ -0,0 +1,9 @@
+{{#items}}
+.{{name}} {
+  background-image: url({{{escaped_image}}});
+  background-position: {{px.offset_x}} {{px.offset_y}};
+  width: {{px.width}};
+  height: {{px.height}};
+  background-size: {{px.total_width}} {{px.total_height}};
+}
+{{/items}}