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/[email protected]#elements');
  }
  .arrow:hover {
    background-image: url('images/[email protected]#elements');
  }
}

@media only screen and (min-resolution: 2.5dppx) {
  .arrow {
    background-image: url('images/[email protected]#elements');
  }
  .arrow:hover {
    background-image: url('images/[email protected]#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/[email protected]);
    background-position: 0 0;
    background-size: 76px 27px;
  }

  .arrow:hover {
    background-image: url(sprites/[email protected]);
    background-position: -48px 0;
    background-size: 76px 27px;
  }
}

@media only screen and (min-resolution: 2.5dppx) {
  .arrow {
    background-image: url(sprites/[email protected]);
    background-position: 0 0;
    background-size: 76px 27px;
  }

  .arrow:hover {
    background-image: url(sprites/[email protected]);
    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.