Merge pull request #85 from jedmao/update-docs

Add "Webpack Hot Load" example, update others

Author: vvasilev-

README.md

@@ -256,6 +256,7 @@ Every filter or group function will be called with an ``Image`` object.
 - [Skip Prefix](examples/skip-prefix.md)
 - [Responsive Spritesheets](examples/responsive-spritesheets.md)
 - [Relative To Rule](examples/relative-to-rule.md)
+- [Webpack Hot Load](examples/webpack-hot-load.md)
 
 ----
 

examples/output-dimensions.md

@@ -15,15 +15,20 @@ var updateRule = require('postcss-sprites/lib/core').updateRule;
 var opts = {
 	stylesheetPath: './css',
 	spritePath: './css/images/',
+	retina: true,
 	hooks: {
 		onUpdateRule: function(rule, token, image) {
 			// Use built-in logic for background-image & background-position
 			updateRule(rule, token, image);
 
 			['width', 'height'].forEach(function(prop) {
+				var value = image.coords[prop];
+				if (image.retina) {
+					value /= image.ratio;
+				}
 				rule.insertAfter(rule.last, postcss.decl({
 					prop: prop,
-					value: image.coords[prop] + 'px'
+					value: value + 'px'
 				}));
 			});
 		}

examples/skip-prefix.md

@@ -1,5 +1,7 @@
 # Skip Prefix
 
+There [used to be a `skipPrefix` plugin option](https://github.com/2createStudio/postcss-sprites/blob/b525125d9bae2911335cb27d0263558eee9f7723/README.md#skipprefix) that allowed you to skips the prefix in the name of output spritesheet (e.g., `sprite.customGroup.png => customGroup.png`). This allows you to do the same thing.
+
 ###### Input
 
 ```css
@@ -8,7 +10,7 @@
 .square { background: url(images/square.png) no-repeat 0 0; }
 ```
 
-```javascript
+```js
 var path = require('path');
 var postcss = require('postcss');
 var sprites = require('postcss-sprites');
@@ -18,11 +20,11 @@ var opts = {
 	hooks: {
 		onSaveSpritesheet: function(opts, spritesheet) {
 			// We assume that the groups is not an empty array
-			var filenameChunks = spritesheet.groups.concat('png');
+			var filenameChunks = spritesheet.groups.concat(spritesheet.extension);
 			return path.join(opts.spritePath, filenameChunks.join('.'));
 		}
 	}
-}
+};
 ```
 
 ----

examples/webpack-hot-load.md

@@ -0,0 +1,39 @@
+# Webpack Hot Load
+
+If you want to hot load image assets as they are introduced or edited, you can configure your postcss loader to add a hash to each sprite sheet as it is saved.
+
+* [webpack loader context: `addDependency`](https://webpack.github.io/docs/loaders.html#adddependency)
+* [`rev-hash`](https://www.npmjs.com/package/rev-hash)
+
+###### Input
+
+```js
+var path = require('path');
+var postcss = require('postcss');
+var sprites = require('postcss-sprites');
+var revHash = require('rev-hash');
+
+module.exports = function loadPostcssPlugins() {
+	return [
+		sprites({
+			stylesheetPath: './css',
+			spritePath: './css/images/',
+			hooks: {
+				onUpdateRule: function(rule, token, image) {
+					// `this` is the webpack loader context
+					this.addDependency(image.path); // adds a watch to the file
+				},
+				onSaveSpritesheet: function(opts, spritesheet) {
+					return join(
+						opts.spritePath,
+						spritesheet.groups.concat([
+							revHash(spritesheet.image),
+							spritesheet.extension
+						]).join('.')
+					);
+				}
+			}
+		})
+	];
+};
+```