Cachebusting with Grunt

[nhall]

I'm having issues using the cachebuster option. I know I have things set up correctly because I can use the other options (inlining, dimensions) successfully. Here are my settings:

var assets  = require('postcss-assets');

grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),
  postcss: {
    options: {
      processors: [
        assets({
          cachebuster: true
        })
      ]
    },
    dist: {
      src: 'build/src.css',
      dest: 'build/compiled.css',
    }
  }
});

And here's my CSS:

.image {
  background: url("../images/image.png");
}

Am I missing something here?

[borodean]

@nhall are you using resolve in a source CSS?

.image {
  background: resolve('image.png');
}

[nhall]

@borodean - No, thank you! This was my issue.

[UziTech]

@borodean does cachebuster: true only work with resolve('./some-image.png') and not url('./some-image.png')?

because there is nothing in the readme that states that, and every tutorial that I found online is wrong

https://css-tricks.com/images-in-postcss/#article-header-id-4

http://www.developerdrive.com/2017/09/using-postcss-with-images/

[borodean]

@UziTech those tutorials are all wrong regarding that aspect. My bet is that they've just copy-pasted the mistake from each other.

Cache is busted for the resolve() calls only. Moreover, PostCSS Assets doesn't interact with the url() function at all.

[UziTech]

Is there a reason it doesn't work with url? (the way the tutorials suggest)

[borodean]

@UziTech during its early days, PostCSS Assets was working exclusively with url() functions, trying to be smart and guessing how to transform them: here is the old README.

For instance, this was resolved as either modern-day resolve() or inline() depending on the size of picture.jpg:

body {
  background-image: url('picture.jpg');
}

These were the modern-day width(), height() or size() magically guessed from the corresponding property names:

body {
  width: url('picture.jpg');
  height: url('picture.jpg');
  background-size: url('picture.jpg');
}

However, this behavior was discarded as early as in version 1.0.0 to allow developers more fine-grained control of what they wanted to achieve: #1.

Since then, the idea behind its API is simple: provide a set of "functions" doing what developer asks them to do, like Compass or rails-sass-images do. Basically, this plugin emerged as a JavaScript replacement for those in PostCSS.

[borodean]

Though, I actually love the "auto-magical" tools out there so if someone suggests a solid way to implement it for PostCSS Assets I'd be happy to collaborate.