prettier --write '**/*.{js,md}'

assetgraph · Apr 4, 2020 · 0c060d5 · 0c060d5
1 parent c450a7c
commit 0c060d5
Show file tree

Hide file tree

Showing 8 changed files with 156 additions and 126 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,4 @@
-AssetGraph-sprite
-=================
+# AssetGraph-sprite
 
 [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/assetgraph/assetgraph-sprite?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 [![NPM version](https://badge.fury.io/js/assetgraph-sprite.svg)](http://badge.fury.io/js/assetgraph-sprite)
@@ -17,8 +16,12 @@ You can tell AssetGraph-sprite that you want to sprite a given CSS
 background image by adding a `sprite` parameter to its query string:
 
 ```css
-.classone {background-image: url(images/thething.png?sprite=mySpriteGroup); }
-.classtwo {background-image: url(images/theotherthing.png?sprite=mySpriteGroup); }
+.classone {
+  background-image: url(images/thething.png?sprite=mySpriteGroup);
+}
+.classtwo {
+  background-image: url(images/theotherthing.png?sprite=mySpriteGroup);
+}
 ```
 
 This is valid CSS and will also work fine on its own in "development
@@ -29,31 +32,35 @@ will look something like this (`123` is the id of the generated sprite
 asset and could be any number):
 
 ```css
-.classone { background-image: url(123.png); background-position: 0 0; }
-.classtwo { background-image: url(123.png); background-position: -34px 0; }
+.classone {
+  background-image: url(123png);
+  background-position: 0 0;
+}
+.classtwo {
+  background-image: url(123png);
+  background-position: -34px 0;
+}
 ```
 
 Some additional parameters are supported:
 
-#### `padding=<top>,<right>,<bottom>,<left>` ####
+#### `padding=<top>,<right>,<bottom>,<left>`
 
 Adds "keepaway space" around the image in the sprite. Sometimes
 useful if the background image is applied to an element that takes
 up a bigger area than the background image. Supports regular CSS
 padding syntax, including the shorthand variants with 1, 2, or 3
-values. The only supported unit is `px`. Defaults to `0 0 0 0`.  Not
+values. The only supported unit is `px`. Defaults to `0 0 0 0`. Not
 supported by the `jim-scott` packer (see the docs for
 `-sprite-packer` below).
 
-#### `spriteNoGroup` ####
+#### `spriteNoGroup`
 
 Tells AssetGraph-sprite that you want this selector to contain a
 `background-image` property pointing at the sprite image, even
 if the sprite group has a "group selector" configured (see below).
 
-
-Configuring a sprite
---------------------
+## Configuring a sprite
 
 If you can guarantee that the HTML elements that need to have the
 background image applied are also matched by another selector, you can
@@ -62,17 +69,29 @@ to add the `background-image` property pointing at the sprite to that
 selector using the `-sprite-selector-for-group` property:
 
 ```css
-.foo { -sprite-selector-for-group: mySpriteGroup; }
-.classone {background-image: url(images/thething.png?sprite=mySpriteGroup); }
-.classtwo {background-image: url(images/theotherthing.png?sprite=mySpriteGroup); }
+.foo {
+  -sprite-selector-for-group: mySpriteGroup;
+}
+.classone {
+  background-image: url(images/thething.png?sprite=mySpriteGroup);
+}
+.classtwo {
+  background-image: url(images/theotherthing.png?sprite=mySpriteGroup);
+}
 ```
 
 ... which compiles to:
 
 ```css
-.foo { background-image: url(123.png); }
-.classone { background-position: 0 0; }
-.classtwo { background-position: -34px 0; }
+.foo {
+  background-image: url(123png);
+}
+.classone {
+  background-position: 0 0;
+}
+.classtwo {
+  background-position: -34px 0;
+}
 ```
 
 AssetGraph-sprite tries to preserve as much of the original CSS as
@@ -81,15 +100,25 @@ properties in the group selector and the priority (`!important`
 status), for example:
 
 ```css
-.foo { -sprite-selector-for-group: mySpriteGroup; background: red !important; }
-.classone { background: blue url(images/thething.png?sprite=mySpriteGroup) !important; }
+.foo {
+  -sprite-selector-for-group: mySpriteGroup;
+  background: red !important;
+}
+.classone {
+  background: blue url(images/thething.png?sprite=mySpriteGroup) !important;
+}
 ```
 
 Compiles to:
 
 ```css
-.foo { background: red url(123.png) !important; }
-.classone { background: blue !important; background-position: 0 0; }
+.foo {
+  background: red url(123png) !important;
+}
+.classone {
+  background: blue !important;
+  background-position: 0 0;
+}
 ```
 
 You can tweak the generated sprite images by putting additional
@@ -98,15 +127,15 @@ selector", for example:
 
 ```css
 .foo {
-    -sprite-selector-for-group: mySpriteGroup;
-    -sprite-packer: horizontal;
-    -sprite-background-color: #a767ac;
+  -sprite-selector-for-group: mySpriteGroup;
+  -sprite-packer: horizontal;
+  -sprite-background-color: #a767ac;
 }
 ```
 
 These options are currently supported:
 
-#### `-sprite-packer: horizontal|vertical|jim-scott|try-all` ####
+#### `-sprite-packer: horizontal|vertical|jim-scott|try-all`
 
 Selects the packing algorithm for the sprite. The `horizontal` and
 `vertical` variants naively lay out the images one after the other.
@@ -116,56 +145,59 @@ implementation of <a
 href="http://www.blackpawn.com/texts/lightmaps/">a floor planning
 algorithm</a> originally invented by Jim Scott for packing
 lightmaps. The Jim Scott packer doesn't support the
-`-sprite-padding` property on the individual images.  If you don't
+`-sprite-padding` property on the individual images. If you don't
 specify `-sprite-packer`, the default is `try-all`, which runs all
 the algorithms and chooses the packing that produces the smallest
 sprite image (area-wise).
 
-#### `-sprite-location: url(...)` ####
+#### `-sprite-location: url(...)`
 
 Specifies the desired location of the sprite. This is useful in
 combination with the `processImages` transform if you want to
 postprocess the generated sprite image:
 
 ```css
 .foo {
-     -sprite-selector-for-group: mySpriteGroup;
-     -sprite-location: url(mySprite.png?pngquant=128);
+  -sprite-selector-for-group: mySpriteGroup;
+  -sprite-location: url(mySprite.png?pngquant=128);
+}
+.classone {
+  background-position: 0 0;
 }
-.classone { background-position: 0 0; }
 ```
 
 Compiles to:
 
 ```css
-.foo { background: red url(mySprite.png?pngquant=128) !important; }
-.classone { background-position: 0 0; }
+.foo {
+  background: red url(mySprite.png?pngquant=128) !important;
+}
+.classone {
+  background-position: 0 0;
+}
 ```
 
-#### `-sprite-image-format: png|jpg` ####
+#### `-sprite-image-format: png|jpg`
 
 The format of the generated sprite. More will be added when <a
 href="http://github.com/LearnBoost/node-canvas">node-canvas</a> gains
 support for more image formats.
 
-#### `-sprite-background-color: red|yellow|#123123|transparent|...` ####
+#### `-sprite-background-color: red|yellow|#123123|transparent|...`
 
 Specifies the background color for the generated sprite image,
 supports any color syntax understood by node-canvas, which is the
 entire <a
 href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#numerical">CSS3
 Color Module</a>, as far as I can tell. Defaults to `transparent`.
 
-
-Installation
-------------
+## Installation
 
 ```
 $ npm install assetgraph-sprite
 ```
 
-Usage
------
+## Usage
 
 Since AssetGraph-sprite is intended to be used as part of an AssetGraph
 workflow, first you'll need to have AssetGraph installed to use it properly:
@@ -183,23 +215,21 @@ all the images to a different directory:
 ```javascript
 var AssetGraph = require('assetgraph');
 
-new AssetGraph({root: "path/to/css/files"})
-    .loadAssets('*.css')
-    .populate({followRelations: {type: 'CssImage'}})
-    .queue(require('assetgraph-sprite')())
-    .writeAssetsToDisc({url: /^file:/}, "file:///my/output/dir")
-    .run(function (err) {
-        if (err) throw err;
-        // All done!
-    });
+new AssetGraph({ root: 'path/to/css/files' })
+  .loadAssets('*.css')
+  .populate({ followRelations: { type: 'CssImage' } })
+  .queue(require('assetgraph-sprite')())
+  .writeAssetsToDisc({ url: /^file:/ }, 'file:///my/output/dir')
+  .run(function (err) {
+    if (err) throw err;
+    // All done!
+  });
 ```
 
 For a more elaborate example of how AssetGraph-sprite can fit in a
 workflow, see the <a href="https://github.com/One-com/assetgraph-builder/blob/master/bin/buildProduction">buildProduction script in AssetGraph-builder</a>
 
-
-License
--------
+## License
 
 AssetGraph-sprite is licensed under a standard 3-clause BSD license --
 see the `LICENSE`-file for details.
diff --git a/lib/packers/horizontal.js b/lib/packers/horizontal.js
@@ -1,9 +1,9 @@
-exports.pack = imageInfos => {
+exports.pack = (imageInfos) => {
   let previousRightPadding = 0;
   const packingData = {
     width: 0,
     height: 0,
-    imageInfos: []
+    imageInfos: [],
   };
   for (const existingImageInfo of imageInfos) {
     const imageInfo = { ...existingImageInfo };

diff --git a/lib/packers/index.js b/lib/packers/index.js
@@ -3,7 +3,7 @@
 for (const fileName of require('fs').readdirSync(__dirname)) {
   if (/\.js$/.test(fileName) && fileName !== 'index.js') {
     Object.defineProperty(exports, fileName.replace(/\.js$/, ''), {
-      get: () => require(`./${fileName}`)
+      get: () => require(`./${fileName}`),
     });
   }
 }
diff --git a/lib/packers/jimScott.js b/lib/packers/jimScott.js
@@ -25,7 +25,7 @@ function findCoords(node, width, height) {
     node.used = true;
     return {
       x: node.x,
-      y: node.y
+      y: node.y,
     };
   }
 
@@ -35,26 +35,26 @@ function findCoords(node, width, height) {
       x: node.x,
       y: node.y,
       width,
-      height: node.height
+      height: node.height,
     };
     node.rgt = {
       x: node.x + width,
       y: node.y,
       width: node.width - width,
-      height: node.height
+      height: node.height,
     };
   } else {
     node.lft = {
       x: node.x,
       y: node.y,
       width: node.width,
-      height
+      height,
     };
     node.rgt = {
       x: node.x,
       y: node.y + height,
       width: node.width,
-      height: node.height - height
+      height: node.height - height,
     };
   }
   return findCoords(node.lft, width, height);
@@ -66,7 +66,7 @@ exports.pack = (imageInfos, config) => {
     x: 0,
     y: 0,
     width: config.maxWidth || 999999,
-    height: config.maxHeight || 999999
+    height: config.maxHeight || 999999,
   };
 
   // Sort by area, descending:
@@ -75,12 +75,12 @@ exports.pack = (imageInfos, config) => {
   const packingData = {
     imageInfos: [],
     width: 0,
-    height: 0
+    height: 0,
   };
 
   for (const existingImageInfo of imageInfos) {
     const imageInfo = { ...existingImageInfo };
-    if (imageInfo.padding && imageInfo.padding.some(v => v > 0)) {
+    if (imageInfo.padding && imageInfo.padding.some((v) => v > 0)) {
       throw new Error('jimScott.pack: Sprite padding not supported');
     }
     // Perform the search

diff --git a/lib/packers/tryAll.js b/lib/packers/tryAll.js
@@ -1,6 +1,6 @@
 const packers = ['./horizontal', './vertical', './jimScott'].map(require);
 
-exports.pack = imageInfos => {
+exports.pack = (imageInfos) => {
   let bestPacking;
   for (const packer of packers) {
     let packing;

diff --git a/lib/packers/vertical.js b/lib/packers/vertical.js
@@ -1,9 +1,9 @@
-exports.pack = imageInfos => {
+exports.pack = (imageInfos) => {
   let previousBottomPadding = 0;
   const packingData = {
     width: 0,
     height: 0,
-    imageInfos: []
+    imageInfos: [],
   };
 
   for (const existingImageInfo of imageInfos) {