Feature Request - Allow post-processing regular expressions

Bug #506167 reported by jeffs
This bug affects 1 person
Affects Status Importance Assigned to Milestone
CSS Sprite Generator

Bug Description

I love this tool. But, if I'm using the sprite generator to create backgrounds for buttons, there doesn't seem to be an easy way to get a :hover effect without using javascript. I would rather use pure CSS if possibe. For example, here's what I would like to do:

    background: url(../images/mainSprite.png) no-repeat;
    width: 15px;
    height: 15px;

    background-position: 0px 0px;

    background-position: -15px 0px;

<div class="button deleteButton"></div>

I was thinking that if you allowed the user to specify regular expressions to apply on the css output, we could generate hover classes or do other useful things. For example:

deleteButton.png (normal image for button)
deleteButton_hover.png (hover image for button)

Currently I would get the following in the output:
    .deleteButton { background-position: 0 0; }
    .deleteButton_hover { background-position: -15 0; }

But, if I can run this regular expression on the output:
    /(.*)_hover$/, "$1:hover"

I would get:
    .delete { background-position: 0 0; }
    .delete:hover { background-position: -15 0; }

Also, this could be useful for extracting width and height styles out of a comment, if you implement bug #495052 as a comment as rralian suggested.

If you don't want to implement loose regular expressions, could the generator create :hover styles if the filenames included a special key of some sort?

Thanks for your consideration and creating a great tool!

Revision history for this message
Stuart Colville (muffinresearch) wrote :

I like this idea a lot - thanks for contributing your ideas. Not sure yet when we'll work this in but if it doesn't make into version 4.1 I can see we should be able to get it into version 4.2.

As a side note, the heights/widths feature is available already in the 4.1 branch which should be released within a week or so.

Changed in css-sprite-generator:
importance: Undecided → Wishlist
status: New → Triaged
To post a comment you must log in.
This report contains Public information  Edit
Everyone can see this information.

Other bug subscribers