Uploaded image for project: 'SmartSprites'
  1. SmartSprites
  2. SMARTSPRITES-51

Output one common background-image rule for each sprite image

    Details

    • Type: New Feature
    • Status: Open
    • Priority: Minor
    • Resolution: Unresolved
    • Affects Version/s: None
    • Fix Version/s: 0.4.0
    • Labels:
      None

      Description

      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.

        Attachments

          Issue Links

            Activity

              People

              • Assignee:
                stachoo Stanisław Osiński
                Reporter:
                stachoo Stanisław Osiński
              • Votes:
                0 Vote for this issue
                Watchers:
                0 Start watching this issue

                Dates

                • Created:
                  Updated: