No visible success, no error

[msecret]

I can't get this to work at all. I'm even starting to doubt what this plugin is supposed to do. Is it supposed to generate the actual spritesheet image and put it in spritePath? Either way, I'm not seeing results in terms of images or changes to output CSS. Here's my nodejs file I'm running (attempting to run the CLI didn't work).

var fs = require('fs');
var postcss = require('postcss');

var css = fs.readFileSync('./css/cg_style.css', 'utf8');

postcss([ require('postcss-sprites').default ])
    .process(css, { 
      relativeTo: 'rule',
      stylesheetPath: './css',
      spritePath: './img'
    })
    .then(function (result) {
      fs.writeFileSync('./css/app.css', result.css);
    });

[vvasilev-]

The relativeTo: rule option is useful when you have many css files that are imported in one single file and you want to rewrite the paths to all images. I'll check why doesn't throw error in your case. Meantime you can try to use the code block below.

var fs = require('fs');
var postcss = require('postcss');

var css = fs.readFileSync('./css/cg_style.css', 'utf8');

postcss([ require('postcss-sprites').default ])
    .process(css, { 
      stylesheetPath: './css',
      spritePath: './img'
    })
    .then(function (result) {
      fs.writeFileSync('./css/app.css', result.css);
    });

[msecret]

Working through this now. I got it to at least output postcss-sprites: 0 spritesheet generated.. There's a couple of other things I'm seeing.

In extractImages(), the images array that it returns has the wrong path for the images. Investigating that more now.

I have a feeling errors are being swallowed, maybe by the promise structure somewhere. If I put an invalid piece of JS in one of the main functions, nodejs doesn't report an error and the script doesn't output anything.

Anyway, will continue, think I'll be able to figure something out.

[msecret]

This is what I had to do to get it working:

var fs = require('fs');
var postcss = require('postcss');

var css = fs.readFileSync('./css/cg_style.css', 'utf8');

var opts = {
  filterBy: function(image) {
    console.log('filterByTest');
    if (!/\.png$/.test(image.url)) {
      return Promise.reject();
    }

    return Promise.resolve();
  },
  stylesheetPath: './css',
  spritePath: './img'
};

postcss([ require('postcss-sprites').default(opts) ])
    .process(css, { 
      from: './css/cg_style.css',
      to: './css/cg_style.css',
    })
    .then(function (result) {
      fs.writeFileSync('./css/app.css', result.css);
    });

• To pass options to a postcss plugin, you have to pass them to the plugin, not the process method.
• If I didn't include the from and to as an option to process, the post css rule.source.input.file would be undefined, leading to incorrect relative paths.
• I had some svg background images which I had to take out

I also opened a pull request because errors weren't being reported, https://github.com/2createStudio/postcss-sprites/pull/41.

Let me know if you'd be interested in me opening a PR to add a more thorough example like this to the README.

[vvasilev-]

Thanks for detailed feedback :). You're right about where should pass the options. I was wrong in my response and sorry about that. I'll add a more detailed example in README that gives a better instructions how to use the plugin. Also I'll add a better logging functionality to workaround the problems with silent fails.