PostCSS plugin that generates spritesheets from your stylesheets.
/* Input */
.comment { background: url(images/sprite/ico-comment.png) no-repeat 0 0; }
.bubble { background: url(images/sprite/ico-bubble.png) no-repeat 0 0; }
/* ---------------- */
/* Output */
.comment { background-image: url(images/sprite.png); background-position: 0 0; }
.bubble { background-image: url(images/sprite.png); background-position: 0 -50px; }var fs = require('fs');
var postcss = require('postcss');
var sprites = require('postcss-sprites');
var css = fs.readFileSync('./css/style.css', 'utf8');
var opts = {
stylesheetPath: './dist',
spritePath: './dist/images/'
};
postcss([sprites(opts)])
.process(css, {
from: './css/style.css',
to: './dist/style.css'
})
.then(function(result) {
fs.writeFileSync('./dist/style.css', result.css);
});See PostCSS docs for examples for your environment.
Relative path to the folder that will keep your output stylesheet(s).
- Default:
./ - Required:
true
Relative path to the folder that will keep your output spritesheet(s).
- Default:
./ - Required:
true
Your base path that will be used for images with absolute CSS urls.
- Default:
./ - Required:
false
Indicates whether the url should be relative against current CSS context or original CSS stylesheet file.
- Default:
file - Required:
false - Options:
file|rule
Defines filter functions that will manipulate the list of images founded in your stylesheet(s).
- Default:
[] - Required:
false - Options:
Function|Function[]
Every function must return a Promise which should be resolved or rejected.
Built-in filters:
- based on
fs.statand used to remove non exisiting images
Defines group functions that will manipulate the list of images founded in your stylesheet(s).
- Default:
[] - Required:
false - Options:
Function|Function[]
Every function must return a Promise which should be resolved with a string or rejected.
Built-in filters:
- based on
@2xnaming convention
Defines whether or not to search for retina mark in the filename.
- Default:
false - Required:
false
Defines whether or not to search for retina mark in the filename.
- Default:
{} - Required:
false
Hook that allows to rewrite the filepath of produced spritesheet.
- Default:
null - Required:
false
Hook that allows to rewrite the CSS output for an image.
- Default:
null - Required:
false
A spritesmith configuration.
- Default:
{} - Required:
false
The engine.
- Default:
pixelsmith - Required:
false
The algorithm.
- Default:
binary-tree - Required:
false
The space between images in spritesheet.
- Default:
0 - Required:
false
The configuration of the engine.
- Default:
{} - Required:
false
The export options of the engine.
- Default:
{} - Required:
false
A svg-sprite configuration.
Every filter or group function will be called with an Image object.
An absolute path to the stylesheet -
/Path/to/your/source/stylesheet.css
An absolute path to the image -
/Path/to/your/image.png
The url found in your stylesheet including the query params -
../image.png?v1
A normalized version of the original url -
../image.png
The retina ratio of your image -
2
Indicates whenever your image is retina -
true
The groups associated with the image -
['shapes', '@2x']
The string used as reference in your stylesheet -
/* @replace|image.png */
The position & dimensions of image in generated spritesheet -
{ width: 20, height: 20, x: 0, y: 0 }
A relative path to the generated spritesheet -
dist/sprite.png
A CSS url to the generated spritesheet -
sprite.png
The total width of the spritesheet -
200
The total height of the spritesheet -
400
Pull requests are welcome.
$ git clone [email protected]:2createStudio/postcss-sprites.git
$ npm install
$ npm run watch