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

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.