aslansky / css-sprite

css sprite generator
MIT License
733 stars 55 forks source link

Issues with layout css in most recent version #17

Closed hisnameisjimmy closed 10 years ago

hisnameisjimmy commented 10 years ago

I've tried this on two computers with fresh installs of the new version 0.8.0-beta1, and the css that is being produced for vertical/horizontal/binary-tree orientations appears bad. It describes the wrong filenames at the wrong sizes at the wrong position.

For instance, I'm getting this for a checkmark image:

.regular-checkmark {
  background-position: -1523px -242px;
  width: 145px;
  height: 24px;
}

This image is actually 40px by 40px at 2x size, and should be being described in css as 20px by 20px. It is also located in a different position in the sprite map. It is actually describing a different image in my list of images, and is actually being rendered correctly for that specific image (ie it's not distorted). The problem is it's not the right image.

This is my gulp task, which I used previously without issue for the vertical orientation. But now it doesn't matter which orientation I use, I still get bad css output.

gulp.task('sprites', function () {
    return gulp.src(['./images/regular/*.png'])
        .pipe(sprite({
            name: 'regular.png',
            style: 'sprite-regular.less',
            cssPath: '<host>img',
            processor: 'css',
            orientation: 'binary-tree',
            retina: true,
            prefix: 'regular'
        }))
        .pipe(gulpif('*.png', gulp.dest('./built/dist/img/'), gulp.dest('./less/')))
});
aslansky commented 10 years ago

Sorry my fault, forgot to include the margin in the calculation. Now it should be fine.

hisnameisjimmy commented 10 years ago

Boom that did it, nice work man. These are some excellent changes you put in over the weekend.