2createStudio / postcss-sprites

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

Seemingly no support for JPEGs #10

Closed pauleustice closed 9 years ago

pauleustice commented 9 years ago

The plugin doesn't seem to be supporting JPEGs, despite Spritesmith's (well, the default engine pixelsmith) support.

Environment: Windows 7 / Node 0.12.4 / Grunt-CLI 0.1.13

Grunt task:

postcss: {
    options: {
        map: true,
        processors: [
            require('postcss-sprites')({
                spritePath: './client-side/dist/images/',
                spriteName: 'sprite.png',
                retina: true
            })
        ]
    },
    dist: {
        src: '<%= dirs.src %>/pcss/app.pcss',
        dest: '<%= dirs.dst %>/css/app.css'
    }
},

The images I tested are simple JPEGs exported from Photoshop with Save for Web. PNGs are sprited correctly.

Verbose output:

Verifying property postcss.dist exists in config...OK Files: client-side/src/pcss/app.pcss -> client-side/dist/css/app.css Options: diff=false, map, processors=[null], silent=false Reading client-side/src/pcss/app.pcss...OK 8 Jun 12:57:16 - [postcss-sprites] => Skip ../images/image-1.jpg - not supported. 8 Jun 12:57:16 - [postcss-sprites] => Skip ../images/image-2.jpg - not supported. 8 Jun 12:57:16 - [postcss-sprites] => Done. Writing client-side/dist/css/app.css...OK

Any ideas?

vvasilev- commented 9 years ago

At the moment the plugin supports only PNG format, but this can be changed very easy. Can I ask why do you need a JPG sprite?

pauleustice commented 9 years ago

Ah ok, I didn't realise... Maybe that could be put in the docs? :)

I'm working with some legacy JPG icon files (no source files available) that need to be sprited. Could this functionality be switched on please?

It's a great plugin, if it could match the functionality of spritesmith that would be awesome (and more transparent).

Thanks!

On Mon, 8 Jun 2015 13:08 Viktor Vasilev notifications@github.com wrote:

At the moment the plugin supports only PNG https://github.com/2createStudio/postcss-sprites/blob/master/index.js#L700 format, but this can be changed very easy. Can I ask why do you need a JPG sprite?

— Reply to this email directly or view it on GitHub https://github.com/2createStudio/postcss-sprites/issues/10#issuecomment-109969897 .

vvasilev- commented 9 years ago

JPG allowed :)

pauleustice commented 9 years ago

Hi @vvasilev- thanks. This just appears to sprite JPEGs into a PNG format though. What about if someone wanted to output a JPEG sprite? When I try that now (with two source JPEGs) the file has a JPEG extension but isn't valid (as it's really in PNG format).

vvasilev- commented 9 years ago

You can specify the format of ouput sprite in that way:

var opts    = {
    baseUrl      : './dist',
    spritePath   : './dist/images',
    spriteName   : 'sprite.png',
    exportOpts: { 
        format: 'jpg'
    },
    engine: 'another-engine'
};

I've done some research and found that the default engine pixelsmith is not so good when you try to work with JPG images, so I can recommend to try with another engine.

Please, take a look on this issue to get more information about which engine you should use.