mixtur / webpack-spritesmith

Webpack plugin that converts set of images into a spritesheet and SASS/LESS/Stylus mixins
499 stars 56 forks source link

using retina '@2x' with customtemplates only normal images will be passed in my templateFunction #65

Closed jimmyyao88 closed 6 years ago

jimmyyao88 commented 6 years ago

my config:

const templateFunctionRetina = function (data) {
  var shared = '.ico { background-image: url(I) }'
      .replace('I', data.sprites[0].image);

  var perSprite = data.sprites.map(function (sprite) {
    var originSpriteName = sprite.name;
    var pesudoClass = '';
    //     xxx--active.png
    if(sprite.name.indexOf('--')!==-1){
      originSpriteName = sprite.name.substring(0 ,sprite.name.indexOf('--'));
      pesudoClass = `:${sprite.name.substring(sprite.name.indexOf('--')+2, sprite.name.length)}`;
    }
      return `.ico-N${pesudoClass} { width: Wpx; height: Hpx; background-position: Xpx Ypx; }`
          .replace('N', originSpriteName)
          .replace('W', sprite.width)
          .replace('H', sprite.height)
          .replace('X', sprite.offset_x)
          .replace('Y', sprite.offset_y);
  }).join('\n');

  return shared + '\n' + perSprite;
}
{
            src: {
                cwd: path.resolve(__dirname, 'assets/icon'),
                glob: '*.png'
            },
            target: {
                image: path.resolve(__dirname, 'assets/sprite.png'),
                css: [
                  [path.resolve(__dirname, 'assets/sass/sprite.scss'), {
                    format: 'function_based_template'
                  }],
                ]
            },
            apiOptions: {
                cssImageRef: "~/assets/sprite.png"
            },
            retina: '@2x',
            customTemplates:  {
                'function_based_template_retina': templateFunctionRetina,
            },
        }

first, when i use retina field, it shows i must add '_retina' in my customTemplates field name, then i add that, but it caculates size and position only normal images in my templateFunctionRetina (data parameter), how to caculate retina image and normal image both? THx.

jimmyyao88 commented 6 years ago

oops,i found retina_sprites field in data params just now, Sorry to trouble you .