karfcz/grunt-sprite-packer — pull request #3 by jonathandelgado (2013-10-20 17:16:05+00:00)
Title: Added prefix and retina options

Firstly, Great addition to grunt.

I went ahead and added some quick things for better support when working with high resolution images; in addition to adding a prefix - in the event that you don't want to pollute the global namespace.

The `spriteWidth` and `spriteHeight` are for the `background-size` property, since @2 images are double the size and would not fit inline. I also removed any mention of @2 from the name, since it is most likely undesired.

I have the following as my hbs template, for an example of retina. Note it is intended to compile to stylus later.
```
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( -moz-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -ms-min-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx)

{{#sprites}}
.{{name}}
background-image: url('{{../baseUrl}}{{../fileName}}')
height: {{height}}px
width: {{width}}px
background-position: -{{x}}px -{{y}}px
background-size: {{spriteWidth}}px {{spriteHeight}}px;
{{/sprites}}

```

Additionally, here is my grunt config, to visualize my seperation

```
spritepacker: {
basic: {
options: {
template: 'sprite.hbs',
destCss: 'css/sprite.styl',
baseUrl: 'img/',
padding: 2,
evenPixels: true
},
files: {
'img/sprite.png': ['img/sprite/*.png', '!img/sprite/*@2.png']
}
},
retina: {
options: {
template: 'sprite@2.hbs',
destCss: 'css/sprite@2.styl',
baseUrl: 'img/',
padding: 2,
evenPixels: true
},
files: {
'img/sprite@2.png': ['img/sprite/*@2.png']
}
}
}
```

Hope you like the modifications.