Add image resizing

[silvenon]

It would be awesome to be able to create sprites of different sizes. Say, if you have large icons for desktop screens, but smaller icons on smartphones. The syntax could be something like this:

variants: [
  '1', // creates a sprite of with dimensions unchanged
  1, // same as above
  '@1x',  // same as above
  '*=1', // same as above
  '-=100', // creates a sprite where all dimensions are reduced by 100px
  '/=4', // creates a sprite where all dimensions are divided by 4
  '25%', // same as above
  '=200' // creates a sprite where dimensions of all images are equal to 200px
]

Also, the API would need to accommodate for setting group-specific options, which is probably a change that needs to happen before this. So the syntax could look something like this:

groups: {
  features: { // creates a group called "features"
    groupBy: '/features/', // matches all images which contain "/features/" in their path
    variants: ['1', '-=200', '/=2'], // creates these variants
    retina: true // creates a retina version of EACH of these variants
  },
  ui: {
    groupBy: function (image) {
      return image.path.indexOf('/ui/') !== -1;
    },
    // ...
  }
  // ...
}

Alternative syntax:

groups: [
  {
    name: 'features',
    // ...
  },
  // ...
]

These are huge changes that need to be discussed, but I believe they would make this plugin even more awesome.

I can also add a PR for this, it would naturally take a while :grin:

[vvasilev-]

First of all sorry for the late response. Your idea is really awesome but I think that this should be a separate plugin for PostCSS. That is because the image resizing is too different from the main concept of the plugin and I believe in "do it one thing and do it well" plugins.

If you want we can collaborate to produce some other cool plugin that covers the requested feature. :smile:

[silvenon]

I totally understand, I thought that way too. But the reason why I wanted that to be a part of this plugin was because of the way I thought this plugin should be used.

Usually there's a development and production "mode". In development mode you have live reloading going on in your stylesheets and you don't really want to compile the sprites then every time you save, that would be way too slow. And if I will have different dimensions of images with something like gulp-responsive, it would still require me to know the dimensions of the images if I want to keep them separate in development and sprited in the production.

I planned that this plugin would just output background-size for these various sizes in the development, and in production it would do the actual resizing and spriting.

If I had another plugin for resizing, that plugin would in development just output a manifest JSON file (for example), mapping images to their new dimensions, then postcss-sprites could pick it up, but with grouping this could get kinda complicated, I think.

If you still think it should be a separate plugin, it's totally ok and you can close.

[vvasilev-]

After reading your use case I'm 100% sure that you should use another plugin. If you have time check gulp-image-to-rule plugin it may be useful for you to convert your images into CSS rules that could be manipulated with postcss-sprites in production.

[silvenon]

Ok, thanks! :+1: