PostCSS plugin that generate sprites from your stylesheets and then updates image references.

npm install postcss-sprites

var postcss = require('postcss');
var sprites = require('postcss-sprites');
var opts    = {
	stylesheetPath: './dist',
	spritePath    : './dist/images/sprite.png',
	retina        : true
};

postcss(sprites(opts))
	.process(css, { from: './src/app.css', to: './dist/app.css' })
    .then(function (result) {
        fs.writeFileSync('./dist/app.css', result.css);
    });

.comment { background: #fff url(images/sprite/ico-comment.png) no-repeat 0 0; }
.bubble { background: url(images/sprite/ico-bubble.png) no-repeat 0 0; }

.arrows { background: url(images/sprite/[email protected]) no-repeat 0 0; }
.logo { background: url(images/sprite/[email protected]) no-repeat 0 0; }

.comment { background-image: url(images/sprite.png); background-position: 0 0; background-color: #fff; }
.bubble { background-image: url(images/sprite.png); background-position: 0 -50px; }

.arrows { background-image: url(images/[email protected]); background-position: 0 0; background-size: 100px 100px; }
.logo { background-image: url(images/[email protected]); background-position: 0 -50px; background-size: 100px 100px; }

Type: String Default: ./ Example: ./dist/css Required: true

Defines relative path to output stylesheet. This is used to generate correct relative path to spritesheet for CSS rules.

Type: String Default: ./sprite.png Example: ./dist/images/sprite.png Required: true

Can define relative path to ouput sprite.

Type: Function[], Function Default: [] Example: filterBy Required: false

Defines which filters apply to images found in the stylesheet. Each filter will be called with an image object. Each filter must return Boolean or thenable Promise, that will be resolved with Boolean. Each filter applies in series.

Built in filters:

• based on fs.exists, which is used to remove non existing images.

Type: Function[], Function Default: [] Example: groupBy Required: false

Defines logic of how to group images found in the stylesheet. Each grouper called with an image object. Each filter must return String|Null or thenable Promise, that will be resolved with String|Null. Each grouper applies in series.

Built in groupers:

• based on @2x image naming syntax, will produce sprite.@{number}x.png naming. (@{number}x image group).

Type: Boolean Default: false Example: true Required: false

Defines whether or not to search for retina mark in the filename. If true then it will look for @{number}x syntax. For example: [email protected].

Type: Boolean Default: false Example: true Required: false

Suppress console.log messages.

All options for spritesmith are optional. For more detailed information you can visit the official page of spritesmith.

Type: String Default: pixelsmith

Type: String Default: binary-tree

Type: Number Default: 0

Type: Object Default: {}

Type: Object Default: {}

Every filter or grouper is called with an image object, which have following properties:

Type: String Example: /Users/john/project/image.png

Resolved path to the image.

Type: String Example: images/image.png

Url for image found in the stylesheet.

Type: String Default: 1

Ratio of the retina image - e.g. @2x => 2

Type: Boolean Default: false

The flag that indicates a retina image.

Type: Array Default: []

The groups associated with the image after grouping functions.

Type: Object

The string used to update image reference in the stylesheet. This token is PostCSS Comment.

var postcss = require('postcss');
var sprites = require('postcss-sprites');
var Q       = require('q');
var opts    = {
	stylesheetPath: './dist',
	spritePath    : './dist/images/sprite.png',
	verbose       : true,
	filterBy      : function(image) {
		return /\.jpg$/gi.test(image.url);
	},
	groupBy       : function(image) {
		return Q.Promise(function(resolve) {
			// Do something here...

			resolve('groupName');
		});
	}
};

postcss(sprites(opts))
	.process(css, { from: './src/app.css', to: './dist/app.css' })
    .then(function (result) {
        fs.writeFileSync('./dist/app.css', result.css);
    });

Pull requests are welcome.

MIT © 2createStudio