postcss-custom-url

Transform url() in css

var url = require('postcss-custom-url')
var custom = url.custom
var util = url.util

var postcss = require('postcss')
var path = require('path')
var fixtures = path.resolve.bind(path, __dirname, 'fixtures')

postcss(url({
  maxSize: 5,
  assetOutFolder: fixtures('build', 'images'),
}))
.process(
  '.a{ background-image: url(images/octocat_setup.png); }',
  { from: fixtures('a.css'), to: fixtures('build', 'css', 'a.css') }
)
.then(function (result) {
  console.log(result.css)
  // '.a{ background-image: url(../images/octocat_setup.png); }'
})

The same with custom.bind([ util.inline, util.copy ])

url.plugin will create a postcss-plugin, with the function custom.bind(customTransforms)

If name not string, it is treated as customTransforms

If customTransforms falsy, [ util.rebase ] is used.

var rebase = url.plugin()
postcss(rebase())

Type: Function

Your postcss-plugin function

Type: Array

An array of transform functions.

The transform function signature: transformFn(result)

Type: Object

• result.url: the url in css. Transforms should modify this field
• result.file: the asset file path, if result.url is relative
• result.opts: options mixed from both the plugin and postcss. It always inludes from and to.

Type: Function

It could be synchronous, or made asynchronous in the gulp-way:

• accept a callback
• return a promise
• return a stream

NOTE: usually, you should check result.url before you do your transformations.

A group of methods.

Transform result.url to data-url.

Options:

Type: Number

Default: 10

Specify the maximum file size to inline (in kbytes)

Copy asset files to proper destinations and transform result.url.

Options:

Type: Boolean

Default: false

If true, assets are renamed by their sha1 hashes

Type: String, Function

Specify the destination where assets should be copied

If Function, it receives the asset file path and result.opts, and should return the output folder.

Urls are transformed based on the destination.