postcss-url-mapper
v1.2.0
Published
Simple .map for urls in CSS
Downloads
985
Readme
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.