PostCSS Easysprite

Usage

Just append #spritename to the end of the image url. No complicated mechanism or strict folder structure is needed.

Retina

The plugin moves all retina images with any ratio to a separate sprite. To achieve this all retina images should be declared with a @2x suffix (where number is the image ratio.)

Caching/performance

Projects with a large number of sprites can take a long time to compile. The help with this, the plugin checks files against a md5 hash to only compile new/changed sprites. This does not yet work for the first time a sprite is generated.

Relative/absolute paths

The plugin supports both relative and absolute paths on input file, but can currently only generate relative paths on output file.

Plugin options

Option	Description	Default
`imagePath`	Path for resolving absolute images.	`process.cwd()`
`spritePath`	Path to use for saving the generated sprites file(s).	`process.cwd()`
`stylesheetPath`	Path for resolving relative images (overriding options, css file folder used for default.)	`''`
`padding`	The amount of space in pixels to put around images in the sprite. Note: This value will be scaled proportionally for retina images.	`20`
`outputDimensions`	Whether to also output the pixel `height` and `width` of the image.	`false`
`algorithm`	The layout algorithm spritesmith should use.	`binary-tree`
`outputStylesheetPath`	Optional. Path of the final CSS file. If defined, sprite urls are relative to this path.	`undefined`

Input example

.arrow {
  background-image: url('images/arrow-next.png#elements');
}
.arrow:hover {
  background-image: url('images/arrow-next--hover.png#elements');
}
 
@media only screen and (min-resolution: 1.5dppx) {
  .arrow {
    background-image: url('images/arrow-next@2x.png#elements');
  }
  .arrow:hover {
    background-image: url('images/arrow-next--hover@2x.png#elements');
  }
}
 
@media only screen and (min-resolution: 2.5dppx) {
  .arrow {
    background-image: url('images/arrow-next@3x.png#elements');
  }
  .arrow:hover {
    background-image: url('images/arrow-next--hover@3x.png#elements');
  }
}

Output example

.arrow {
  background-image: url(sprites/elements.png);
  background-position: 0 0;
}
 
.arrow:hover {
  background-image: url(sprites/elements.png);
  background-position: -48px 0;
}
 
@media only screen and (min-resolution: 1.5dppx) {
  .arrow {
    background-image: url(sprites/elements@2x.png);
    background-position: 0 0;
    background-size: 76px 27px;
  }
 
  .arrow:hover {
    background-image: url(sprites/elements@2x.png);
    background-position: -48px 0;
    background-size: 76px 27px;
  }
}
 
@media only screen and (min-resolution: 2.5dppx) {
  .arrow {
    background-image: url(sprites/elements@3x.png);
    background-position: 0 0;
    background-size: 76px 27px;
  }
 
  .arrow:hover {
    background-image: url(sprites/elements@3x.png);
    background-position: -48px 0;
    background-size: 76px 27px;
  }
}

PostCSS Usage

postcss([
  easysprite({
    imagePath: './public/images',
    spritePath: './public/sprites',
  }),
]);

See the PostCSS docs for examples of your particular environment.