Sprite image order bug? for Retina image

[nakagaw]

Thank you for produced this plugin. so helpful for me.

I had used Retina supports on gulp.spritesmith, Sprite image order problem happen.

At first, I ready these images,

• cat.png
• cat@2x.png
• cat2.png
• cat2@2x.png

I had adding all Retina parameters to gulp.js, and start generated,
But, Sprite order became to reverse with none-retina and retina sprites image.

Generated images order each positon are:
None retina sprites =>
Retina sprites =>

But, I replaced file name from "@2x" to "-2x", It was not happen problem.

If you think this is bug, Could you please try, Thanks.

[twolfson]

This is a known issue but there's not much we can do. The cause is us using sort() and JavaScript gives different priority to 2 over @ where it doesn't exist in the normal version:

> var normal = ['cat.png', 'cat2.png'];
undefined
> normal.sort();
[ 'cat.png', 'cat2.png' ]
> var retina = ['cat@2x.png', 'cat2@2x.png'];
undefined
> retina.sort();
[ 'cat2@2x.png', 'cat@2x.png' ]

This is better explained in twolfson/grunt-spritesmith#137

To resolve the issue, we suggest using consistent suffixes between files (e.g. cat1.png, cat2.png). Switching delimiters might work for this scenario but it can break again if there are files like house.png and house-blue.png.

[nakagaw]

I got it. Thanks your reply! 😄