stylus-versioned-urls

Stylus plugin to version urls in built css.

This plugin doesn't generate versioned urls, it assumes you've already done that. It takes a map of unversioned to versioned urls and translates unversioned urls in the stylus source to versioned urls in the css output.

Installation

npm install stylus-versioned-urls

Usage

var stylus = require('stylus'),
    versionedUrls = require('stylus-versioned-urls')
    versions = {
      '/fonts/sans.woff': '/fonts/sans.123.woff'
      '/fonts/serif.woff': '/fonts/serif.456.woff'
    };

stylus(css)
  .use(versionedUrls(versions))
  .render(function(err, output) {
    console.log(output)
  })

With Grunt

Combine with grunt-contrib-stylus and grunt-assets-versioning to version and build CSS:

var stylusVersionedUrls = require('stylus-versioned-urls')
grunt.loadNpmTasks('grunt-contrib-stylus')
grunt.loadNpmTasks('grunt-contrib-copy')
grunt.loadNpmTasks('grunt-assets-versioning')

function digestManifest (path) {
  return grunt.file.readJSON(path).reduce(function(manifest, file) {
    manifest[file.path] = file.revved_path
    return manifest
  }, {})
}

grunt.initConfig({
  assets_versioning: {
    images: {
      expand: true,
      cwd: 'public/',
      src: ['**/*.jpg', '**/*.png'],
      dest: 'versioned/',
      options: {
        use: 'hash',
        hashLength: 8,
        multitask: 'copy',
        output: 'build/version_manifest.json'
      }
    }
  },

  stylus: {
    all: {
      src: 'src/**/*.styl',
      dest: 'public/css/'
      ext: '.css'
      options: {
        use: [
          function() {
            return stylusVersionedUrls(digestManifest('build/version_manifest.json'))
          }
        ]
      }
    }
  }
})

grunt.registerTask('default', [
  'assets_versioning',
  'stylus'
])