Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

assetgraph-sprite

Package Overview
Dependencies
Maintainers
2
Versions
46
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

assetgraph-sprite - npm Package Compare versions

Comparing version 3.1.0 to 3.1.1

4

lib/packers/horizontal.js

@@ -1,2 +0,2 @@

exports.pack = imageInfos => {
exports.pack = (imageInfos) => {
let previousRightPadding = 0;

@@ -6,3 +6,3 @@ const packingData = {

height: 0,
imageInfos: []
imageInfos: [],
};

@@ -9,0 +9,0 @@ for (const existingImageInfo of imageInfos) {

2

lib/packers/index.js

@@ -6,5 +6,5 @@ // Install getters for all packers in this directory:

Object.defineProperty(exports, fileName.replace(/\.js$/, ''), {
get: () => require('./' + fileName)
get: () => require(`./${fileName}`),
});
}
}

16

lib/packers/jimScott.js

@@ -28,3 +28,3 @@ /*

x: node.x,
y: node.y
y: node.y,
};

@@ -39,3 +39,3 @@ }

width,
height: node.height
height: node.height,
};

@@ -46,3 +46,3 @@ node.rgt = {

width: node.width - width,
height: node.height
height: node.height,
};

@@ -54,3 +54,3 @@ } else {

width: node.width,
height
height,
};

@@ -61,3 +61,3 @@ node.rgt = {

width: node.width,
height: node.height - height
height: node.height - height,
};

@@ -74,3 +74,3 @@ }

width: config.maxWidth || 999999,
height: config.maxHeight || 999999
height: config.maxHeight || 999999,
};

@@ -84,3 +84,3 @@

width: 0,
height: 0
height: 0,
};

@@ -90,3 +90,3 @@

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');

@@ -93,0 +93,0 @@ }

2

lib/packers/tryAll.js
const packers = ['./horizontal', './vertical', './jimScott'].map(require);
exports.pack = imageInfos => {
exports.pack = (imageInfos) => {
let bestPacking;

@@ -5,0 +5,0 @@ for (const packer of packers) {

4

lib/packers/vertical.js

@@ -1,2 +0,2 @@

exports.pack = imageInfos => {
exports.pack = (imageInfos) => {
let previousBottomPadding = 0;

@@ -6,3 +6,3 @@ const packingData = {

height: 0,
imageInfos: []
imageInfos: [],
};

@@ -9,0 +9,0 @@

91

lib/spriteBackgroundImages.js

@@ -8,3 +8,3 @@ const queryString = require('querystring');

function getProperties(container, propertyName) {
return container.nodes.filter(node => node.prop === propertyName);
return container.nodes.filter((node) => node.prop === propertyName);
}

@@ -15,3 +15,3 @@

await new Promise((resolve, reject) => {
canvasImage.onerror = err => reject(err);
canvasImage.onerror = (err) => reject(err);
canvasImage.onload = resolve;

@@ -27,3 +27,3 @@ canvasImage.src = imageAsset.rawSrc;

try {
rawSrc = await promisify(cb => canvas.toBuffer(cb))();
rawSrc = await promisify((cb) => canvas.toBuffer(cb))();
} catch (err) {

@@ -41,10 +41,10 @@ if (

type: 'Png',
rawSrc
rawSrc,
};
} else {
const rawSrc = await promisify(cb => {
const rawSrc = await promisify((cb) => {
const jpegChunks = [];
canvas
.createJPEGStream()
.on('data', chunk => {
.on('data', (chunk) => {
jpegChunks.push(chunk);

@@ -57,3 +57,3 @@ })

type: 'Jpeg',
rawSrc
rawSrc,
};

@@ -68,3 +68,3 @@ }

const tokens = [];
paddingStr.split(/[,+]|\s+/).forEach(token => {
paddingStr.split(/[,+]|\s+/).forEach((token) => {
const num = parseInt(token.replace(/[a-z]+$/, ''), 10);

@@ -88,3 +88,3 @@ if (!isNaN(num)) {

return padding.map(size =>
return padding.map((size) =>
Math.max(size, Math.max(asset.devicePixelRatio) - 1)

@@ -105,3 +105,3 @@ );

),
asset: incomingRelation.to
asset: incomingRelation.to,
};

@@ -112,3 +112,3 @@ }

const info = {};
cssRule.walkDecls(decl => {
cssRule.walkDecls((decl) => {
if (!propertyNamePrefix || decl.prop.startsWith(propertyNamePrefix)) {

@@ -132,3 +132,3 @@ const keyName = decl.prop

to: { isImage: true },
href: /\?(?:|[^#]*&)sprite(?:[=&#]|$)/
href: /\?(?:|[^#]*&)sprite(?:[=&#]|$)/,
})) {

@@ -141,3 +141,3 @@ const relationSpriteInfo = getRelationSpriteInfoFromIncomingRelation(

] = spriteGroups[relationSpriteInfo.groupName] || {
imageInfosById: {}
imageInfosById: {},
});

@@ -166,5 +166,5 @@ const imageInfo = spriteGroup.imageInfosById[relationSpriteInfo.asset.id];

type: 'Css',
isLoaded: true
isLoaded: true,
})) {
cssAsset.eachRuleInParseTree(cssRule => {
cssAsset.eachRuleInParseTree((cssRule) => {
if (cssRule.type !== 'rule') {

@@ -194,3 +194,3 @@ return;

if (
Object.keys(group.placeHolders[0]).every(key => {
Object.keys(group.placeHolders[0]).every((key) => {
if (['asset', 'cssRule'].includes(key)) {

@@ -211,3 +211,3 @@ return true;

asset: cssAsset,
cssRule
cssRule,
});

@@ -226,3 +226,3 @@ } else {

asset: cssAsset,
cssRule
cssRule,
});

@@ -240,4 +240,4 @@ }

...redefinitionErrors[spriteGroupName].map(
asset => ' ' + asset.urlOrDescription
)
(asset) => ` ${asset.urlOrDescription}`
),
].join('\n');

@@ -257,3 +257,3 @@

const canvasImages = await Promise.all(
imageInfos.map(imageInfo =>
imageInfos.map((imageInfo) =>
getCanvasImageFromImageAsset(imageInfo.asset)

@@ -267,3 +267,3 @@ )

width: canvasImage.width,
height: canvasImage.height
height: canvasImage.height,
});

@@ -276,3 +276,3 @@ }

horizontal: 'horizontal',
vertical: 'vertical'
vertical: 'vertical',
}[spriteInfo.packer] || 'tryAll';

@@ -308,7 +308,5 @@

let fileName = `sprite-${spriteGroupName}-${imageInfos.length}${
assetGraph[spriteImageType].prototype.defaultExtension
}`;
const fileName = `sprite-${spriteGroupName}-${imageInfos.length}${assetGraph[spriteImageType].prototype.defaultExtension}`;
if (Array.isArray(spriteGroup.placeHolders)) {
let location = spriteGroup.placeHolders[0].location;
const location = spriteGroup.placeHolders[0].location;
if (location) {

@@ -337,3 +335,3 @@ let href;

'background-image',
'background'
'background',
]) {

@@ -376,3 +374,3 @@ const decls = getProperties(cssRule, candidatePropertyName);

propertyNode,
tokenNumber
tokenNumber,
},

@@ -382,3 +380,3 @@ 'last'

relation.refreshHref();
spriteInfo.cssRule.walkDecls(decl => {
spriteInfo.cssRule.walkDecls((decl) => {
if (

@@ -388,5 +386,6 @@ [

'-sprite-packer',
'-sprite-location',
'-sprite-image-format',
'-sprite-background-color',
'-sprite-important'
'-sprite-important',
].includes(decl.prop)

@@ -404,4 +403,3 @@ ) {

if (backgroundSizeDecls.length > 0) {
backgroundSizeDecls[0].value =
packingData.width + 'px ' + packingData.height + 'px';
backgroundSizeDecls[0].value = `${packingData.width}px ${packingData.height}px`;
}

@@ -425,3 +423,3 @@ }

Math.round(imageInfo.x / imageInfo.asset.devicePixelRatio), // FIXME: Rounding issues?
Math.round(imageInfo.y / imageInfo.asset.devicePixelRatio)
Math.round(imageInfo.y / imageInfo.asset.devicePixelRatio),
];

@@ -439,3 +437,3 @@ let backgroundOffsetsWereUpdated = false;

i,
existingBackgroundValueToken
existingBackgroundValueToken,
] of backgroundTokens.entries()) {

@@ -456,3 +454,3 @@ if (/^(?:-?\d+px|0)$/i.test(existingBackgroundValueToken)) {

1,
offset ? -offset + 'px' : '0'
offset ? `${-offset}px` : '0'
);

@@ -479,3 +477,3 @@ }

.split(' ')
.map(item => parseInt(item, 10));
.map((item) => parseInt(item, 10));
if (

@@ -487,6 +485,3 @@ existingOffsets.length !== 2 ||

const err = new Error(
'WARNING: trying to sprite ' +
imageInfo.asset.url +
' with background-position: ' +
existingBackgroundPositionDecls[0].value
`WARNING: trying to sprite ${imageInfo.asset.url} with background-position: ${existingBackgroundPositionDecls[0].value}`
);

@@ -501,3 +496,3 @@ assetGraph.warn(err);

const newBackgroundPositionValue = offsets
.map(item => (item ? -item + 'px' : '0'))
.map((item) => (item ? `${-item}px` : '0'))
.join(' ');

@@ -509,5 +504,5 @@ if (existingBackgroundPositionDecls.length > 0) {

node.append(
'background-position: ' +
newBackgroundPositionValue +
(backgroundPositionImportant ? ' !important' : '')
`background-position: ${newBackgroundPositionValue}${
backgroundPositionImportant ? ' !important' : ''
}`
);

@@ -517,3 +512,3 @@ }

node.walkDecls(decl => {
node.walkDecls((decl) => {
if (

@@ -524,3 +519,3 @@ [

'-sprite-no-group-selector',
'-sprite-important'
'-sprite-important',
].includes(decl.prop)

@@ -570,3 +565,3 @@ ) {

propertyNode: incomingRelation.propertyNode,
to: spriteAsset
to: spriteAsset,
},

@@ -573,0 +568,0 @@ 'before',

25

package.json

@@ -5,3 +5,3 @@ {

"repository": "git://github.com/One-com/assetgraph-sprite.git",
"version": "3.1.0",
"version": "3.1.1",
"license": "BSD-3-Clause",

@@ -22,11 +22,16 @@ "maintainers": [

"devDependencies": {
"assetgraph": "^5.4.0",
"assetgraph": "^6.0.0",
"coveralls": "^3.0.0",
"eslint": "^5.7.0",
"eslint-config-pretty-standard": "^2.0.0",
"eslint-plugin-prettier": "^3.0.0",
"eslint": "^7.0.0",
"eslint-config-prettier": "^6.0.0",
"eslint-config-standard": "^14.0.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-mocha": "^7.0.0",
"eslint-plugin-node": "^11.0.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
"lodash.pluck": "^3.1.2",
"mocha": "^5.1.0",
"nyc": "^13.1.0",
"prettier": "^1.14.3",
"mocha": "^7.0.0",
"nyc": "^15.0.0",
"prettier": "~2.0.2",
"unexpected": "^11.0.0",

@@ -39,6 +44,6 @@ "urltools": "^0.4.1"

"scripts": {
"lint": "eslint .",
"lint": "eslint . && prettier --check '**/*.{js,md}'",
"test": "mocha",
"coverage": "NODE_ENV=development nyc --reporter=lcov --reporter=text --all -- npm run test && echo google-chrome coverage/lcov-report/index.html",
"travis": "npm run lint && npm run coverage"
"test:ci": "npm run coverage"
},

@@ -45,0 +50,0 @@ "main": "lib/spriteBackgroundImages.js",

134

README.md

@@ -1,3 +0,2 @@

AssetGraph-sprite
=================
# AssetGraph-sprite

@@ -20,4 +19,8 @@ [![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)

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

@@ -33,4 +36,10 @@

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

@@ -40,3 +49,3 @@

#### `padding=<top>,<right>,<bottom>,<left>` ####
#### `padding=<top>,<right>,<bottom>,<left>`

@@ -47,7 +56,7 @@ Adds "keepaway space" around the image in the sprite. Sometimes

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`

@@ -58,6 +67,4 @@ Tells AssetGraph-sprite that you want this selector to contain a

## Configuring a sprite
Configuring a sprite
--------------------
If you can guarantee that the HTML elements that need to have the

@@ -70,5 +77,11 @@ background image applied are also matched by another selector, you can

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

@@ -79,5 +92,11 @@

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

@@ -91,4 +110,9 @@

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

@@ -99,4 +123,9 @@

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

@@ -110,5 +139,5 @@

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

@@ -119,3 +148,3 @@ ```

#### `-sprite-packer: horizontal|vertical|jim-scott|try-all` ####
#### `-sprite-packer: horizontal|vertical|jim-scott|try-all`

@@ -130,3 +159,3 @@ Selects the packing algorithm for the sprite. The `horizontal` and

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

@@ -136,3 +165,3 @@ the algorithms and chooses the packing that produces the smallest

#### `-sprite-location: url(...)` ####
#### `-sprite-location: url(...)`

@@ -145,6 +174,8 @@ Specifies the desired location of the sprite. This is useful in

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

@@ -155,7 +186,11 @@

```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`

@@ -166,3 +201,3 @@ The format of the generated sprite. More will be added when <a

#### `-sprite-background-color: red|yellow|#123123|transparent|...` ####
#### `-sprite-background-color: red|yellow|#123123|transparent|...`

@@ -175,6 +210,4 @@ Specifies the background color for the generated sprite image,

## Installation
Installation
------------
```

@@ -184,4 +217,3 @@ $ npm install assetgraph-sprite

Usage
-----
## Usage

@@ -204,11 +236,11 @@ Since AssetGraph-sprite is intended to be used as part of an 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!
});
```

@@ -219,7 +251,5 @@

## License
License
-------
AssetGraph-sprite is licensed under a standard 3-clause BSD license --
see the `LICENSE`-file for details.
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc