Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Dropped the -ag prefix. Just using -sprite- now.

  • Loading branch information...
commit ba2e8fdb0c4d023ba165e54b7b48776b58005073 1 parent c981767
@papandreou papandreou authored
View
36 README.md
@@ -5,7 +5,7 @@ A plugin (or "transform") for <a
href="http://github.com/One-com/assetgraph">AssetGraph</a> that
optimizes CSS background images by creating sprite images. The
spriting is guided by GET parameters and a set of custom CSS
-properties with a `-ag-sprite` prefix.
+properties with a `-sprite-` prefix.
You can tell AssetGraph-sprite that you want to sprite a given CSS
background image by adding a `sprite` parameter to its query string:
@@ -37,7 +37,7 @@ 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
supported by the `jim-scott` packer (see the docs for
-`-ag-sprite-packer` below).
+`-sprite-packer` below).
#### `spriteNoGroup` ####
@@ -53,10 +53,10 @@ If you can guarantee that the HTML elements that need to have the
background image applied are also matched by another selector, you can
save some more bytes by telling AssetGraph-sprite that it only needs
to add the `background-image` property pointing at the sprite to that
-selector using the `-ag-sprite-selector-for-group` property:
+selector using the `-sprite-selector-for-group` property:
```css
-.foo { -ag-sprite-selector-for-group: 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); }
```
@@ -75,7 +75,7 @@ properties in the group selector and the priority (`!important`
status), for example:
```css
-.foo { -ag-sprite-selector-for-group: mySpriteGroup; background: red !important; }
+.foo { -sprite-selector-for-group: mySpriteGroup; background: red !important; }
.classone { background: blue url(images/thething.png?sprite=mySpriteGroup) !important; }
```
@@ -87,20 +87,20 @@ Compiles to:
```
You can tweak the generated sprite images by putting additional
-`-ag-sprite`-prefixed configuration properties into the "group
+`-sprite`-prefixed configuration properties into the "group
selector", for example:
```css
.foo {
- -ag-sprite-selector-for-group: mySpriteGroup;
- -ag-sprite-packer: horizontal;
- -ag-sprite-background-color: #a767ac;
+ -sprite-selector-for-group: mySpriteGroup;
+ -sprite-packer: horizontal;
+ -sprite-background-color: #a767ac;
}
```
These options are currently supported:
-#### `-ag-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.
@@ -110,12 +110,12 @@ 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
-`-ag-sprite-padding` property on the individual images. If you don't
-specify `-ag-sprite-packer`, the default is `try-all`, which runs all
+`-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).
-#### `-ag-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
@@ -123,8 +123,8 @@ postprocess the generated sprite image:
```css
.foo {
- -ag-sprite-selector-for-group: mySpriteGroup;
- -ag-sprite-location: url(mySprite.png?pngquant=128);
+ -sprite-selector-for-group: mySpriteGroup;
+ -sprite-location: url(mySprite.png?pngquant=128);
}
.classone { background-position: 0 0; }
```
@@ -136,13 +136,13 @@ Compiles to:
.classone { background-position: 0 0; }
```
-#### `-ag-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.
-#### `-ag-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
@@ -184,7 +184,7 @@ $ npm install assetgraph
Here's a stripped-down example that loads all CSS files in a
directory, loads all the images linked to by `background` and
`background-image` properties, sprites them according to the
-`-ag-sprite-...` instructions, then writes the resulting CSS and
+`-sprite-...` instructions, then writes the resulting CSS and
all the images to a different directory:
```javascript
View
9 lib/spriteBackgroundImages.js
@@ -3,7 +3,6 @@ var queryString = require('querystring'),
seq = require('seq'),
passError = require('passerror'),
AssetGraph = require('assetgraph'),
- vendorPrefix = AssetGraph.assets.Css.vendorPrefix,
urlTools = require('assetgraph/lib/util/urlTools'),
packers = require('./packers'),
Canvas;
@@ -119,8 +118,8 @@ module.exports = function () {
if (cssRule.type !== 1) { // cssom.CSSRule.STYLE_RULE
return;
}
- if ((vendorPrefix + 'sprite-selector-for-group') in cssRule.style) {
- var spriteInfo = AssetGraph.assets.Css.extractInfoFromRule(cssRule, vendorPrefix + 'sprite-'),
+ if (('-sprite-selector-for-group') in cssRule.style) {
+ var spriteInfo = AssetGraph.assets.Css.extractInfoFromRule(cssRule, '-sprite-'),
spriteGroupName = spriteInfo.selectorForGroup;
if ('location' in spriteInfo) {
var matchLocation = spriteInfo.location.match(/^url\((['"]|)(.*?)\1\)$/);
@@ -233,7 +232,7 @@ module.exports = function () {
assetGraph.addRelation(relation, 'last');
relation.refreshHref();
['selector-for-group', 'packer', 'image-format', 'background-color', 'important'].forEach(function (propertyName) {
- spriteGroup.placeHolder.cssRule.style.removeProperty(vendorPrefix + 'sprite-' + propertyName);
+ spriteGroup.placeHolder.cssRule.style.removeProperty('-sprite-' + propertyName);
});
}
imageInfos.forEach(function (imageInfo) {
@@ -277,7 +276,7 @@ module.exports = function () {
}).join(' '),
backgroundPositionPriority);
['group', 'padding', 'no-group-selector', 'important'].forEach(function (propertyName) {
- style.removeProperty(vendorPrefix + 'sprite-' + propertyName);
+ style.removeProperty('-sprite-' + propertyName);
});
if (relationSpriteInfo.noGroup || !spriteGroup.placeHolder) {
// The user specified that this selector needs its own background-image/background
View
6 test/spriteBackgroundImages-test.js
@@ -33,14 +33,14 @@ vows.describe('Sprite background images').addBatch({
}
}
},
- 'After loading the same test case again, set the -ag-sprite-image-format to jpg and sprite the background images': {
+ 'After loading the same test case again, set the -sprite-image-format to jpg and sprite the background images': {
topic: function () {
new AssetGraph({root: __dirname + '/spriteBackgroundImages/simple/'})
.loadAssets('style.css')
.populate()
.queue(function (assetGraph) {
var cssAsset = assetGraph.findAssets({type: 'Css'})[0];
- cssAsset.parseTree.cssRules[0].style.setProperty('-ag-sprite-image-format', 'jpg');
+ cssAsset.parseTree.cssRules[0].style.setProperty('-sprite-image-format', 'jpg');
cssAsset.markDirty();
})
.queue(spriteBackgroundImages())
@@ -107,7 +107,7 @@ vows.describe('Sprite background images').addBatch({
}
}
},
- 'After loading a simple test case with two sprites with -ag-sprite-location properties in the group selector': {
+ 'After loading a simple test case with two sprites with -sprite-location properties in the group selector': {
topic: function () {
new AssetGraph({root: __dirname + '/spriteBackgroundImages/spriteLocation/'})
.loadAssets('style.css')
View
2  test/spriteBackgroundImages/existingBackgroundImageInGroupSelector/style.css
@@ -1,5 +1,5 @@
.icon {
- -ag-sprite-selector-for-group: icons;
+ -sprite-selector-for-group: icons;
background-image: !important;
}
View
2  test/spriteBackgroundImages/existingBackgroundInGroupSelector/style.css
@@ -1,5 +1,5 @@
.icon {
- -ag-sprite-selector-for-group: icons;
+ -sprite-selector-for-group: icons;
background: red !important;
}
View
2  test/spriteBackgroundImages/existingBackgroundPositions/style.css
@@ -1,5 +1,5 @@
.icon {
- -ag-sprite-selector-for-group: icons;
+ -sprite-selector-for-group: icons;
}
.icon-foo {
View
2  test/spriteBackgroundImages/important/style.css
@@ -1,5 +1,5 @@
.icon {
- -ag-sprite-selector-for-group: icons;
+ -sprite-selector-for-group: icons;
}
.icon-foo {
View
6 test/spriteBackgroundImages/simple/style.css
@@ -1,7 +1,7 @@
.icon {
- -ag-sprite-selector-for-group: icons;
- -ag-sprite-packer: horizontal;
- -ag-sprite-background-color: transparent;
+ -sprite-selector-for-group: icons;
+ -sprite-packer: horizontal;
+ -sprite-background-color: transparent;
}
.icon-foo {
View
8 test/spriteBackgroundImages/spriteLocation/style.css
@@ -1,6 +1,6 @@
.icon {
- -ag-sprite-selector-for-group: icons;
- -ag-sprite-location: url(myImage.png?pngquant=128);
+ -sprite-selector-for-group: icons;
+ -sprite-location: url(myImage.png?pngquant=128);
}
.icon-foo {
@@ -12,8 +12,8 @@
}
.icon2 {
- -ag-sprite-selector-for-group: icons2;
- -ag-sprite-location: url(?pngquant=128);
+ -sprite-selector-for-group: icons2;
+ -sprite-location: url(?pngquant=128);
}
.icon2-foo {
View
2  test/spriteBackgroundImages/spriteNoGroup/style.css
@@ -1,5 +1,5 @@
.foo {
- -ag-sprite-selector-for-group: foo;
+ -sprite-selector-for-group: foo;
}
.foo-foo {
Please sign in to comment.
Something went wrong with that request. Please try again.