Output one common background-image rule for each sprite image

Motivation

Currently, SmartSprites outputs one background-image CSS rule per sprite image occurrence. Because the sprite image path is the same for each such occurrence, SmartSprites could collapse all occurrences of background-image for a sprite into a single CSS declaration.

For example, instead of:

.white_corner .top_left {
       background-image:url(images/structure.png);
       background-position:0 top;
}
.white_corner .top_right {
       background-image:url(images/structure.png);
       background-position:-15px top;
}

SmartSprites could output:

.white_corner .top_left {
       background-position:0 top;
}
.white_corner .top_right {
       background-position:-15px top;
}
.white_corner .top_left, .white_corner .top_right{
       background-image:url(images/structure.png);
}

This feature was suggested in this discussion group post.

Implementation

SmartSprites should expose a global --collapse-sprite-background-images boolean option to control collapsing of background-image rules. Collapsing should be disabled by default. When collapsing is enabled, for each processed CSS file, SmartSprites should collect the CSS matching rules whose body contains sprite references, suppress outputting individual background-image for each sprite occurrence and output one common CSS declaration consisting of the collected CSS matching rules joined by a comma and containing the sprite's background-image directive.

A possible optimization to consider is outputting the common background-image block only for sprites that were actually referenced in the processed CSS file.

Discussion

Controlling background-image collapsing could also be done on the sprite definition level, but the global options seems enough for the time being.