Merge pull request #5 from Munter/namespace

Renamed -one- vendor prefix to -ag-

README.rst

@@ -4,15 +4,15 @@ AssetGraph-sprite
 A plugin (or "transform") for `AssetGraph
 <http://github.com/One-com/assetgraph>`_ that optimizes CSS background
 images by creating sprite images. The spriting is guided by a set of
-custom CSS properties with a ``-one-sprite`` prefix.
+custom CSS properties with a ``-ag-sprite`` prefix.
 
 You can tell AssetGraph-sprite that you want to sprite a given CSS
-background image by adding a ``-one-sprite-group`` property to the
+background image by adding a ``-ag-sprite-group`` property to the
 selector containing the ``background`` or ``background-image``
 property::
 
-    .classone {background-image: url(images/thething.png);      -one-sprite-group: my-sprite-group; }
-    .classtwo {background-image: url(images/theotherthing.png); -one-sprite-group: my-sprite-group; }
+    .classone {background-image: url(images/thething.png);      -ag-sprite-group: my-sprite-group; }
+    .classtwo {background-image: url(images/theotherthing.png); -ag-sprite-group: my-sprite-group; }
 
 This is valid CSS and will also work fine on its own in "development
 mode" without a compilation step, so you don't need to rebuild your
@@ -25,20 +25,20 @@ will look something like this::
 
 Some additional properties are supported:
 
-``-one-sprite-padding: <top> <right> <bottom> <left>``
+``-ag-sprite-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
   supported by the ``jim-scott`` packer (see the docs for
-  ``-one-sprite-packer`` below).
+  ``-ag-sprite-packer`` below).
 
-``-one-sprite-important: important``
+``-ag-sprite-important: important``
   Makes sure that the injected ``background-image`` property pointing
   at the sprite image gets the ``!important`` suffix.
 
-``-one-sprite-no-group-selector: true``
+``-ag-sprite-no-group-selector: true``
   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).
@@ -51,11 +51,11 @@ 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 ``-one-sprite-selector-for-group`` property::
+selector using the ``-ag-sprite-selector-for-group`` property::
 
-    .foo { -one-sprite-selector-for-group: my-sprite-group; }
-    .classone {background-image: url(images/thething.png);      -one-sprite-group: my-sprite-group; }
-    .classtwo {background-image: url(images/theotherthing.png); -one-sprite-group: my-sprite-group; }
+    .foo { -ag-sprite-selector-for-group: my-sprite-group; }
+    .classone {background-image: url(images/thething.png);      -ag-sprite-group: my-sprite-group; }
+    .classtwo {background-image: url(images/theotherthing.png); -ag-sprite-group: my-sprite-group; }
 
 Which compiles to::
 
@@ -64,42 +64,42 @@ Which compiles to::
     .classtwo { background-position: -34px 0; }
 
 You can tweak the generated sprite images by putting additional
-``-one-sprite``-prefixed configuration properties into the "group
+``-ag-sprite``-prefixed configuration properties into the "group
 selector", for example::
 
     .foo {
-        -one-sprite-selector-for-group: my-sprite-group;
-        -one-sprite-packer: horizontal;
-        -one-sprite-background-color: #a767ac;
+        -ag-sprite-selector-for-group: my-sprite-group;
+        -ag-sprite-packer: horizontal;
+        -ag-sprite-background-color: #a767ac;
     }
 
 These options are currently supported:
 
-``-one-sprite-packer: horizontal|vertical|jim-scott|try-all``
+``-ag-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.
   This works well when you have a bunch of images with the same height
   or width. The ``jim-scott`` packer is a little fancier, it's an
   implementation of `a floor planning algorithm
   <http://www.blackpawn.com/texts/lightmaps/>`_ originally invented
   by Jim Scott for packing lightmaps. The Jim Scott packer doesn't
-  support the ``-one-sprite-padding`` property on the individual images.
-  If you don't specify ``-one-sprite-packer``, the default is ``try-all``,
+  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 the algorithms and chooses the packing that produces
   the smallest sprite image (area-wise).
 
-``-one-sprite-important: important``
+``-ag-sprite-important: important``
   Adds ``!important`` after the injected ``background-image``. As mentioned
   above this is also supported for group selector-less sprites; simply add
-  ``one-sprite-important: important`` to the selector containing
+  ``-ag-sprite-important: important`` to the selector containing
   the ``background`` or ``background-image`` selector).
 
-``-one-sprite-image-format: png|jpg``
+``-ag-sprite-image-format: png|jpg``
   The format of the generated sprite. More will be added when
   `node-canvas <http://github.com/LearnBoost/node-canvas>`_ gains
   support for more image formats.
 
-``-one-sprite-background-color: red|yellow|#123123|transparent|...``
+``-ag-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 `CSS3 Color Module <http://www.w3.org/TR/2003/CR-css3-color-20030514/#numerical>`_,
@@ -134,7 +134,7 @@ workflow, first you'll need to have AssetGraph installed to use it properly::
 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
-``-one-sprite-...`` instructions, then writes the resulting CSS and
+``-ag-sprite-...`` instructions, then writes the resulting CSS and
 all the images to a different directory::
 
     var AssetGraph = require('assetgraph');

lib/transforms/spriteBackgroundImages.js

@@ -87,7 +87,7 @@ module.exports = function () {
 
         var spriteGroups = {};
         assetGraph.findRelations({type: 'CssImage'}).forEach(function (relation) {
-            var spriteInfo = AssetGraph.assets.Css.extractInfoFromRule(relation.cssRule, vendorPrefix + '-sprite-'),
+            var spriteInfo = AssetGraph.assets.Css.extractInfoFromRule(relation.cssRule, vendorPrefix + 'sprite-'),
                 asset = relation.to;
             if (spriteInfo.group) {
                 var spriteGroup = spriteGroups[spriteInfo.group];
@@ -118,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 ((vendorPrefix + 'sprite-selector-for-group') in cssRule.style) {
+                    var spriteInfo = AssetGraph.assets.Css.extractInfoFromRule(cssRule, vendorPrefix + 'sprite-'),
                         spriteGroupName = spriteInfo.selectorForGroup;
                     if (spriteGroupName in spriteGroups) {
                         if (spriteGroups[spriteGroupName].placeHolder) {
@@ -188,13 +188,13 @@ 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(vendorPrefix + 'sprite-' + propertyName);
                             });
                         }
                         imageInfos.forEach(function (imageInfo) {
                             imageInfo.incomingRelations.forEach(function (incomingRelation) {
                                 incomingRelation.from.markDirty();
-                                var relationSpriteInfo = AssetGraph.assets.Css.extractInfoFromRule(incomingRelation.cssRule, vendorPrefix + '-sprite-'),
+                                var relationSpriteInfo = AssetGraph.assets.Css.extractInfoFromRule(incomingRelation.cssRule, vendorPrefix + 'sprite-'),
                                     offsets = [
                                         imageInfo.x,
                                         imageInfo.y
@@ -225,7 +225,7 @@ module.exports = function () {
                                                                             }).join(' '),
                                                                             relationSpriteInfo.important && 'important');
                                 ['group', 'padding', 'no-group-selector', 'important'].forEach(function (propertyName) {
-                                    incomingRelation.cssRule.style.removeProperty(vendorPrefix + '-sprite-' + propertyName);
+                                    incomingRelation.cssRule.style.removeProperty(vendorPrefix + 'sprite-' + propertyName);
                                 });
                                 if (relationSpriteInfo.noGroupSelector || !spriteGroup.placeHolder) {
                                     // The user specified that this selector needs its own background-image/background

test/spriteBackgroundImages-test.js

@@ -32,14 +32,14 @@ vows.describe('Sprite background images').addBatch({
             }
         }
     },
-    'After loading the same test case again, set the -one-sprite-image-format to jpg and sprite the background images': {
+    'After loading the same test case again, set the -ag-sprite-image-format to jpg and sprite the background images': {
         topic: function () {
             new AssetGraph({root: __dirname + '/spriteBackgroundImages/simple/'}).queue(
                 transforms.loadAssets('style.css'),
                 transforms.populate(),
                 function (assetGraph) {
                     var cssAsset = assetGraph.findAssets({type: 'Css'})[0];
-                    cssAsset.parseTree.cssRules[0].style.setProperty('-one-sprite-image-format', 'jpg');
+                    cssAsset.parseTree.cssRules[0].style.setProperty('-ag-sprite-image-format', 'jpg');
                     cssAsset.markDirty();
                 },
                 require('../lib')()

test/spriteBackgroundImages/noGroupSelector/style.css

@@ -1,9 +1,9 @@
 .icon-foo {
-    -one-sprite-group: icons;
+    -ag-sprite-group: icons;
     background-image: url(foo.png);
 }
 
 .icon-bar {
-    -one-sprite-group: icons;
+    -ag-sprite-group: icons;
     background-image: url(bar.png);
 }

test/spriteBackgroundImages/simple/style.css

@@ -1,22 +1,22 @@
 .icon {
-    -one-sprite-selector-for-group: icons;
-    -one-sprite-packer: horizontal;
-    -one-sprite-background-color: transparent;
+    -ag-sprite-selector-for-group: icons;
+    -ag-sprite-packer: horizontal;
+    -ag-sprite-background-color: transparent;
 }
 
 .icon-foo {
-    -one-sprite-group: icons;
-    -one-sprite-padding: 10 10 10 10;
+    -ag-sprite-group: icons;
+    -ag-sprite-padding: 10 10 10 10;
     background-image: url(foo.png);
 }
 
 .icon-bar {
-    -one-sprite-group: icons;
+    -ag-sprite-group: icons;
     background-image: url(bar.png);
 }
 
 .icon-quux {
-    -one-sprite-group: icons;
-    -one-sprite-no-group-selector: true;
+    -ag-sprite-group: icons;
+    -ag-sprite-no-group-selector: true;
     background-image: url(quux.png);
 }