postcss-url-mapper

Simple .map for urls in CSS

Install

With npm do:

npm install postcss-url-mapper --save

Usage

postcss([require('postcss-url-mapper')(mapfunc, options)])

See the PostCSS documentation for examples for your environment.

Configuration

Map

Map function.
Takes two arguments: url and type, where type is a name of CSS variable, property or at-rule (background, cursor, import, --color, etc).
Required.

Options

atRules

Indicates whether the mapper should call map function for at-rules (like @import).
Type: boolean
Default: false

Example

Let's imagine that we need to add prefix /fonts/ for all src urls, /bg/ for value of CSS variable --background-image and /images/ for urls in other properties. And we also need to replace http with https in @import:

postcss([require('postcss-url-mapper')(urlMapper, { atRules: true })]);
 
function urlMapper(url, type) {
  switch (type) {
    case 'import':
      return url.replace('/^http/', 'https');
    case 'src':
      return `/fonts/${url}`;
    case '--background-image':
      return `/bg/${url}`;
    default:
      return `/images/${url}`;
  }
}

Note: Mapper doesn't match on data URI (url is always URL), but you can return it, e.g. when you replace icons with their data. But I think there is better tools for such tasks.