npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

postcss-sprites

v4.2.1

Published

Generate spritesheets from stylesheets

Downloads

17,036

Readme

postcss-sprites Build Status npm version

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; }

Usage

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.


Options

stylesheetPath

Relative path to the folder that will keep your output stylesheet(s). If it's null the path of CSS file will be used.

  • Default: null
  • Required: false
spritePath

Relative path to the folder that will keep your output spritesheet(s).

  • Default: ./
  • Required: true
basePath

Your base path that will be used for images with absolute CSS urls.

  • Default: ./
  • Required: false
relativeTo

Indicates whether the url should be relative against current CSS context or original CSS stylesheet file.

  • Default: file
  • Required: false
  • Options: file|rule
filterBy

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.stat and used to remove non exisiting images
groupBy

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 @2x naming convention
retina

Defines whether or not to search for retina mark in the filename.

  • Default: false
  • Required: false
hooks

Defines whether or not to search for retina mark in the filename.

  • Default: {}
  • Required: false
hooks.onSaveSpritesheet

Hook that allows to rewrite the data of produced spritesheet.

If returned value is string, it is used as filepath value, and if returned value is object, it is used as value which will be merged with current spritesheet data.

Returned value can also be Promise which should return either string or object.

  • Default: null
  • Required: false
hooks.onUpdateRule

Hook that allows to rewrite the CSS output for an image.

  • Default: null
  • Required: false
spritesmith

A spritesmith configuration.

  • Default: {}
  • Required: false
spritesmith.engine

The engine.

  • Default: pixelsmith
  • Required: false
spritesmith.algorithm

The algorithm.

  • Default: binary-tree
  • Required: false
spritesmith.padding

The space between images in spritesheet.

  • Default: 0
  • Required: false
spritesmith.engineOpts

The configuration of the engine.

  • Default: {}
  • Required: false
spritesmith.exportOpts

The export options of the engine.

  • Default: {}
  • Required: false
svgsprite

A svg-sprite configuration.

verbose

Prints the plugin output to the console.

  • Default: false
  • Required: false

The Image

Every filter or group function will be called with an Image object.

styleFilePath

An absolute path to the stylesheet - /Path/to/your/source/stylesheet.css

path

An absolute path to the image - /Path/to/your/image.png

originalUrl

The url found in your stylesheet including the query params - ../image.png?v1

url

A normalized version of the original url - ../image.png

ratio

The retina ratio of your image - 2

retina

Indicates whenever your image is retina - true

groups

The groups associated with the image - ['shapes', '@2x']

token

The string used as reference in your stylesheet - /* @replace|image.png */

coords

The position & dimensions of image in generated spritesheet - { width: 20, height: 20, x: 0, y: 0 }

spritePath

A relative path to the generated spritesheet - dist/sprite.png

spriteUrl

A CSS url to the generated spritesheet - sprite.png

spriteWidth

The total width of the spritesheet - 200

spriteHeight

The total height of the spritesheet - 400


Advanced


Contributing

Pull requests are welcome.

$ git clone [email protected]:2createStudio/postcss-sprites.git
$ npm install
$ npm run watch