postcss-url-mapper

Simple .map for urls in CSS

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
postcss-url-mapper
1.2.07 years ago8 years agoMinified + gzip package size for postcss-url-mapper in KB

Readme

Simple .map for urls in CSS

title="Philosopher’s stone, logo of PostCSS" src="http://postcss.github.io/postcss/logo.svg">

Install

With npmnpm 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.