xexys / postcss-url

PostCSS plugin to rebase or inline on url().

postcss-url

PostCSS plugin to rebase, inline or copy on url().

Installation

$ npm install postcss-url

Usage

// dependencies
var fs = require("fs")
var postcss = require("postcss")
var url = require("postcss-url")

// css to be processed
var css = fs.readFileSync("input.css", "utf8")

// process css
var output = postcss()
  .use(url({
    url: "rebase" // or "inline" or "copy"
  }))
  .process(css, {
    // "rebase" mode need at least one of those options
    // "inline" mode might need `from` option only
    // "copy" mode need `from` and `to` option to work
    from: "src/stylesheet/index.css",
    to: "dist/index.css"
  })
  .css

Checkout tests for examples.

Options

url

(default: "rebase")

url: "rebase"

Allow you to fix url() according to postcss to and/or from options (rebase to to first if available, otherwise from or process.cwd()).

url: "inline"

Allow you to inline assets using base64 encoding. Can use postcss from option to find ressources.

url: "copy"

Allow you to copy and rebase assets according to postcss to, assetsPath and from options (assetsPath is relative to the option to).

url: {Function}

Custom transform function. Takes following arguments:

• URL – original url
• decl - related postcss declaration object
• from - from postcss option
• dirname – dirname of processing file
• to – from postcss option
• options – plugin options
• result – postcss result object

And should return the transformed url. You can use this option to adjust urls for CDN.

maxSize

(default: 14)

Specify the maximum file size to inline (in kbytes)

filter

A regular expression e.g. /\.svg$/, a minimatch string e.g. '**/*.svg' or a custom filter function to determine wether a file should be inlined.

fallback

The url fallback method to use if max size is exceeded or url contains a hash. Custom transform functions are supported.

basePath

Specify the base path where to search images from

assetsPath

(default: false)

If you specify an assetsPath, the assets files will be copied in that destination

useHash

(default: false)

If set to true the copy method is going to rename the path of the files by a hash name

---

Contributing

Work on a branch, install dev-dependencies, respect coding style & run tests before submitting a bug fix or a feature.

$ git clone https://github.com/postcss/postcss-url.git
$ git checkout -b patch-1
$ npm install
$ npm test

Changelog

License