Giter Site home page Giter Site logo

postcss-urlrev's Introduction

postcss-urlrev

PostCSS plugin for css url revision, inspired by postcss-url

Build Status Coverage Status

/* Input example */
.foo {
    background: url(images/test.png) 0 0 no-repeat;
}
/* Output example */
.foo {
    background: url(images/test.png?v=e19ac7dee6) 0 0 no-repeat;
}

Install

For postcss 6.x

npm install --save-dev postcss-urlrev

and for postcss 5.x

npm install --save-dev [email protected]

Usage

var urlrev = require('postcss-urlrev');
postcss(urlrev({ /* options */ }))

Options

relativePath

Type: string
Default: the css file's folder

The relativePath is used to calculate the absolute path of the url resource. By default, the value is the folder path of the css source file. You should set this value based on your environment.

absolutePath

Type: string
Default: undefined

The absolutePath is used to calculate the absolute path of the url resources that have an absolute path, f.ex. /images/test.png. If absolutePath is not set, absolute url's will be skipped, as the full path to the resource cannot be resolved.

includeRemote

Type: boolean
Default: false

If you set it to true, it will handle the remote url, request the remote resource and calculate the md5 hash.

hashFunction(filename, baseName)

Type: function
Default: undefined

If specified, it will use the hashFunction to generate hash strings.

The function accepts two parameters:

  • filename: the absolute file path. (e.g. /path/to/test.png)
  • baseName: the base name of the file. (e.g. test.png)

replacer(url, hash)

Type: function
Default: defaultReplacer(url, hash)

It will receive the url and hash as its parameter, you can specify a function to handle the url manually.

A replacer example:

function replacer(url, hash) {
    return url + '?' + hash;
}

hashLength

Type: number
Default: 10

The length of the hash string, the default value is 10. That's enough!

License

MIT

postcss-urlrev's People

Contributors

yuezk avatar holm avatar ln-e avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.