2createStudio / postcss-sprites

Generate sprites from stylesheets.
MIT License
413 stars 50 forks source link

Extend onSaveSpritesheet parameters #80

Closed Schascha closed 7 years ago

Schascha commented 7 years ago

I add css as a parameter inside the onSaveSpritesheet hook in order to create the sprite files relative to the css files. Sadly, if I use the spritePath property, all sprite images will be placed and overwritten in the same directory.

But in my case:

css/styles.css img/build/sprite.png

and in addition, the same structure for a campaign inside the project:

campaign/css/style.css campaign/img/build/sprite.png

Adding the css parameter allows me to change the sprite file path. In that way postcss will add a separate sprite image for the base styles and also for the campaign styles.

hooks: {
    onSaveSpritesheet: function(css, opts, spritesheet) {
        var
            path = css.source.input.file.match(/(.+?)\/css\//),
            file = ['sprite'].concat(spritesheet.groups, [spritesheet.extension]).join('.')
        ;

        return path[1] + '/img/build/' + file;
    }
}

Or do you have a better solution to create sprites relative to the calling css file?

vvasilev- commented 7 years ago

Hey @Schascha,

Thanks for the PR! You can get the same result using a groupBy function and the styleFilePath property of the image objects. I'm going to close this for now, but if you have some questions feel free to write them here. :)