Simple .map for urls in CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.editorconfig
.eslintrc.json
.gitattributes
.gitignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
package.json
postcss-url-mapper.js
tests.js

README.md

postcss-url-mapper Build Status npm version

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.